CSS+101


 * CSS 101 – Sept 20th**

//This document is intended as a general refresher (or introduction) to CSS. This reference material is primarily (almost directly) drawn from The CSS PocketGuide – please review that text for basic information on CSS. While we will be doing exercises for the next few weeks to get you up to speed, it is crucial that you invest yourself in the exercises and do some self-directed research/experimentation to stay on track.//


 * Style Sheets**

//Style sheets provide a set of guidelines for styling a structured document by defining rules for the appearance of different types of content or different contexts that content can be found in... As a browser or other user agent loads the HTML content for the coument, it also loads the style information. From this style sheet information, it then builds up the set of presentation rules for each individual content item based on its element type, its state, and its location in the document. It will ultimately render each element consistently based on this accumulated set of rules.//
 * Anatomy of a CSS Rule Set (pg. 3)**

1. Rule set: A single CSS rule, which includes a selector and a declaration block. 2. Selector: Includes everything contained within the curly brace – describes the markup elements to which the declaration block applies. Individual selectors may share a declaration block, with each separated by a comma. 3. Declaration block: Starts with { and ends with }. Inside the block there are zero or more declarations, each separated by a semicolon. 4. Declaration: Colon separated property-value pair. //In this case the property is 'background' and value is #fff (white)// 5. Property: The property is the CSS property that the declaration is targetting. 6. Value: The value that is applied to a declared property. The syntax of the value depends on the property but can be things such as a length (e.g. 10px, or 1.5 em) a percentage (150%), or a mix of multiple space separated types.

So, with our example rule set:

body { background: #fff; color:#000; }

...Is telling the body selector that it should have a background that is white #fff (white) and the type should be #000 (black).


 * Selectors (pg. 38-41)**

e.g. #header {} – selects the element with the ID of header
 * 1) id selector – matches any element with a specified value as its ID attribute.

.class – matches elements with the specified class name. e.g. .help {} – matches elements with a class of help

Pseudo-class Selectors – fall into two groups, reflect states (e.g. visitd links) and positions (e.g. the first item in a list)

a:link { color: blue;} a:visited {color: red;}