Cascading Style Sheets (CSS)

Style sheets are useful to define visual attributes in HTML documents. This gives the author powerfull methods to define the visual style of the document while separates the semantic part (HTML) from the presentational (style sheets). In this tutorial you'll learn how to implement style attributes in the HTML document.

Style properties

The properties and their values are defined using a simple CSS syntax. These definitions don't belong to the HTML standard, but are intended to replace the presentational attributes that HTML gathered during its early times.

This way you can define several values for several properties in a same block given that a basic definition is separated from the next by the semicolon. A group of properties and values can be applied to an element, which will set the visual style of that element in all the document. In this example a set of visual properties are defined for the HTML p tag. To achieve this, the element's name appears before the property declarations that are enclosed by curly braces ("{" and "}").

Declaring this code in your HTML document will make all paragraphs take these properties. In some cases you need to set properties only for some paragraphs instead for all. If that's the case you can use the "style" attribute or classes.

Note: CSS properties and their possible values won't be fully treated in this website. To find more information about this subject please refer to this full property table for CSS 2.1.

Style definitions

You can define style properties in three ways: inside a specific element's start tag (using the "style" attribute), inside a block in the head of the document (using the HTML style element) or in external files (using the HTML link tag).

Using the "style" attribute

The "style" attribute allow authors to declare in-line style properties as an attribute's value. Is useful when the author needs to declare a unique set of attributes for a specific element. The syntax for the CSS properties is the same.

As you can see, the style declared in this example is the same declared in the example before. The difference is that the last one affects only the container object and the first one affects implicitly all paragraph.

Using the HTML style element

The HTML style element defines a block where the style sheet declarations can be contained. The style block must be placed somewhere in the document's head (HTML head element) and will define style and classes for the actual document.

Note that these two definitions will affect all the elements "a" and "p" present in the actual document.

Using external files

External files can also be used to define style properties for one or more documents. The file, usually carries the extension "css" (e.g., basic.css) and a set of properties that can be defined in the same way that the HTML style element's content. This practice separates completely the semantic from the presentation of the document, while helps authors sharing style definitions between various pages of a site.

To point this CSS file from an HTML document, you can use the HTML link tag. This declaration tells user agents, where style definitions for this document can be found.

Using this line in different documents allows you to specify common attributes to a set of pages (or even a whole site), which can result in easier update processes.