CSS Quick Reference
Defining styles Height and width
External height: 20px; can be px, ems, %
<link rel="stylesheet" type="text/css" href="styles.css" media="screen" /> width: 100px;
Embedded Margins
<style type="text/css"> … </style>
top, right, bottom, left
margin: 2px 0px 2px 0px;
Color Bold, italic, and underline Text align
p { color: red; } font-weight: bold; text-align: left, Padding Borders
p { color: #f00; } font-style: italic; right, center top right bottom left width style color
p { color: #ff0000; } text-decoration: underline; justify; padding: 2px 0px 2px 0px; border: 1px solid black;
Image alignment Spacing IDs Classes
vertical-align: super, top, text-top, middle, letter-spacing: 2px; You should only use an id once/file. You can use a class many times.
baseline, bottom, text-bottom, word-spacing: 2px; P#myID { color: #f000; } p.myClass { color: #f00; }
sub <p id=“myID”>red text</p> <p class="myClass">red text</p>
Background
#myID { color: #f00; } .myClass { color: #f00; }
background-color: #f00; <p id=“myID">red text</p> or <h1 class="myClass">red text</h1>
background-image: url(image.gif); <h1 id=“myID">red text</h1> <p class="myClass">red text</p>
background-repeat: repeat, no-repeat, repeat-x, repeat-y
background-attachment: scroll, fixed Measurement units Link pseudo selectors
background-position: top, center, bottom, left, right points: 12pt; /* good for print styles */ LoVe/HAte a:link { color: red; }
pixels: 12px; /* used for spacing */ :link
Shorthand ‘ems’: 1em; /* ≈ 100% */
background: #fff url(image.gif) no-repeat fixed center; :visited
percentages: 120%; /* will inherit */ :focus
:hover
Lists Position, overflow, and visibility :active
list-style-type: circle, decimal, disc, square, lower-roman, clear: both, left, right, none
upper-roman, lower-alpha, upper-alpha, none float: left, right, none Comments
list-style-position: inside or outside left: auto, measurement value
list-style-image: url(image.gif); top: auto, measurement value /* this is a comment */
position: relative, absolute
overflow: visible, hidden, scroll, auto
Font family visibility: visible, hidden
font-family: Georgia, "Times New Roman", serif; z-index: auto, integer
© 2012 ClickStart, Inc. | UX + UA Consulting and Training | www.clickstart.net