Try an online CSS class for free!

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.


Fonts

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


Text

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


Background and Color

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

Lists

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


Positioning and Visibility

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

Height and Width

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

 

Float and Clear

Property

Possible Values

float

none

left

right

clear

none

left

right

both

Border

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

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

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%)

Mouse Cursor

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


Selectors

There are several different types of selectors:

Selectors identify the element(s) affected by the CSS rule.

Type Selectors

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

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

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.

Class Selectors

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

ID Selectors

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

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

The universal selector is an asterisk (*). It matches every element.

* {
     color:red;
}

Grouping

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;
}

Try an online CSS class for free!