Revision

Unit sizes:

Can be:

- px size e.g. 1px

- em size - which is the default size of the browser times by the number (1.2em = 1.2*16)

- percentage size - 100% of the parent

- in/cm/mm - Measurement units equal to size of real life - can be used when determining size for printer.

Element selectors:

CSS - p { color: blue;}

Selects the element specified in selector

HTML - <p> Hero <p>

CSS -  .copyright { color: blue;}

Selects classes named "copyright"

HTML - <p class="copyright">copyright from 2010</p>

CSS - #wrap { color:blue;}

Selects ID "wrap" - only one ID per HTML document

HTML - <div id="wrap"> </div>

CSS - * {color: blue;}

Selects every element

CSS - img[src="image.png"] {border-color: red;}

**Check** Selects the item in the brackets - these can be just [src] or the whole value [src="image.png"]

HTML - <img src="image.png">

CSS - li > p {color:blue;}

Selects the second element only if it is a direct child of the first.

HTML - <li><p>hero</p></li>

CSS - li p {color:blue;}

Selects right handed element when a child of left - but doesn't have to be a direct child - value travels down the hierarchy

HTML - <li><div><p>hero</p></div></li>

CSS - h2 + p + div {color:blue;}

Selects attributes with these descriptors on the same level of hierarchy (for example, if they were all within the same div)

HTML - <h2> cat </h2><p>mouse</p><div></div>

CSS - a:hover {color:blue;}

Applies the value to the A attribute but only when it is "hovered" (or similarly described action is activated)

HTML <a href="hotmail.com>meow</a>

CSS - p:first-letter {color:blue;}

Targets the first letter of every <p> element