CSS Reference

CSS

This CSS reference guide helps you find CSS answers quickly.

We cover all CSS properties and values -- with examples.

Try the code examples in our unique online CSS Editor.


CSS Properties

CSS properties determine the design and behavior of an element.

Properties can change color, background, animations, and more.

This reference guide includes all CSS properties with examples.


Using properties

A CSS property declaration appears as a property: value pair, for example: color: red. Each declaration is assigned to a selector with one or more property declarations.

Syntax

#

Here is the CSS syntax. A selector with a property declaration.

selector {
  property: value;
}

CSS declarations can also include multiple properties and/or selectors.
A block of properties is called a rule set.

selector1, selector2, selector3 {
    property1: value1;
    property2: value2;
    property3: value3;
}

A selector with two properties: color and padding.

.my-style {
  color: teal;
  padding: 20px;
}

CSS Selectors

If HTML has tags, CSS uses selectors.

Selectors are names specified in internal or external stylesheets.

It can be an HTML tag, class, id, or more.

Curly brackets are used to enclose properties inside selectors.

A value is assigned to a property using a colon (:).

Semi-colons separate each property.

This rule states that all <div> elements have the specified background color and text alignment.

div {
  background-color: teal;
  text-align: center;
}

For a complete list of selectors see our CSS Selectors Reference Guide


CSS Length

Numerous properties require a length value, for example height, width, border-width, margin, and line-height. Their values are expressed as a unit of measure. CSS supports different units. Here are some examples: 10px, 1.2em, 2cm, 40%, etc

CSS units can be absolute or relative:

Absolute Lengths

  • Absolute length units have a fixed size.
  • With absolute lengths be aware that different devices have different screen sizes.
  • These are the CSS absolute length units.
    • px - unit for pixels (.e.g. width: 220px)
    • pt - unit for points, usually used for printed media (e.g. font-size: 14pt)
    • pc - unit for picas where 1pc = 12pt (e.g. font-size: 2pc)
    • cm - unit for centimeters
    • mm - unit for millimeters
    • in - unit for inches where 1in = 96px (e.g. height: 2in)

Relative Lengths

  • Relative length units adapt to the parent element, screen size, or resolution.
  • These are the CSS relative length units.
    • em - relative to the font size, so 2em is twice the current font size
    • % - relative to the parent (e.g. width: 50%)
    • ex - rarely used, relative to x-height of current font
    • ch - relative to the width of the "0"
    • rem - relative to the root element's font size
    • vw - relative to the browser window width
    • vh - relative to the browser window height
    • vmin - relative to the browser window smaller dimension
    • vmax - relative to the browser window larger dimension

For a complete list of length units see our CSS Length Reference Guide


CSS Functions

CSS has a number of functions that are used as property values. These are built-in functions; custom functions are not supported in CSS.

A list of the CSS functions. Click the name for more details.

Function Description
attr() Returns the selected element attribute value.
calc() Performs calculations to determine CSS property values
cubic-bezier() Specifies a cubic bezier curve
hsl() Specifies color using the hue, saturation, lightness model (HSL)
hsla() Specifies a color using the hue, saturation, lightness, alpha model (HSLA)
linear-gradient() Specifies a linear background gradient with 2 or more color stops for top to bottom.
radial-gradient() Specifies a radial background gradient with 2 or more color stops for center to edge.
repeating-linear-gradient() Repeats a linear gradient
repeating-radial-gradient() Repeats a radial gradient
rgb() Specifies a color using the red, green, blue model (RGB)
rgba() Specifies colors using the red, green, blue, alpha model (RGBA)
var() Inserts the value of a custom property

CSS Defaults

Browsers assign default values to properties on HTML elements. For example, the <body> element has a default margin of 10px. Unfortunately, there are inconsistencies between the different browsers.

Below are some elements and their default property values.

Element Defaults
<area> display: none;
<article> display: block;
<blockquote> display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 50px;
margin-right: 50px;
<body> display: block;
margin: 10px;
<del> text-decoration: line-through;
<fieldset> display: block;
margin-left: 3px;
margin-right: 3px;
padding-top: 1em;
padding-bottom: 1em;
padding-left: 0.5em;
padding-right: 0.5em;
border: 1px solid #ccc;
<form> display: inline-block;
margin-top: 0em;
<h1> font-weight: bold;
<header> display: block;
<i> font-style: italic;
<img> display: inline-block;
<legend> display: block;
padding-left: 3px;
padding-right: 3px;
<ol> list-style-type: upper-roman;
<p> margin-left: 20px;
<pre> display: block;
font-family: monospace;
white-space: pre;
<script> display: none;
<strong> font-weight: bold;
<sup> vertical-align: super;
font-size: smaller;
<table> border-collapse: collapse;
border: 1px solid black;
<td> display: table-cell;
vertical-align: inherit;
<th> display: table-cell;
vertical-align: inherit;
font-weight: bold;
text-align: center;
<ul> list-style-type: circle;

You may also like

Guides