Topic 1 – CSS Rules

There are three ways to add styles to your document: inline styles (added to a tag using the HTML style attribute), embedded styles (placed in the head of your HTML document), and linked styles (place styles in a separate document known as a style sheet). A CSS rule is made up of two parts; the selector, which states the element the rule selects, and the declaration, which consists of the property and the value. You can write rules that target specific areas of your markup using contextual selectors, ID and class selectors, and attribute selectors. Contextual selectors select an element based on an ancestor or sibling element, ID and class selectors select an element based on ID and class attributes that you add to it, and attribute selectors select an element based on information in its attributes.

Topic 2 - Pseudo-Classes

There are two groups of pseudo-classes: UI and structural. UI (user interface) pseudo-classes cause rules to be applied to the markup when an HTML element is in a certain state, such as the cursor being over a link. UI pseudo-classes are most commonly used with hyperlinks, such as link, visited, hover, active, focus, and target. Structural pseudo-classes cause rules to be applied to the markup when certain structural relationships exist in the markup, such as an element being first or last in a related group of elements. Other pseudo-elements include the ::first-letter, the ::first-line, and the ::before and ::after.

Topic 3 – The Cascade

The cascading style sheet involves styles falling down form one level of the hierarchy in your document to the next. A browser looks at styles in the following order, with the last always ‘winning’: 1) default browser style sheet 2) user style sheet 3) author style sheets 4) author embedded styles and 5) author inline styles. There are also rules that define how the cascade works, including 1) finding all declarations that apply to each element and property 2) sorting by order and weight 3) sorting by specificity and 4) sorting by order. Rule declarations can include styles such as word values (ex: font-weight bold), numerical values (ex: font-size: 12px), and color values (ex: color: red or color: #FFFFFF).