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.
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.
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 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.
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).
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.
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.
Note that these two definitions will affect all the elements "a" and "p" present in the actual document.
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.
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.
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.
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.
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.
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.
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.
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).
ID selectors work in a very similar way to the classes with a few exceptions. In the first place, in the definition of an ID selector the element's name is followed by a "#" symbol and an identifier ("id" value).
Except for the "#" symbol and the name (that must be an identifier), the rest works exactly as classes do.
The way to apply CSS properties to HTML elements is through the "id" attribute. As you may know the "id" attribute is designed to be an identifier for the element (thus it must be unique), which means that the properties defined using this method will only be applicable to a single element per document.
In this case we could say that the properties are grouped and refer to a specific element instead of the classes that are designed for the elements to refer to them. In this example, a paragraph have an "id" value that matches one of the previous definition.
The inheritance and cascading are the two characteristics that shape the CSS language and makes it powerful. These two concepts will give authors full control over the appliance of properties to the document's elements.
The hierarchy of the CSS structure is one of it's most important characteristics, from where it gets the "cascading" denomination. The idea of cascading comes from the effect caused by the order in which the properties are applied to a single element from several style definitions. This may help authors to mix properties from different classes and style declarations and apply them to elements in different stages.
To illustrate this, lets take a look at this example document:
You can analyze the appliance of the properties in two ways: from the most specific to the most global or vice versa. The most specific style declaration in this example is the one made with the "style" attribute and the less specific is that made for the "p" element in the style block. No matter the way you want to see it, the declarations with higher specificity level overrides the rest.
In the example above, the paragraph will have an "arial,helvetica" font face and a "black" color from the properties defined for the "p" element, but will not have a "10px" font size because it will be overridden by the property defined in the "important" class that's applied to the element. Subsecuently, the element will receive from the "important" class a "12px" font size but the "bold" font weight will be overridden by the property defined in the "style" attribute.
The list below shows the specificity order used to apply CSS properties to HTML elements, from the most specific to the most global.
<p style="...">).p#help {...}).p.second {...}).*.second {...}).p {...}).* {...}).The same analysis can be used for properties inherited from other elements. In the next example, the properties defined for the paragraph will override those defined for the body (HTML body tag). The body's properties that are not overridden, are inherited by the paragraph (because it's contained by the body).
This document will look exactly as the one before, with the exception of the font size that won't be inherited by the paragraph from the body because the style declaration for the "p" element will override it, and the "bold" font weight that will be inherited from the body's properties.