CSS Quick Reference

v1.5, last modified Feb 26, 2008

There are many great resources for Cascading Style Sheet information on the web. Among them are Quirksmode.org, CSS.MaxDesign.com.au, Andy Budd, Eric Meyer, Dave Shea, PositionIsEverything.net, CSSZenGarden.com, and many others.

We love all of the articles on these sites. Instead of duplicating the lengthy and detailed charts that explain which CSS features work or don't work in various browsers, we wanted to make a quick reference chart, listing only the CSS features that work in most browsers. CSS Functions only supported by Internet Explorer are NOT LISTED.


Defining Style Sheets

Linking to an external stylesheet
<head>
  <link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>

NOTE: External stylesheets DO NOT have <style> tags.
Embedding styles within a page
<style type="text/css">
  ... styles ...
</style>
  

Style Syntax

Each Style starts with a Selector, followed by Style Properties inside a set of { }.
Each Property MUST END with a semicolon.

Example of defining style for an entire page:
body {
  margin:0;
  padding:8px 4px 12px 4px;
  color:#ffbf11;
  background:#000000 url(images/space.gif);
}
CSS Comments
/* this is a CSS comment, different from an HTML comment */
  

Selectors

Type Selectors: define the style of various HTML elements
Examples:
  body {...}
  p {...}
  td {...}
  ul {...}
Class Selectors: define your own styles with names you choose
Examples:
  .pretty {...}
  .stinky {...}
  .mushy {...}
Class selector HTML example:
  <p class="stinky">This is a stinky paragraph</p>

Rules:
  • Class selectors begin with a dot, followed by the class name.
  • HTML tags must have class="classname".
  • You CAN use class="classname" in more than one type of HTML element, but not all style codes work with all elements. For example font-weight:bold; does not have much effect on IMG tags.
  • Choose unique class names that don't conflict with ID names, CSS properties, etc.
  • Class names are CASE-Sensitive.
ID Selectors: define a style for any HTML element that has an "ID"
Examples:
  #mainParagraph {...}
  #sidemenu {...}
  #footer {...}

ID selector HTML example:
  <div id="sidemenu"> ...menu links... </div>

Rules:
  • ID selectors begin with #, followed by the ID name.
  • The HTML tag must have id="idname".
  • Use each ID name only once per page. To apply the same style to multiple elements, use a class selector. You can also use id="idname" class="classname" in the same tag.
  • Choose unique ID names that don't conflict with class names, CSS properties, etc.
  • ID names are CASE-Sensitive.
Combining Selectors: combine type and class to narrow down what gets styled.
The following 2 examples can be used in the same stylesheet:
  div.stinky {...} only applied to DIV elements with class="stinky"
  img.stinky {...} only applied to IMG tags with class="stinky"
Descendant Selectors: use multiple selectors to narrow down what gets styled
Examples:
  div.stinky p {...} only applied to p tags inside DIVs with class="stinky"
  table table img {...} only applied to img tags inside tables, inside other tables
Using commas for multiple objects
Example:
  table, td, tr, span, form, p {...} style is applied to each listed element
Other Selectors
There are additional selectors which are not listed here because they are not widely supported, or they don't work in Internet Explorer, which is still the most widely used browser.
  

Properties

Properties are listed in alphabetical order. Each property has examples of possible values. Properties are not listed if they are not widely supported or if they are only supported by Internet Explorer.

background:
#ffffff
transparent
url(images/pattern.gif)
fixed        /* background doesn't move when page scrolls */
repeat
repeat-x     /* tile an image horizontal only */
repeat-y     /* tile an image vertical only */
no-repeat
top
left
center
right
bottom
2px 1px      /* exact positioning, from left top */

Example:
#footer {
  background:transparent url(images/footer.gif) repeat-x bottom;
}

