CSS Quick Reference
This is a reference of the most common CSS properties and their values.
Default values are highlighted and bold.
We also include a review of selectors.
If you're new to CSS and interested in CSS training, check out Webucator's online self-paced Introduction to CSS course.
If you already have some experience with CSS, check out Webucator's online self-paced Advanced CSS course.
Property |
Possible Values |
font-family |
a font name (e.g, "Times New Roman") |
cursive |
|
fantasy |
|
monospace |
|
sans-serif |
|
serif |
|
font-size |
a length (e.g, 12pt, 10px, 2em, etc.) |
a percentage (e.g, 150%) |
|
xx-small |
|
x-small |
|
small |
|
medium |
|
large |
|
x-large |
|
xx-large |
|
smaller |
|
larger |
|
font-style |
normal |
italic |
|
oblique |
|
font-variant |
normal |
small-caps |
|
font-weight |
normal |
bold |
|
bolder |
|
lighter |
|
100 |
|
200 |
|
300 |
|
400 |
|
500 |
|
600 |
|
700 |
|
800 |
|
900 |
Property |
Possible Values |
letter-spacing |
normal |
a length (e.g, 12pt, 10px, 2em, etc.) |
|
line-height |
normal |
a length (e.g, 12pt, 10px, 2em, etc.) |
|
a number (e.g, 1.5 = 1.5 x the current font size) |
|
a percentage (e.g, 150%) |
|
text-align |
left |
right |
|
center |
|
justify |
|
text-decoration |
none |
underline |
|
overline |
|
line-through |
|
blink |
|
text-indent |
a length (e.g, 12pt, 10px, 2em, etc.) |
a percentage (e.g, 150%) |
|
text-transform |
none |
capitalize |
|
uppercase |
|
lowercase |
|
vertical-align |
baseline |
a percentage (e.g, 150%) |
|
sub |
|
super |
|
top |
|
middle |
|
bottom |
|
text-top |
|
text-bottom |
|
white-space |
normal |
pre |
|
nowrap |
|
word-spacing |
normal |
a length (e.g, 12pt, 10px, 2em, etc.) |
Property |
Possible Values |
background-attachment |
scroll |
fixed |
|
background-color |
transparent |
a color value |
|
background-image |
none |
url(url) |
|
background-position |
a percentage (e.g, 150%) |
a length (e.g, 12pt, 10px, 2em, etc.) |
|
top |
|
bottom |
|
left |
|
right |
|
center |
|
background-repeat |
repeat |
repeat-x |
|
repeat-y |
|
no-repeat |
|
color |
a color value |
Property |
Possible Values |
list-style-image |
none |
url(url) |
|
list-style-position |
outside |
inside |
|
list-style-type |
disc |
circle |
|
square |
|
decimal |
|
lower-alpha |
|
upper-alpha |
|
lower-roman |
|
upper-roman |
|
none |
Property |
Possible Values |
position |
static |
absolute |
|
fixed |
|
relative |
|
top |
auto |
a length (e.g, 12pt, 10px, 2em, etc.) |
|
a percentage (e.g, 150%) |
|
bottom |
auto |
a length (e.g, 12pt, 10px, 2em, etc.) |
|
a percentage (e.g, 150%) |
|
left |
auto |
a length (e.g, 12pt, 10px, 2em, etc.) |
|
a percentage (e.g, 150%) |
|
right |
auto |
a length (e.g, 12pt, 10px, 2em, etc.) |
|
a percentage (e.g, 150%) |
|
z-index |
auto |
a relative number (e.g, 20 has a higher z-index than 10) |
|
display |
block |
inline |
|
list-item |
|
none |
|
visibility |
inherit |
visible |
|
hidden |
Property |
Possible Values |
width |
auto |
a length (e.g, 12pt, 10px, 2em, etc.) |
|
a percentage (e.g, 150%) |
|
height |
auto |
a length (e.g, 12pt, 10px, 2em, etc.) |
Property |
Possible Values |
float |
none |
left |
|
right |
|
clear |
none |
left |
|
right |
|
both |
Property |
Possible Values |
border-width |
a length (e.g, 12pt, 10px, 2em, etc.) |
medium |
|
thin |
|
thick |
|
border-top-width |
a length (e.g, 12pt, 10px, 2em, etc.) |
medium |
|
thin |
|
thick |
|
border-bottom-width |
a length (e.g, 12pt, 10px, 2em, etc.) |
medium |
|
thin |
|
thick |
|
border-left-width |
a length (e.g, 12pt, 10px, 2em, etc.) |
medium |
|
thin |
|
thick |
|
border-right-width |
a length (e.g, 12pt, 10px, 2em, etc.) |
medium |
|
thin |
|
thick |
|
border-color |
a color value |
border-style |
none |
dashed |
|
dotted |
|
double |
|
groove |
|
inset |
|
outset |
|
ridge |
|
solid |
margin |
auto |
a length (e.g, 12pt, 10px, 2em, etc.) |
|
a percentage (e.g, 150%) |
|
margin-top |
auto |
a length (e.g, 12pt, 10px, 2em, etc.) |
|
a percentage (e.g, 150%) |
|
margin-bottom |
auto |
a length (e.g, 12pt, 10px, 2em, etc.) |
|
a percentage (e.g, 150%) |
|
margin-left |
auto |
a length (e.g, 12pt, 10px, 2em, etc.) |
|
a percentage (e.g, 150%) |
|
margin-right |
auto |
a length (e.g, 12pt, 10px, 2em, etc.) |
|
a percentage (e.g, 150%) |
padding |
a length (e.g, 12pt, 10px, 2em, etc.) |
a percentage (e.g, 150%) |
|
padding-top |
a length (e.g, 12pt, 10px, 2em, etc.) |
a percentage (e.g, 150%) |
|
padding-bottom |
a length (e.g, 12pt, 10px, 2em, etc.) |
a percentage (e.g, 150%) |
|
padding-left |
a length (e.g, 12pt, 10px, 2em, etc.) |
a percentage (e.g, 150%) |
|
padding-right |
a length (e.g, 12pt, 10px, 2em, etc.) |
a percentage (e.g, 150%) |
Property |
Possible Values |
cursor |
auto |
crosshair |
|
help |
|
move |
|
pointer |
|
text |
|
wait |
|
n-resize |
|
s-resize |
|
e-resize |
|
w-resize |
|
ne-resize |
|
se-resize |
|
nw-resize |
|
sw-resize |
There are several different types of selectors:
Selectors identify the element(s) affected by the CSS rule.
Type selectors specify elements by tag name and affect every instance of that element type. Looking again at a previous example:
p {
color:darkgreen;
font-family:Verdana;
font-size:10pt;
}
This rule specifies that the text of every <p> element should be darkgreen and use a 10-point Verdana font.
Descendant selectors specify elements by ancestry. Each "generation" is separated by a space. For example, the following rule states that <strong> tags within<p> tags should have red text.
p strong {
color:red;
}
With descendant selectors generations can be skipped. In other words, the code above does not require that the <strong> tag is a direct child of the <p> tag.
Child selectors specify a direct parent-child relationship and are indicated by placing a > sign between the two tag names:
p > strong {
color:red;
}
In this case only <strong> tags that are direct children of <p> tags are affected.
In HTML, almost all elements can take the class attribute, which assigns a class name to an element. The names given to classes are arbitrary, but should be descriptive of the purpose of the class. In CSS, class selectors begin with a dot. For example, the following rule creates a class called "warning," which makes the text of all elements of that class bold and red:
.warning {
font-weight:bold;
color:#ff0000;
}
Following are a couple of examples of elements of the warning class:
<h1 class="warning">WARNING</h1>
<p class="warning">Don't go
there!</p>
If the class selector is preceded by an element name, then that selector only applies to the specified type of element. To illustrate, the following two rules indicate that h1 elements of the class "warning" will be underlined, while p elements of the class "warning" should not be:
h1.warning {
color:#ff0000;
text-decoration:underline
}
p.warning {
color:#ff0000;
font-weight:bold;
}
Because both rules indicate that the color should be red (#ff0000), this could be rewritten as follows:
.warning {
color:#ff0000;
}
h1.warning {
text-decoration:underline;
}
p.warning {
font-weight:bold;
}
Note that you can assign an element any number of classes simply by separating the class names with spaces like this:
<div class="class1 class2 class3">...
As with the class attribute, in HTML, almost all elements can take the id attribute, which is used to uniquely identify an element on the page. In CSS, ID selectors begin with a pound sign (#) and have arbitrary names. The following rule will indent the element with the "maintext" id 20 pixels from the left and right.
#mainText {
margin-left:20px;
margin-right:20px;
}
<div id="mainText">
This is the main text of the page...
</div>
Attribute selectors specify elements that contain a specific attribute. They can also specify the value of that attribute.
The following selector affects all links with a target attribute.
a[target] {
color:red;
}
The following selector would only affect links whose target attribute is "_blank".
a[target="_blank"] {
color:red;
}
The universal selector is an asterisk (*). It matches every element.
* {
color:red;
}
Selectors can share the same declarations by separating them with commas. The following rule will underline all i elements, all elements of the class "warning" and the element with the id of "important."
i, .warning, #important {
text-decoration: underline;
}