CSS Reference Sheet
There are multiple ways to use these: style, class, id. Examples:
<font style="font-size:10pt; color:#eee;"> </font>
<img class="somesomeclass">
In the header, within the <style> </style> tags, you'd have .somesomeclass {font-size:10pt; color:#eee;}
<div id="showsomeid"> </div>
In the header, within the <style> </style> tags, you'd have #showsomeid {font-size:10pt; color:#eee;}
With some exceptions, these can be applied to many elements (font, img, hr, p, table, td, tr, div, span, a, h1, h6, li, ul, etc.). Disclaimer: Et cetera is not an element.
Note that you can also assign the same styling rules for an entire category of elements. For example, you can write img{border:1px dashed #000;} within the <style> tags to assign this type of styling to all images (with the img tag). Notice that the absence of . and #. Of course, if you don't want to give all <img> tags 1-pixel dotted purple borders, then in addition to the general line you've just written, you can either assign a class img.otherclass{border:1px solid purple} or independentclass{border:1px solid purple} within the style tags. Or simply give specific images overrides by using <img style="border:1px dotted purple;">. This applies to other elements too. You'll also want to check out the CSS selectors section.
Now that you know this, here's a list of many of the possible CSS properties you can use. I'm not going to annotate each one because I assume I've pushed your attention span already. Test and play around to see what you get. Have fun!
Font | Color & Background | Text | Div, Table, Image | List & Display | Position | Page Break | Cursors
Font
| Property | Example |
| font-family | font-family:verdana, arial, sans-serif |
| font-style | font-style:normal font-style:italic |
| font-variant | font-variant:normal font-variant:small-caps |
| font-weight | font-weight:normal font-weight:bold |
| font-size |
font-size:xx-large font-size:x-large font-size:large font-size:medium font-size:small font-size:x-small font-size:xx-small font-size:larger font-size:smaller font-size:50% font-size:11px font-size:8pt |
| font | font: bold 8pt verdana,arial,sans-serif |
Color and Background
| Property | Example |
| color | color:red |
| background-color | background-color: pink background-color:transparent |
| background-image | background-image:url(seacucumber.jpg) background-image:none |
| background-repeat |
background-repeat:no-repeat background-repeat:repeat background-repeat:repeat-x background-repeat:repeat-y |
| background-attachment | background-attachment:fixed background-attachment:scroll |
| background-position |
background-position:top center background-position:bottom center background-position:left center background-position:right center background-position:top (2nd keyword takes default value of "center" if undefined.) background-position:0% 0% background-position:100% 100% background-position:0px 0px background-position:x-offset y-offset background-position:inherit (Inherit from parent element) |
| background | background: pink url(hippo.jpg) repeat-y |
Text
| Property | Example |
| letter-spacing | letter-spacing:5pt letter-spacing:-0.5px letter-spacing:normal |
| word-spacing | word-spacing:5pt word-spacing:-0.5px word-spacing:normal |
| line-height |
line-height:15pt line-height:10 line-height:50% line-height:normal |
| text-decoration |
text-decoration:none text-decoration:underline text-decoration:overline text-decoration:line-through |
| vertical-align | vertical-align:sub vertical-align:super |
| text-transform |
text-transform:capitalize text-transform:uppercase text-transform:lowercase text-transform:none |
| text-align |
text-align:left text-align:right text-align:center text-align:justify |
| text-indent | text-indent:25px text-indent:20% |
| white-space | white-space:normal white-space:pre white-space:nowrap |
| text-shadow | text-shadow text-shadow: #333 2px 3px 5px; text-shadow: color x-offset y-offset blur-radius; |
Div, Table, Image
| Property | Example |
| margin-top |
margin-top:5px margin-top:1% margin-top:1em margin-top:auto |
| margin-right |
margin-right:5px margin-right:1% margin-right:1em margin-right:auto |
| margin-bottom |
margin-bottom:5px margin-bottom:1% margin-bottom:1em margin-bottom:auto |
| margin-left |
margin-left:5px margin-left:1% margin-left:1em margin-left:auto |
| margin | margin:auto margin:10px margin:10px 5px 10px 5px margin:1% 5% 1% 5% margin:top right bottom left |
| padding-top |
padding-top:10% padding-right:20px padding-right:1.2em padding-right:10pt |
| padding-right |
padding-right:10% padding-right:20px padding-right:1.2em padding-right:10pt |
| padding-bottom |
padding-bottom:10% padding-bottom:20px padding-bottom:1.2em padding-bottom:10pt |
| padding-left |
padding-left:10% padding-left:20px padding-left:1.2em padding-left:10pt |
| padding | padding:10px padding:10px 10px 10px 15px padding:10% 10% 10% 15% padding:top right bottom left |
| border-top-width |
border-top-width:thin border-top-width:medium border-top-width:thick border-top-width:10px |
| border-right-width |
border-right-width:thin border-right-width:medium border-right-width:thick border-right-width:10px |
| border-bottom-width |
border-bottom-width:thin border-bottom-width:medium border-bottom-width:thick border-bottom-width:10px |
| border-left-width |
border-left-width:thin border-left-width:medium border-left-width:thick border-left-width:10px |
| border-width | border-width: 3px 5px 3px 5px border-width: 3px thin 5px thick 3px thin 5px thick |
| border-top-color | border-top-color:crimson |
| border-right-color | border-right-color:tomato |
| border-bottom-color | border-bottom-color:gold |
| border-left-color | border-left-color:purple |
| border-color | border-color: red white blue green |
| border-top-style |
border-top-style:none border-top-style:solid border-top-style:double border-top-style:groove border-top-style:ridge border-top-style:inset border-top-style:outset |
| border-right-style |
border-right-style:none border-right-style:solid border-right-style:double border-right-style:groove border-right-style:ridge border-right-style:inset border-right-style:outset |
| border-bottom-style |
border-bottom-style:none border-bottom-style:solid border-bottom-style:double border-bottom-style:groove border-bottom-style:ridge border-bottom-style:inset border-bottom-style:outset |
| border-left-style |
border-left-style:none border-left-style:solid border-left-style:double border-left-style:groove border-left-style:ridge border-left-style:inset border-left-style:outset |
| border-style |
border-style:none border-style:solid border-style:double border-style:groove border-style:ridge border-style:inset border-style:outset |
| border-top | border-top: thick outset pink |
| border-right | border-right: medium inset crimson |
| border-bottom | border-bottom: 1px ridge maroon |
| border-left | border-left: 5px groove purple |
| border | border: 1px solid black |
| float | float:left float:right float:none |
| clear | clear:left clear:right clear:both clear:none |
Note: margin: 0px 0px 0px 0px shorthand corresponds to top right bottom left (clockwise).
Same goes for padding: 0px 0px 0px 0px and border: 0px 0px 0px 0px.
List and Display
| Property | Example |
| display | display:none display:block display:inline display:list-item |
| list-style-type |
list-style-type:disk list-style-type:circle list-style-type:square list-style-type:decimal list-style-type:upper-roman list-style-type:lower-roman list-style-type:upper-alpha list-style-type:lower-alpha list-style-type:none |
| list-style-image | list-style-image:url(listbullet.gif) list-style-image:none |
| list-style-position | list-style-position:inside list-style-position:outside |
| list-style | list-style: square outside url(listbullet.gif) |
Position
| Property | Example | Where It Can Be Used |
| clip | clip:rect(0px 200px 200px 0px) clip:auto |
all elements |
| height | height:200px height:auto |
div, span & replaced elements |
| left | left:0px left:5% left:auto |
absolutely & relatively positioned elements |
| overflow |
overflow:visible overflow:hidden overflow:scroll overflow:auto |
all elements |
| position | position:absolute position:relative position:static |
all elements |
| top | top:0px top:5% top:auto |
absolutely & relatively positioned elements |
| visibility | visibility:visible visibility:hidden visibility:inherit |
all elements |
| width | width:20px width:80% width:auto |
div, span, & replaced elements |
| z-index | z-index:-1 z-index:auto |
absolutely & relatively positioned elements |
Page Break
| Property | Example |
| page-break-before |
page-break-before:auto page-break-before:always page-break-before:left page-break-before:right |
| page-break-after |
page-break-before:auto page-break-before:always page-break-before:left page-break-before:right |
Cursors
| Property | Example |
| cursor |
cursor:auto cursor:crosshair cursor:default cursor:hand cursor:move cursor:hand cursor:e-resize cursor:ne-resize cursor:nw-resize cursor:n-resize cursor:se-resize cursor:sw-resize cursor:s-resize cursor:w-resize cursor:text cursor:wait cursor:help |