CSS Reference

Collapse Content Show Content

Here's a short description to many CSS properties, along with some examples, and links to further documentation. See Essential CSS for a full tutorial.

Background

background-color - sets background color of an element
background-image - sets one or several background images for an element, e.g. background-image: url(image-address.png);
background-repeat - defines how background images are repeated
background-attachment - sets whether image scrolls with content or stays fixed in place
background-position - sets the position of a background image
background-size - sets the size of the background image
background - shorthand for setting above properties (and more)

Border

You can specify one value for all 4 borders:

border-width: 2px;

or use 2 values for horizontal-vertical:

border-width: 2px 10px;

or 4 values for top right bottom left:

border-width: 2px 2em 5px 1em;

When not differentiating between the 4 borders, it's simpler to use the shorthand border property.

You can also specify a specific border side in its own rule, by adding a direction after the word border, such as border-top-width or border-left-color.

border-width - set the border width, such as 2px or 0.1em
border-color - set the border color, such as green or #8BC2D9
border-style - set the border style, such as solid, dotted or dashed
border - shorthand to set the above 3 properties

CSS 3 properties:

border-radius - set how rounded the border is
box-shadow - add a drop shadow to an element

Color

color - Sets the text color of an HTML element. (See Color value for possible values.)
opacity - sets how opaque an element is, from 0 (transparent) to 0.5 (translucent) to 1 (fully opaque, the default).

Text

text-align - control how text is aligned, such as left, right, center or justify
text-decoration - set a text decoration to underline, overline or line-through. Can also set color and style of line.
text-indent - set indentation of first line of text
text-transform - change capitalization of text
vertical-align - set vertical alignment of a box
letter-spacing - set spacing between characters
word-spacing - set spacing between words
white-space - set how whitespace in the HTML element is handled (or ignored)
direction - set the direction of the text

CSS 3 properties:

text-overflow - specify how to signal overflowed text
text-shadow - add a shadow to text (like box-shadow)

Font

font-family - Set a prioritized list of fonts to use. Include backup fonts in case a user doesn't have certain fonts installed.
font-style - lets you set the font to italic or the similar oblique
font-variant - set small-caps and more
font-weight - set boldness to bold or a weight from 100 to 300 to 600 to 900.
font-size - set the size of text. See sizing for more.
line-height - set the minimum height for lines of text
font - shorthand to set the above properties.
@font-face - CSS at-rule for specifying an the name and location of an included font. (You can also just include CSS from Google Fonts.)

Margin and Padding

Like borders, margins and padding can be specified overall or in specific directions. See Boxes for more info.

margin - sets the margin of an element, which is outside the border
padding - sets the padding of an element, which is inside the border

Outline

Outlines are drawn outside the border without taking up their own space (i.e. outlines stay within the padding area or overlap with neighboring elements). Unlike borders, outlines can be drawn around non-rectangles and they cannot have different values for different sides. For ordinary items, you can usually you can just use the border property instead of outline.

The CSS for the above paragraph:

margin: 15px;
border: solid 4px blue;
padding: 10px;
background-color: lightgreen;
outline: red 7px solid;

outline-width
outline-style
outline-color
outline - shorthand to set the above 3 properties

Box Size

Set the width and height of elements. Instead of setting the width absolutely, it can be a good idea to set the max-width, so the content still become narrower for a small screen. Note that min-width overrides max-width which overrides width.

width - sets the width of an element (the area inside the padding)
min-width - sets the minimum width, but the width can be displayed larger
max-width - sets the maximum with, but the width can be displayed smaller
height - sets the height of an element
min-height
max-height

Visual formatting

display - Set the display to inline, block, none or more
position
top
right
bottom
left

float - move an element to the right or left of content.
clear - specify whether an element can be next to a floated element
z-index
overflow
visibility - set to hidden to hide an element (while still taking up space)
cursor - set how the cursor appears over the element

Table

Generated content

CSS 3

CSS3 is the latest version of CSS which adds many new features. Some CSS3 properties have been included above, and here are some additional ones, with links to Mozilla's guides on each topic.

linear gradient - creates a linear gradient image
media queries - let you tailor the presentation to the device
Transitions - create simple transition effects
Animations - animate CSS transitions
Transforms - transform the position and shape of an element

Previous Next Node