CSS Reference

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



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:


  • 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-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:


  • 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


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;

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

See also CSS3 Flexible Boxes.

Visual formatting

  • 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


Generated content


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.

Contact Us
Sign in or email us at [email protected]