CSS Properties

Alphabetical list of all CSS properties from the CSS2 and CSS3 specifications.

CSS3 Properties

The above list includes CSS2 and CSS3 properties.

The W3C is currently working on CSS3. CSS3 consists of various stand alone modules, each dealing in a specific area of CSS. For example, there's the CSS Color Module, CSS Backgrounds and Borders Module, CSS Fonts Module, etc. Each of these modules is on its own development path, and therefore, they can have different level numbers. For example, one might be at level 3 while another is at level 4. Regardless, they are all considered "CSS3".

Here's a separate list of CSS3 properties. These are some of the new properties that are being introduced to CSS via its various modules. These properties are also included in the above list.

How to use CSS Properties

CSS properties are used to apply styles to structured documents, such as those created with HTML or XML.

CSS properties are specified in the CSS standard. Each property has a set of possible values. Some properties can affect any type of element, and others apply only to particular groups of elements.

A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors, and a declaration block.

CSS properties are used within a declaration block with a corresponding value.

In the following example, we set the background color of the body element to orange.

body {
    background-color: orange;
    }

In this case, background-color is the property, and orange is its value.

And in this case, body is the "selector".

You can apply multiple properties against any selector:

body {
    background-color: orange;
    color: green;
    font-size: 1.5em;
    }

You can also apply the same styles to multiple selectors at once.

article, 
nav,
.sidebar {
    background-color: orange;
    color: green;
    font-size: 1.5em;
    }

Here's an example of where styles can fit into an HTML document:

<!DOCTYPE html>
<html>
<head>
<title>CSS Properties Example</title>
<style>
    body {
        background: darkslategrey;
        font-family: sans-serif;
        font-size: 1.3em;
    }
    section {
        padding: 20px;
        margin: 20px;
        background-color: cornsilk;
        border: 6px solid gold;
    }
    h1 {
        color: coral;
    }
    p {
        color: orange;
    }
    a:link,
    a:visited {
        color: darkorange;
    }
    a:hover {
        color: orangered;
    }
    a:active {
        background: orangered;
        color: white;
    }
</style>
</head>
<body>
    <section>
        <h1>Basic CSS Properties Example</h1>
        <p>This is a basic example to demonstrate how CSS properties can be applied to a web page.</p>
        <p><a href="/css/properties/" target="_blank">CSS properties list &rarr;</a></p>
    </section>
</body>
</html>

Try it with the Online Editor

This example uses an embedded style sheet. You could also use an external style sheet and apply the styles against the whole site.

For more information on using CSS, check out the CSS tutorial.