The Look of the Web

CSS3 Cascading Style Sheets- Third iteration Separate page the user never sees unintentionally Used to alter appearance and visual appeal to sites Has Grammar and Vocabulary Defines Layout and Style Created to simplify Website redesign by separating style and structure Change one page to adjust the look of 2, 5, 10, 50, 1000

Parts of a CSS Style Selector Element you want to adjust the appearance Declaration A change you want to make Property Factor of the element that is changing Value Variable you are changing that factor to appear as

Parts of a CSS Style a { color: #F60; text-decoration: none; }

Selectors Three main types of Selectors HTML Tag Adjusts all HTML Elements with that tag Class Adjusts all HTML Elements with that class assignment Declared in a CSS document with a period before a user defined variable.blogTitle{text-size:16pt;} This One Time At Bandcamp…

Selectors ID Adjusts the HTML element with that ID assignment Declared in a CSS document with a pound symbol (or Hashtag, if you prefer) before a user defined variable #navBar{width:100%;} Home | About | Blog | Cat Videos What is the difference between ID and Class? Classes can be used multiple times on a single page IDs can be used only ONCE on a page

Selectors Mnemonic to remember which is which You attend many classes every day, but only have one student ID number When do you use an ID vs. a Class? There’s no rule for using a Class instead of an ID IDs are typically used for structural elements and Classes are used for style elements When are you ever going to have two divs that need to be a navBar? More selectors at

Adding CSS Three Ways to add CSS Inline Big Words Terrible, bad, awful, horrible, no-good idea Internally body{background-color:#000;}

Adding CSS Externally Super, Excellent, Amazing, Stupendous, Awesome, Terrific, Wonderful, Brilliant Idea Literally the entire reason CSS was created

Priority of CSS Styles Browser Default Externally Internally Inline

Structure Tags and Useless by themselves When paired with CSS, very powerful layout tools - inline tag- does not break flow of text Unless you tell it to! - block tag- will create its own line Unless you tell it not to!