- when used elsewhere (see http://www.w3schools.com/css/css_syntax.asp): selector { property: value ; property: value ; [...etc...] } - for example: p { color: red; margin: 0; } Basic CSS Selectors - see http://www.w3.org/TR/CSS2/selector.html * : any single element (not multiple elements!) ("* *" selects elements at least two-deep in the document tree) E : the element E, where E is any single HTML tag (e.g. h1, div, ul, p, etc.) E F : the element F located anywhere, at any level, inside element E (F is a descendant of E; E is any ancestor of F) E > F : the element F located directly inside element E (nothing in between) (F is a child of E; E is the parent of F) E.foo : every element E that has attribute class="foo" (multiple) (use *.foo or just .foo to apply to any element with that class) E#bar : the single element E that has attribute id="bar" (only one match) (use *#bar or just #bar to apply to any element with that id) E,F,G : (grouping) elements E and F and G all have these same properties Three Methods of specifying CSS - see http://www.html.net/tutorials/css/lesson2.asp - the method closest to the tag has priority Method 1: Style applied to an individual tag:

Method 2: Style moved to the section: Method 3: Style moved to a separate CSS file: Two types of elements: Block and Inline * Block elements start a new line before and after and take the full width of the element that contains them, e.g. p, h1, ul, div - block elements can contain other block or inline elements - if you "float" a block element, you usually need to restrict its width or else nothing else will fit beside it * Inline elements run together on the same line and wrap at white space, e.g. i, b, em, strong, img, span - inline elements can contain *only* other inline elements, never block - top and bottom paddings and margins are ignored for inline elements; only the side padding and margins work Use

(block) and (inline) to group elements * If your page has a navigation bar and a content section, put each of these into

elements so that you can apply CSS to them (e.g. to "float" them into new positions). Use layout relative to the size of your page or font - use sizes in percentages or "em"s, e.g. 30%, 25em - avoid absolute sizes such as 600px - images by default are sized in fixed px, so if you want them to resize according to the width of your page, set a percentage width e.g. Set minimum and maximum widths for text columns - avoid very wide and very narrow text columns - min-width: 10em; max-width: 40em; Microsoft Internet Explorer vs. Open Source Mozilla/Firefox * The IE browser is seriously broken for many uses of CSS, see http://www.positioniseverything.net/ie-primer.html * For a celebration of the open-source model for fixing CSS bugs, see http://www.positioniseverything.net/gecko.html "You may notice that there are very few Mozbugs here. Mozilla is under constant revision and updating by numerous volunteer programmers, so what bugs do appear seldom survive for long." CSS Test Topics - these are the CSS attributes you are expected to know for a test - (you wrote almost all of these in Assignment 12 http://www.w3.org/Style/Examples/011/firstcss ) - ref: http://www.w3schools.com/css/css_reference.asp color background-color font-family position: absolute top left width padding, padding-{top,right,bottom.left} margin, margin-{top,right,bottom.left} (top,right,bottom,left) border, border-{top,right,bottom.left} (width,style,color) - sizes: px, em, in, cm, % (http://www.w3schools.com/css/css_units.asp) See Assignment 13 (REVIEW ONLY) for sample questions about CSS. -- | Ian! D. Allen - idallen@idallen.ca - Ottawa, Ontario, Canada | Home Page: http://idallen.com/ Contact Improv: http://contactimprov.ca/ | College professor (Free/Libre GNU+Linux) at: http://teaching.idallen.com/ | Defend digital freedom: http://eff.org/ and have fun: http://fools.ca/