CSS quick review

h1, h2 { color: darkred; font-style: italic; } /* A comment. */ 3 CSS rule syntax Pt1. Language CSS quick review Comma-separated list of selectors `property-name: property-value` pairs <h1>I’m red</h1> <p>normal text.</p> <h2>and italic</h2> I’m red normal text. and italic Simple CSS selectors Browser CSS + your CSS <div> 1 </div> <div class=" item "> 2 </div> <div class=" item " id=" star "> 3 </div> <div class=" item special "> 4 </div> div { color: red} /* select by tag name: 1, 2, 3, 4 */ .item { color: red } /* select by class name: 2, 3, 4 */ #star { color: red; } /* select by element ID : 3 */ .item.special { color: red; } /* multiple class names: 4 */ div.special { color: red; } /* tag name + class names: 4 */ Table: different ways to apply a rule to elements. Specificity : resolving conflicting rules applied to one element. Cascade and specificity Classes and IDs enable CSS to select specific elements. div { color: red; } #star { color: green; } .item { color: blue; } .item { color: yellow; } div { color: red; } .item { color: blue; } .item { color: yellow; } #star { color: green ; } sort color: green; cascade more general more specific (winner) 4 Pt1. Language CSS quick review Property inheritance <div style=" color: darkred ; border: solid;"> I'm red. This div has a border. <div> I'm also red, but without a border. </div> <div style=" color: black ;"> Color overridden! </div> <div> Properties related to text formatting are carried to descendants. Canceling other rules p { color: red; } p.specific { color: unset ; } /* Remove this property. */ p { color: red; } p.specific { color: revert ; } /* Use the browser's default . */ The effect is not to set the property, which is inheritance for inheritable properties, or to use the initial value for non-inheritables. inheritable non-inheritable p { color: red; } p.specific { color: inherit ; } /* Computed value of the parent . */ Use special property values: unset , revert , inherit . CSS = style + layout ● Style is a property of an object, such as font, color & border. ● Style is easier because it's confined to a single object. ● Style is often cosmetic ; a minimalist design is OK. ● You can lookup stuff on the fly. ● Not much to say about style. ● Layout is the relationship between objects, like position & alignment. ● Layout is harder because CSS deals with properties, not relations. ● Layout is essential ; no design is OK with objects in the wrong place. ● Learning layout is the priority. ● We'll focus on layout in this book.