` - when used elsewhere (see ): selector { property: value ; property: value ; [...etc...] } - for example: `p { color: red; margin: 0; }` Basic CSS Selectors =================== - see * : any single element (not multiple elements!) "* *" selects elements at least two-deep in the document tree "* + *" selects every second sibling 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 + F : the element F located as an immediate sibling of E (nothing in between) E and F have the same parent; F follows E 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 - the method closest to the tag has priority **Method 1**: Style applied to an individual tag (**bad**: mixes form and content):

**Method 2**: Style moved to the `` section (**better**, but still mixes form and content): **Method 3**: Style moved to a separate CSS file (**best**: form and content are kept completely separate): 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). Layout relative to font size ============================ - 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 - For a celebration of the open-source model for fixing CSS bugs, see > 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 properties you are expected to know for a test (you will use almost all of these in your assignments): - - list of CSS properties to know: color background-color font-family position: absolute top left width, min-width, max-width margin [top,right,bottom,left] margin-{top,right,bottom,left} border, border-{top,right,bottom,left} [width] [style] [color] - you only need to remember one style "solid" padding [top,right,bottom,left] padding-{top,right,bottom,left} sizes: em, %, px, in, cm (use em and % and avoid px, in, cm) note the order of arguments: top right bottom left note the American spelling! - See also the CSS reference: - Alternate: - See also the Units reference: - Alternate: none Resources for choosing styles ============================= - - typeset style generator - **Also available:** - Convert Text in Image to editable one (OCR) - Web Page to High Resolution Image or Wallpaper - Web Page to Printer Friendly PDF - Split and Merge PDF Files - Latex Equation Editor - Typeset Style Generator - Google Chrome Extension and Firefox Add-On -- | 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/ [Plain Text] - plain text version of this page in [Pandoc Markdown] format [www.idallen.com]: http://www.idallen.com/ [Course Home Page]: .. [Course Outline]: course_outline.pdf [All Weeks]: indexcgi.cgi [Plain Text]: 700_basic_css.txt [**What-vs-How Rule:**]: 550_web_what_vs_how.html [Pandoc Markdown]: http://johnmacfarlane.net/pandoc/