v1.5, 2010-04-21
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.
<head>
<link rel="stylesheet" type="text/CSS" href="stylesheet.CSS" />
</head><style> tags.
<style>
... styles ...
</style>
Each Style starts with a Selector, followed by Style Properties inside a set of { }.
Each Property MUST END with a semicolon.
body {
margin:0;
padding:8px 4px 12px 4px;
color:#ffbf11;
background:#000000 url(images/space.gif);
}
/* this is a CSS comment, different from an HTML comment */
body {...}
p {...}
td {...}
ul {...}
.pretty {...}
.stinky {...}
.mushy {...}
<p class="stinky">This is a stinky paragraph</p>class="classname".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.
#mainParagraph {...}
#sidemenu {...}
#footer {...}
<div id="sidemenu"> ...menu links... </div>id="idname".id="idname" class="classname" in the same tag. div.stinky {...} only applied to DIV elements with class="stinky" img.stinky {...} only applied to IMG tags with class="stinky" 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 table, td, tr, span, form, p {...} style is applied to each listed element
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.
#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 */
#footer {
background:transparent url(images/footer.gif) repeat-x bottom;
}
fixed
#ffcc00
transparent
url(images/something.gif)
top
left
center
right
bottom
2px 1px
repeat
repeat-x
repeat-y
no-repeat
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
div {
border:2px solid #ffffff;
}
collapse
4px /* positions object 4px from the bottom of its container */ 50%
none
left
right
both
float:
rect(top left bottom right)
#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 */
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
none /* Makes the element disappear */ block inline
none
left
right
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 */
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 */
normal italic oblique /* same as italic */
normal
small-caps
normal
bold
200px
90%
4px
50%
normal
5px
normal 130% /* percentage of the font-size, 130 gives a nice look */ 10px /* scrunch 11px font lines together */
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)
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;
}
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 */
img {margin:2px 0 2px 0;}
div (margin: 4px auto 10px auto;} /* div will be horizontally centered */
visible hidden scroll auto
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) */
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 */
4px
50%
left
right
center
justify /* makes even left and right margins,
like a newspaper column */
none underline overline line-through blink /* does not work in IE */
capitalize
lowercase
uppercase
4px
50%
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
.sups {position:relative; top:-4px;}
.subs {position:relative; top:4px;}
Here's a superscript<span class="sups">1</span>.
hidden /* the element will still influence other
elements on the page */
visible
display:none; instead.
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 */
200px
90%
5 /* a DIV with a z-index of 5 will be "above"
those with 4 or lower */
20 Jan 2013 4:51pm
"Thank you for the great reference and the notes along with each property. Saves me a lot of time searching!!"
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."
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."
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."
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."
01 Nov 2011 7:37am
"I will use this page from now on. Amazing reference and utterly beautiful."
28 Aug 2011 6:29am
"Thank you for sharing such a simple yet comprehensive list!"
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!"
11 Jan 2011 9:36pm
"very nice and helpful page ..."
30 Nov 2010 11:03pm
"Great. Thanks to share."
12 Nov 2010 10:42pm
"Thanks a lot!! This straight forward article cleared out many questions. Great job!!"
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."
17 Jun 2010 6:30am
"Abosultely amazing article. good one place comprehensive guide. Thanks a lot!"
10 Jun 2010 8:16am
"I never comment, but this resource is so good! Thank you for your efforts."
03 Jun 2010 8:38am
"Thanks a lot, it's really useful, now I'll get my page CSS certified!!! Greetings"
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!!!"
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 :)"
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"
12 Feb 2010 4:50am
"Awesome CSS reference guide - a one stop shop. You saved a lot of time for me. Thanks."
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."
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.."
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."
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."
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;
}
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..."
28 Mar 2008 1:37pm
"This is a great guide. I love that it's alphabetical and on ONE page. Thanks!"
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"
20 Oct 2007 12:36pm
"Thanks a lot for this CSS guide."
07 Sep 2007 10:21pm
"this is the best glossary I have found thus far. Thanks for your time. - DK"
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!"
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."
Copyright © 2004-2024 Design215 Inc.
All rights reserved.
Design215 Inc. 
html5