This example tiles a transparent GIF only in a horizontal direction, at the bottom of an element (perhaps a DIV) that contains id="footer".
background-attachment:
fixed
background-color:
#ffcc00
transparent
background-image:
url(images/something.gif)
background-position:
top
left
center
right
bottom
2px 1px
background-repeat:
repeat
repeat-x
repeat-y
no-repeat
border:
1px
none
solid
dashed
dotted 
double     /* needs at least 3px to see effect */  
ridge      /* regular 3d border needs at least 4px to see effect */
groove     /* kind of strange, needs at least 4px to see effect */ 
inset      /* like a recessed bevel */
outset     /* like a button bevel */ 
#000000

Example:
div {
  border:2px solid #ffffff;
}

Browser Differences:
  • borders are drawn INSIDE the container in IE, Opera 7.
  • borders are drawn OUTSIDE the container in Firefox, Netscape 7, Safari.
    (part of the annoying "box model" conflict)
border-collapse:
collapse
border-top:
(set the border on one side)
border-right:
(set the border on one side)
border-bottom:
(set the border on one side)
border-left:
(set the border on one side)
bottom:
4px     /* positions an object 4px up from the bottom of its container */
50%
clear:
none
left
right
both
Clears a "floated" element. See also: float:
clip:
rect(top left bottom right)
color:
#000000        /* #RRGGBB, each digit is 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f */
rgb(0,0,0)     /* (R,G,B), each digit is 0 to 255, does NOT work everywhere */
aqua           /* #00ffff */
black          /* #000000 */
blue           /* #0000ff */
fuchsia        /* #ff00ff */
gray           /* #808080 */
green          /* #008000 */
lime           /* #00ff00 */
maroon         /* #800000 */
navy           /* #000080 */
olive          /* #808000 */
purple         /* #800080 */
red            /* #ff0000 */
silver         /* #c0c0c0 */
orange         /* #ffa500 */
teal           /* #008080 */
white          /* #ffffff */
yellow         /* #ffff00 */
cursor:
auto 
crosshair 
default 
pointer        /* The cursor that indicates a link on rollover */
move
N-resize       /* N can be replaced with S, E, W, NE, NW, SE, SW  */
text           /* Usually rendered as an I-bar */ 
wait           /* Usually rendered as a watch or hourglass */ 
help
display:
none           /* Makes the element disappear */
block
inline
float:
none
left
right
Floats something like an image so text flows around it.
font-family:
verdana,helvetica,sans-serif   /* easiest to read at small sizes */
arial,helvetica,sans-serif
times,times new roman,serif
courier new,courier,monospace
cursive                        /* unpredictable */
fantasy                        /* unpredictable */

Rules:
  • A font only works for people who have that font installed on their computer.
  • Take into consideration both Windows and Macintosh users.
  • Always include a generic font at the end of the font list.
font-size:
10px           /* very small */
11px           /* small to normal depending on font */
12px           /* normal */
16px           /* titles */
40px           /* really big */

0.5em          /* relative to parent element */
larger         /* relative to parent element */
smaller        /* relative to parent element */

xx-small       /* like HTML H6 */
x-small 
small          /* like HTML H5 */
medium         /* like HTML H4 */
large          /* like HTML H3 */
x-large        /* like HTML H2 */
xx-large       /* like HTML H1 */
font-style:
normal
italic
oblique        /* same as italic */
font-variant:
normal
small-caps
font-weight:
normal
bold
height:
200px
90%
left:
4px
50%
letter-spacing:
normal
5px
Called "kerning" in Typography.
line-height:
normal
130%           /* percentage of the font-size, 130 gives a nice look */
10px           /* scrunch 11px font lines together */

Called "Ledding" in Typography.
list-style:
none
disc
circle
square
decimal 
decimal-leading-zero 
lower-roman 
upper-roman 
lower-alpha 
upper-alpha 
lower-greek 
lower-alpha 
lower-latin 
upper-alpha 
upper-latin 
url(images/bullet.gif)

