Versión en español



 


Tutorial: Cascading Style Sheets (CSS)



Style sheets are useful to define visual attributes in HTML documents. This gives the author powerful 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 it's early times.

Code beginproperty-name: property-value;
Code end
 

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 "}").

Code beginp {
padding: 10px;
border-style: solid;
border-color: blue;
border-width: 2px;
background-color: #9EC7EB;
color: white;
font-family: arial,helvetica;
font-size: 11px;
font-weight: bold;
}
Code end
 

Declaring this code in your HTML document will make all paragraphs take this 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.

To find more properties, 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 tag) or in external files (using the HTML link tag).

Using the "style" attribute

The "style" attribute provides a way to declare in-line style properties as an attribute value. Is useful when the author needs to declare an unique sets of attributes for a specific element. The syntax for the CSS properties is the same and must be declared in this way:

Code View
<p style="padding: 10px; border-style: solid; border-color: blue; border-width: 2px; background-color: #9EC7EB; color: white; font-family: arial,helvetica; font-size: 11px; font-weight: bold;">Paragraph's content</p>

Paragraph's content

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 tag

The HTML style tag 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 tag) and will define style and classes for the actual document.

Code begin<style type="text/css">
p {
padding: 10px;
border-style: solid;
border-color: blue;
border-width: 2px;
background-color: #9EC7EB;
color: white;
font-family: arial,helvetica;
font-size: 11px;
font-weight: bold;
}

a {
font-size: 12px;
font-weight: bold;
}
</style>
Code end
 

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 o more documents. The file, usually carries an extension "css" (e.g., basic.css) and a property set that can be defined in the same way that the HTML style tag's content. This practice separates completely the semantic from the presentation of the document, while helps author sharing style definition between all the pages of a site.

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

Code begin<link type="text/css" href="basic.css" />
Code end
 

As you can see, you can use this method to link to a single CSS file from several HTML documents. This will help you define common attributes in the whole site, while makes it easier to change and update the style definitions.

CSS classes

A class in CSS is a way to group properties that can later be applied to a specific element using it's "class" attribute. These groups are named and can be defined for specifics elements or for all of them. To define a class authors must write the element for which it's declared, followed by a point and the class name. The block of properties is enclosed by curly braces like in the examples above.

In the following example we'll define three classes: the first named "important" for the "p" element, the second named "tiny" for every elements and the third named "big" for every elements too.

Code beginp.important {
color: red;
}

*.tiny {
font-size: 8px;
}

.big {
font-size: 12px;
}
Code end
 

Note that the use of an asterisk as element indicates that this class can be applied to any type of element (is the same to use nothing). Also take into account that the first declaration doesn't specify that the class must be automatically applied to the "p" elements in the document unless they have the class name as value for the "class" attribute.

Using the "class" attribute

Let's use the previous example to show how to apply the properties grouped in classes to the elements in an HTML document. In the next example, we'll apply the three classes to three paragraphs respectively.

Code begin<p class="important">Important</p>
<p class="tiny">Tiny</p>
<p class="big">Big</p>
Code end
 

Remember that the "important" class was defined only for the "p" element so it worked well in the example above, but it wouldn't work if we apply it to another type of element.

Code begin<a class="important" href="eg.html">Important anchor</a>
Code end
 

In this case, the user agent will try to find a class with the name "important" that's defined for the "a" element (a.important {...) or for all elements (.important {...), and as there's no class with those characteristics, no property will be applied to the element.

The "class" attribute also support a space separated list of classes as value, which can be useful to apply several properties from different classes to a single element at once.

Code begin<p class="important big">Important and big</p>
Code end
 

This paragraph will not only have a red color (from the "important" class) but will also have a font size of "12px" (from the "big" class).




Bypass footer options  |   Send to a friend Send to a friend  |  Post to del.icio.us Post to del.icio.us

Digg this page Digg this!  |  File on Furl File on Furl  |  Add to Yahoo! MyWeb Add to Yahoo! MyWeb

Bypass W3C declarations | 

Valid XHTML 1.0 Strict  |  Valid CSS Why should you trust us? Click the images on the left to see how seriously we write our pages, then make your choice.

Level Triple-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0. This website gives its best effort to achieve the Level Triple-A Conformance, W3C-WAI Web Content Accessibility Guidelines 1.0. If you find any detail or error that we didn't see, don't hesitate and let us know.

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. -- Tim Berners-Lee, W3C Director and inventor of the World Wide Web.

 Link to us  |  Contact us  |  Beyond HTML  |  Tools and resources  |  Sitemap  |  Webmaster