CSS Quick Reference

v1.5, last modified Apr 21, 2010

 

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, 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 object 4px 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           /* set right AND left to auto, element is 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 */
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.










[30 Comments]


  

Thank you for A Simple List

02 May 2012 1:37am

"Thank you so much for creating and posting a simple list. It made me think: never underestimate the mind-clearing power and comfort of a simple list."
 


  

Charles Jacksdon

16 Apr 2012 5:40am

"I haven't written any code for over a year. This site is great. It put me back on track. Thank you for sharing."
 


  

Rails 4 feet 8 and a half...

21 Feb 2012 4:31pm

"I love the fact you've left out everything that's IE specific... means that using this list it works with ANY browser which makes good design easier. With the rails the same width the trains go everywhere. It doesn't matter what the width actually is."
 


  

Background images ...

20 Dec 2011 11:41pm

"This is a very useful listing. But I wonder if there could be some helpful comments about relative paths to image files in external *.css files? It seems that the browsers have difficulty, or just cannot, read a full file path."
 


  

Perfect page

01 Nov 2011 7:37am

"I will use this page from now on. Amazing reference and utterly beautiful."
 


  

Wonderful Reference

28 Aug 2011 6:29am

"Thank you for sharing such a simple yet comprehensive list!"
 


  

THANK YOU!!

04 Feb 2011 2:22pm

"Thank you sooo much for this--why can't all references can't be this straightforward? Only wish I found it earlier!"
 


  

jimmy

11 Jan 2011 9:36pm

"very nice and helpful page ..."
 


  

Lucía

30 Nov 2010 11:03pm

"Great. Thanks to share."
 


  

JayForWeb

12 Nov 2010 10:42pm

"Thanks a lot!! This straight forward article cleared out many questions. Great job!!"
 


  

UncleMrPhil

03 Jul 2010 12:49pm

"Excellent...excellent. A Sterling Scholarly endeavor by a disciple destined to dominate in his chosen craft. I hereby bestow upon thee a Masters degree from the University of Hardknocks and uncommon sense... I'm bookmarking this page... Peace from London."
 


  

Really useful

17 Jun 2010 6:30am

"Abosultely amazing article. good one place comprehensive guide. Thanks a lot!"
 


  

Tom F

10 Jun 2010 8:16am

"I never comment, but this resource is so good! Thank you for your efforts."
 


  

Great Job

03 Jun 2010 8:38am

"Thanks a lot, it's really useful, now I'll get my page CSS certified!!! Greetings"
 


  

Genial!!!

02 Apr 2010 1:21pm

"I was figuring out how to work a template I've just got... this site has all I need to know, Thanks a lot!!!"
 


  

Chacha

16 Mar 2010 9:24am

"Fantastic! Just what I needed. I'm studying web publishing, and just starting to get to grips with HTML and CSS, which ain't easy. This is a godsend. Cheers very much :)"
 


  

Rob

23 Feb 2010 5:27pm

"Thank you for an excellent CSS glossary - I have been using it for about 5 years. I came back today to see if it has been updated, and yes there's some more information. The only thing I add to this list is the way to center fixed width layouts. Thanks & Congrats"
 


  

Dan

12 Feb 2010 4:50am

"Awesome CSS reference guide - a one stop shop. You saved a lot of time for me. Thanks."
 


  

Rich

27 Jan 2010 4:49am

"This site was a great find for me. I found that I needed to isolate on this to understand it well enough to use it. (I am a long time software engineer but completely new to web design and programming). This is the first CSS learning site I have found that shows a sense of organization and completeness. I can USE this right now! Thanks."
 


  

Franklin

11 Feb 2009 6:21am

"This is one of the best glossary on CSS that I have seen to be precise and straight forward... Thanks for your time and effort. I have been cracking my head since, but now I know i am there.."
 


  

Jim

30 Jan 2009 8:01am

"This is by far the best and most complete glossary I have found for CSS terms and definitions. I own and operate a Business Directory in Longview Washington."
 


  

css rollovers

27 Nov 2008 1:09pm

"New to this game... How bout rollover syntax? Js is basically mouse on mouse over etc; html is on click, etc. What is the "correct" reference for CSS Cheers

[Reply from Robert Giordano]
For CSS rollovers, use element:hover {...}, for example:
a:hover {background:#000000; color:#ffffff;}

:hover doesn't work on all elements in all browsers. See quirksmode.org for a nice chart that includes :hover compatibility in different browsers."
 


  

The Escalator

05 Sep 2008 6:21am

"I liked the escalator when I first saw the site, and as I read through the content, I did not find it distracting. Which element is it and what's it called when the content is like this page? (I'm a true newbie.)

[Reply from Robert Giordano]
Here is the style that sets the background as the ecalator:

body {
  text-align:center; margin:0; padding:0;
  color:#dddddd; background:#000000 url(002/escalator.jpg) center top fixed;
}
"
 


  

Dheep

03 Jun 2008 11:03am

"Thanks a lot. I was looking for the CSS properties in one sheet. And this is more than what I expected. You have given few examples and BCPs. This is a great work. Thank you soo much, you have saved me great amount of time. This page rocks..."
 


  

Nice Guide

28 Mar 2008 1:37pm

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


  

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"
 


  

Hitcraft

20 Oct 2007 12:36pm

"Thanks a lot for this CSS guide."
 


  

Glossary

07 Sep 2007 10:21pm

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


  

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 Robert Giordano]
Don't like the stylesheet? You can easily change it. That's what CSS is all about!"
 


  

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."
 

  

Leave a Comment

subject / name:

email: (NOT PUBLISHED)

comment (html=OFF)