CSS Review

Cascading Style Sheets (CSS)

W3C standard for defining the presentation of documents written in HTML
Using style sheets
1. Start with an HTML document
2. Write style rules for HTML elements
3. Attach the style rules to the document

CSS rules

/* This is a comment */
selector {
  property1: value1;
  property2: value2;
  property3: vaule3:
}

selector: the element to style
property: the style property
value: the value of the property

Style rule example

/*
This rule changes the font size for paragraph
elements to small and the text color to green
*/
p {
  font-size: small;
  color: green;
}

Attaching Style Sheets to the Document

External style sheets

<head>
  <link rel="stylesheet" href="file.css">
</head>

Embedded style sheets

<head>
  <style>
    /* rules go here */
  </style>
</head>

Inline style
```
<p style="color: green;">...</p>
```

Document Structure and Inheritance

Example Document Structure

Selectors

Element selector: targets an element
element {property: value;}
ID selector: targets an element with an id attribute
#id-name {property: value;}
Class selector: targets an element with a class attribute
element.class-name {property: value;}
Descendent selector: target elements that are contained within another element
e1 e2 {property: value;}
Grouped selector: shortcut to groups multiple styles
e1, e2, e3 {property: value;}

Pseudo-class Selectors

Link pseudo-classes
- :link \(\;\) applies a style to an unvisited link
- :visited \(\;\) applies a style to links that have been visited
User action pseudo-classes
- :focus \(\;\) applies a style when the element is selected
- :hover \(\;\) applies a style when the mouse pointer is over the element
- :active \(\;\) applies a style when the element is in the process of being activated

Conflicting Style Sheet Rules

A rule in a style sheet lower in this list has higher priority
1. Browser default style
2. User style settings (reader style sheet)
3. Linked external style sheets
4. Embedded style sheets
5. Inline styles
6. Any style marked !important by the author
7. Any style marked !important by the reader

Specificity

After style sheet precedence, the specificity of the rule is used
The following list is from least to most specific:
1. Individual element selectors
2. Descendent selectors
3. Class selector
4. ID selector
If a conflict remains, the rule defined last is chosen

The Box Model

CSS box model