Note: If you want a custom bullet image, it works better this way:
ul {margin:0; padding:0; list-style:none;}
li {
  margin:0 0 6px 0; padding:0 0 0 16px; /* left padding for bullet image */
  background:transparent url(images/bullet.gif) no-repeat;
}
margin:
0              /* to turn all margins off, no unit is necessary */
4px            /* use a single value for the same margin on all sides */ 
2px 0 2px 0    /* specify separate top, right, bottom, left margins (clockwise from top) */
auto           /* if right AND left are auto, element will be centered */

Margins add transparent space OUTSIDE the background and border.

Examples:
  img {margin:2px 0 2px 0;}
  div (margin: 4px auto 10px auto;}    /* div will be horizontally centered */
margin-top:
(set the margin on one side)
margin-right:
(set the margin on one side)
margin-bottom:
(set the margin on one side)
margin-left:
(set the margin on one side)
min-height:
Not supported in IE so its fairly useless
min-width:
Not supported in IE so its fairly useless
overflow:
visible
hidden
scroll
auto
padding:
0              /* to turn all padding off, no unit is necessary */
4px            /* use a single unit for even padding on all sides */ 
2px 0 2px 0    /* specify separate top, right, bottom, left padding (clockwise from top) */

Padding adds space INSIDE the background and border.
padding-top:
(set the padding on one side)
padding-right:
(set the padding on one side)
padding-bottom:
(set the padding on one side)
padding-left:
(set the padding on one side)
position:
static        /* where it would "normally" be in the html flow */
absolute      /* position inside the parent element */
relative      /* position relative to where it would "normally" be */
fixed         /* do not scroll the element as the page scrolls */
right:
4px
50%
Positions an element from the right-hand edge of its container.
text-align:
left 
right 
center 
justify        /* makes even left and right margins, like a newspaper column */
text-decoration:
none
underline
overline
line-through
blink          /* does not work in IE, only works in Firefox, Opera 7 */
text-transform:
capitalize
lowercase
uppercase
top:
4px
50%
vertical-align:
baseline 
middle 
sub            /* do not use, messes up line spacing, see below */
super          /* do not use, messes up line spacing, see below */
text-top 
text-bottom

Making superscripts and subscripts without messing up the line spacing:

CSS
  .sups {position:relative; top:-4px;}
  .subs {position:relative; top:4px;}

HTML
  Here's a superscript<span class="sups">1</span>.
visibility:
hidden        /* the element will still influence other elements on the page */ 
visible

To remove the element completely, use display:none; instead.
white-space:
normal
nowrap        /* do not wrap a line until a line break, somewhat buggy in some browsers */ 
pre           /* like using <pre> in HTML, requires "strict" mode for IE 6 */
width:
200px
90%
z-index:
5             /* a DIV with a z-index of 5 will be "above" those with 4 or lower */

Z-index only applies to other objects in the same container.



bookmark and share:                    

 





[6 Comments]


  

Did we forget anything??

26 Jan 2006 4:34am

"Please let us know if something is missing. As we already mentioned, quite a few things were left out on purpose because either they ONLY work in IE, or they DONT work in IE."
 


  

Lose the background image

28 Aug 2007 5:50am

"Excellent list, but difficult to read, because of the escalator background image. Remove that, and this would be one of the best CSS references out there.

[Reply from Rob G]
Don't like the stylesheet? You can easily change it. That's what CSS is all about!"
 


  

Glossary

07 Sep 2007 10:21pm

"this is the best glossary I have found thus far. Thanks for your time. - DK"
 


  

Hitcraft

20 Oct 2007 12:36pm

"Thanks a lot for this CSS guide."
 


  

Fun with CSS

09 Mar 2008 8:18am

"I've always used the .class to identify that it was I who created the CSS file. Upon reading your guide I realize I can also have fun with it (stinky) class had me rolling on the floor due to the fact that I have a client that has a site selling s**t no kidding poop-to-go. I'm going to have fun with that CSS page. No reason not to have a laugh while coding. Thanks TD"
 


  

Nice Guide

28 Mar 2008 1:37pm

"This is a great guide. I love that it's alphabetical and on ONE page. Thanks!"
 

  

Leave a Comment

subject / name:

 email: (Not Shown)
comment (html=OFF)