Click here, Press → key to advance.
The order in which style rules apply.
element { attribute1: value1; }
element child { attribute1: value1; attribute2: value2; }
#topnav ul { list-style: none; color:green; }
ul li { color:green; padding: 5px; }
Spaces are okay (mostly)
body {font-family:Verdana,Arial;font-size:1em;}
body { font-family: Verdana, Arial; font-size: 1em; }
CSS Cheat Sheet by Leslie Franke
Any 'block' element, p, img, table, etc.
<p style="border:1px solid red; padding:4px; color:blue;">Visible text</p>
Visible text
This style rule: #topnav { attributes }
applies to this element - <div id="topnav">
IDs must be unique.
This style rule: p.alert { attributes }
can only apply to paragraphs <p class="alert">
This style rule: .alert { attributes }
can only apply to any element
<p class="alert"> <li class="alert"> <td class="alert">
<a href="#">
Anchors have four pseudo-classes:
a:link | a:visited | a:hover | a:active
Define them in that order.
a:link, a:visited { attributes }
a:hover, a:active { attributes }
Don't 'reinvent the wheel' - there are numerous resources.
DOM = Document Object Model