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 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.
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.
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;
}
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
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:
For a complete list of length units see our CSS Length Reference Guide
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 |
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; |
