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