CSS Reference Chart

The CSS chart is organized differently from an HTML chart because of the structural differences between the programming languages. This chart begins with the properties, rather than the selectors, because the selectors can be any HTML element for the most part. Obviously, there are some exceptions, but if you use common sense you should be able to apply the CSS properties you want to HTML elements. Showing every possible combination here is not feasible.

Note: A shorthand property lets you set more than one property for an HTML element. The first property listed in the chart below is the background property. With it, you can set the background-color, background-attachment, background-image, background-position, and background-repeat all in the same declaration rather than listing them one at a time. When you use a shorthand property, do not use the semicolon terminator between each item or it will not work. Use the semicolon terminator between pairs of properties and values only when you list them as individual properties.

Keep in mind, while modern browsers offer excellent CSS support, the older the browser in use, the fewer CSS properties it will support.

Background Image and Color Properties

Property
background

Description
A shorthand style for setting all the background properties in one declaration. See individual properties below for values.

Possible Values
background-attachment
background-color
background-image
background-position
background-repeat

Example
body {background: #00ff00 url("images/stucco.jpg") no-repeat fixed top left}

Property
background-color

Description
Sets the background color of an element. Note that RGB values range from 0–255 each, for red, green, and blue.

Possible Values
color (Hex values, RGB values, or named colors)
transparent

Examples
p {background-color: #dd32f7;}
h1 {background-color: rgb(102,55,107);}
div {background-color: honeydew;}
table {background-color: transparent;}

Property
background-image

Description
Sets an image as the background of an element. Depending on the value for background-repeat (if used), the image may tile full page or along a vertical or horizontal axis. It may also be set to not repeat and be placed anywhere on the page.

Possible Values
URL
none

Examples
body {background-image: url(images/ocean.jpg);}
h3 {background-image: none;}

Property
background-position

Description
Sets the starting position of a background image to begin tiling or its position on the page if no-repeat is set.

Possible Values
percentage
length {20,50}
top, center, or bottom (vertically)
left, center, or right (horizontally)

Example
body {background-position: center center;}

Property
background-repeat

Description
Sets whether or not a background repeats, and if so, how it repeats. In the example below, the background is coded to repeat across the top of the page, which creates a top border background pattern.

Possible Values
repeat (background fills the area of the element selected)
repeat-x (background repeats on a horizontal axis)
repeat-y (background repeats on a vertical axis)
no-repeat (background does not repeat)

Example
body {background-image: url(wood.jpg); background-repeat:repeat-x}

Border Properties

Property
border

Description
A shorthand property for setting all the border properties the same for all four borders. Each border can have different settings by coding each border separately.

Possible Values
border-width
border-style
border-color

Example
p {border: 2px solid red;}

Property
border-bottom

Description
Another shorthand property for defining the border-width, border-style, and border-color in one declaration for the bottom border of an element.

Possible Values
border-width
border-style
border-color

Example
div {border-bottom: 1px dashed blue;}

Property
border-bottom-width

Description
Sets the width (thickness) of the bottom border.

Possible Values
thin
medium
thick
length

Example
ol {border-bottom-width: 5px;}

Property
border-color

Description
Sets the colors of the borders. If one color value is entered, all four borders will be the same color. If two color values are entered, the top and bottom will be the first color, and the left and right sides will be the second color. If three color values are entered, the top will be the first color, the two sides will be the second color, and the bottom will be the third color. If four color values are entered, the colors start with the top border and rotate clockwise. You must also set a border-style to use the border-color property.

Possible Values
color (in Hex or RGB values, or a named color)

Example
h4 {border-color: #dda343; border-style: solid;}

Property
border-style

Description
Sets the border style for all four borders. You must also set a border-color to use the border-style property.

Possible Values
none
dotted
dashed
solid
double
groove
ridge
inset
outset

Example
p {border-style: groove; border-color: purple;}

NOTE: In the above examples for the border-bottom, you change border-bottom to border-left, border-right, or border-top to set the individual properties for each of those borders.

Font Properties

Property
font

Description
A shorthand style for setting all the font properties in one declaration. See individual properties below for values. Note that when setting this shorthand style, font-weight must come first and font-style must come before font-size.

Possible Values
font-family
font-size
font-style
font-variant
font-weight

Example
p {font: bold oblique 16pt Arial, sans-serif;}

Property
font-family

Description
Used to declare a specific font, a generic font family, or both. Since the font declared will only be displayed if it is available on the viewer’s system, I encourage you to also declare a generic family when declaring a specific font.

Possible Values
specific font (Arial, Garamond, Verdana, etc.)
serif
sans-serif
cursive
fantasy
monospace

Example
div {font-family: Souvenir, serif;}

Property
font-size

Description
Sets the font size in either an absolute size, relative size, length value, or percentage value. Note that you often will not see a difference between some sizes, such as xx-small and x-small, or 11 pixels and 12 pixels. Do not put a space between a numeric value and the unit of measurement.

Possible Values
px (pixels)
pt (points)
em (em-quad)
percentage
- - - - --- Named Sizes --- - - - -
xx-small
x-small
small
medium
large
x-large
xx-large

Examples
p {font-size: 12px;}
div {font-size: small;}

Property
font-style

Description
Sets the font to italic, oblique, or normal.

Possible Values
italic
oblique
normal

Example
b {font-style: italic;}

Property
font-variant

Description
Sets text to small caps or normal.

Possible Values
normal
small-caps

Example
h2 {font-variant: small-caps;}

Property
font-weight

Description
Sets the weight of a font. In the numeric values, 400 is equal to a normal font and 700 is equal to bold text. Note that there may be no visible difference between some settings.

Possible Values
lighter
normal
bold
bolder
100
200
300
400
500
600
700
800
900

Example
p {font-weight: 500;}

List Properties

Property
list-style

Description
A shorthand property for declaring all list values at once.

Possible Values
list-style-type
list-style-position
list-style-image

Example
ul {list-style: circle url(images/bluebullet.gif) outer;}

Property
list-style-image

Description
Sets an image for the list item bullet.

Possible Values
url
none

Example
ul {list-style-image: url(redcheck.gif);}

Property
list-style-position

Description
Used to declare the position of the number or bullet in ordered and unordered lists. Inside sets the bullet even with the vertical line of the left side of the text; outside sets the bullet outside the vertical line of the text.

Possible Values
inside
outside

Example
ol {list-style-position: inside;}

Property
list-style-type

Description
Used to set the numbering system or bullet type.

Possible Values
none
disc
circle
square
decimal (number)
lower-alpha (alphabet)
upper-alpha
lower-roman (Roman numerals)
upper-roman

Examples
ol {list-style-type: upper-alpha;}
ul {list-style-type: square;}

Note:The section below deals with margins and padding. In CSS, margins are defined as the space around elements and padding is defined as the space between the element edges and the element content. In other words, margins are outside an element and padding is inside an element.

Margin and Padding Properties

Property
margin

Description
Sets the size of all the margins (margin-top, margin-right, margin-bottom, and margin-left) of an element at once.

Possible Values
length
percentage
auto

Examples
p {margin: 12px;} (sets all margins at once)
p {margin: 10px 6px 10px 6px;} (sets margins clockwise from top)

Property
margin-bottom

Description
Sets the bottom margin of an element.

Possible Values
length
percentage
auto

Example
h1 {margin-bottom: 6px;}

Property
margin-left

Description
Sets the left margin of an element.

Possible Values
length
percentage
auto

Example
img {margin-left: 3px;}

Property
margin-right

Description
Sets the right margin of an element.

Possible Values
length
percentage
auto

Example
p {margin-right: auto;}

Property
margin-top

Description
Sets the top margin of an element.

Possible Values
length
percentage
auto

Example
img {margin-top: 2%;}

Property
padding

Description
Sets the size of the padding for all the borders (padding-top, padding-right, padding-bottom, and padding-left).

Possible Values
length
percentage

Examples
td {padding: 5px;}
td {padding: 3em 5em;} (sets top/bottom and left/right)
td {padding: 3px 5px 7px 3px;} (sets padding clockwise from top)

Property
padding-bottom

Description
Sets the padding size on the bottom of an element.

Possible Values
length
percentage

Example
ol {padding-bottom: 1.5em;}

Property
padding-left

Description
Sets the padding size on the left side of an element.

Possible Values
length
percentage

Example
td {padding-left: 2%;}

Property
padding-right

Description
Sets the padding size on the right side of an element.

Possible Values
length
percentage

Example
p {padding-right: 12px;}

Property
padding-top

Description
Sets the padding size on the top of an element.

Possible Values
length
percentage

Example
ol {padding-top: 12px:}

Text Properties

Property
letter-spacing

Description
Sets the white space in between characters within words. Negative values cause the words to condense; positive values cause the words to expand.

Possible Values
length
normal

Example
p {letter-spacing: -2px;}

Property
line-height

Description
Sets the space between lines. Technically, this doesn’t apply only to text, but since it’s mainly used with text it’s included here. Altering the line-height will create whatever space you specify between other elements as well.

Possible Values
normal
length
number
percentage

Example
p {line-height: 18px;}

Property
text-align

Description
Sets the text alignment.

Possible Values
center
justify
left
right

Example
p {text-align: justify;}

Property
text-decoration

Description
Sets effects on text.

Possible Values
none
line-through
overline
underline

Examples
h2 {text-decoration: none;}
h1 {text-decoration: underline overline;}

Property
text-indent

Description
Indents the first line of text.

Possible Values
length
percentage

Example
p {text-indent: 15px;}

Property
text-transform

Description
Changes the case of the text.

Possible Values
none
capitalize (capitalizes the first letter in every word)
lowercase (prints all letters in lowercase)
uppercase (prints all letters in uppercase)

Example
h4 {text-transform: capitalize;}

Property
white-space

Description
Sets how white space is handled. Normal is how browsers handle non-CSS pages, nowrap prevents a line from breaking, and pre is like the HTML element of <pre> in which extra spaces and carriage returns are preserved.

Possible Values
normal
nowrap
pre

Example
td {white-space: pre;}

Property
word-spacing

Description
Increase or decrease the space in between words.

Possible Values
normal
length

Example
p {word-spacing: .3em;}

Pseudo-class Properties / Miscellaneous

Property
:active

Description
Sets the style for links when they are clicked. Does not apply to named anchors.

Possible Values
n/a

Example
a:active {color: red; text-decoration: none;}

Property
:first-letter

Description
Sets a style for the first letter of an element, such as a paragraph.

Possible Values
n/a

Example
p:first-letter {color: green; font-size: 24px;}

Property
:first-line

Description
Sets a style for the first line of an element, such as a paragraph.

Possible Values
n/a

Example
p:firstline {font-weight: bold;}

Property
!important

Description
Sets the style declaration as important. Important declarations outweigh all others in the cascade order.

Possible Values
n/a

Example
b {color: red !important;}

Property
:hover

Description
Sets the style for a link when the cursor is resting on it. If using the a:hover pseudo-class property, it must follow a:link and a:visited and be before a:active in the definition for all properties to work correctly.

Possible Values
n/a

Example
a:link {color: blue;}
a:visited {color: black;}
a:hover {color: red; background: black;}
a:active {color: yellow;}
Note: These must be listed in this order to work properly.

Property
:link

Description
Sets the style for links. Does not apply to named anchors.

Possible Values
n/a

Example
a:link {color: blue; text-decoration: none;}

Property
clear

Description
Defines the sides of an element that should not have floating elements placed on it. Floating content will be moved down until it clears the element where clear is declared.

Possible Values
none
left
right
both

Example
p {clear: both;}

Property
color

Description
Sets the foreground color of an element. Sets the text color in body, paragraph, division, and other similar selectors.

Possible Values
color (in Hex values, RGB values, or a named color)

Example
b {color: #44dc59;}

Property
float

Description
Used to declare the float direction of an element. Commonly used to flow text around images, but can be used to float tables and other elements.

Possible Values
none
left
right

Example
img {float: right;}

Property
height

Description
Used to set the height of an element. Can be applied to any block level element, although browser support is spotty for some elements. The example below shows declaring the height for an image class named "button." This could be used for your button navigation, rather than setting the height in the <img> tag. You can set the width this way, too.

Possible Values
auto
length

Example
img.button {height: 140px;}

Property
vertical-align

Description
Used to set the vertical alignment of an element to the baseline.

Possible Values
baseline
bottom
length
middle
sub
super
text-bottom
text-top
percentage

Example
img {vertical-align: text-bottom;}

Property
width

Description
Used to set the width of an element. Can be applied to any block level element, although browser support is spotty for some elements.

Possible Values
auto
length
percentage

Example
p {width: 400px;}

Web Design

Site Information

More Boogie Jack Sites

CSS Reference Chart