CSS (Cascading Style Sheets) for Beginners

[rameshxavier]

Importing a Style Sheet

A style sheet may be imported with CSS's @import statement. This statement may be used in a CSS file or inside the STYLE element:

Note that other CSS rules may still be included in the STYLE element, but that all @import statements must occur at the start of the style sheet. Any rules specified in the style sheet itself override conflicting rules in the imported style sheets. For example, even if one of the imported style sheets contained DT {background: aqua}, definition terms would still have a yellow background.

The order in which the style sheets are imported is important in determining how they cascade. In the above example, if the style.css imported style sheet specified that STRONG elements be shown in red and the punk.css style sheet specified that STRONG elements be shown in yellow, then the latter rule would win out, and STRONG elements would be in yellow.

Imported style sheets are useful for purposes of modularity. For example, a site may separate different style sheets by the selectors used. There may be a simple.css style sheet that gives rules for common elements such as BODY, P, H1, and H2. In addition, there may be an extra.css style sheet that gives rules for less common elements such as CODE, BLOCKQUOTE, and DFN. A tables.css style sheet may be used to define rules for table elements. These three style sheets could be included in HTML documents, as needed, with the @import statement. The three style sheets could also be combined via the LINK element.

Inlining Style

Style may be inlined using the STYLE attribute. The STYLE attribute may be applied to any BODY element (including BODY itself) except for BASEFONT, PARAM, and SCRIPT. The attribute takes as its value any number of CSS declarations, where each declaration is separated by a semicolon. An example follows:

Code: HTML

<P STYLE="color: red; font-family: 'Courier New', serif"> This paragraph is styled in red with the Courier New font, if available.</P>

Note that Courier New is contained within single quotes in the STYLE attribute since double quotes are used to contain the style declarations.

Inlining style is far more inflexible than the other methods. To use inline style, one must declare a single style sheet language for the entire document using the Content-Style-Type HTTP header extension. With inlined CSS, an author must send text/css as the Content-Style-Type HTTP header or include the following tag in the HEAD:

Code: HTML

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

Inlining style loses many of the advantages of style sheets by mixing content with presentation. As well, inlined styles implicitly apply to all media, since there is no mechanism for specifying the intended medium for an inlined style. This method should be used sparingly, such as when a style is to be applied on all media to a single occurrence of an element. If the style should be applied to a single element instance but only with certain media, use the ID attribute instead of the STYLE attribute.

The CLASS Attribute

The CLASS attribute is used to specify the style class to which the element belongs. For example, the style sheet may have created the punk and warning classes:

Code: CSS

.punk { color: lime; background: #ff80c0 }
P.warning { font-weight: bolder; color: red; background: white }

These classes could be referenced in HTML with the CLASS attribute:

Code: HTML

<H1 CLASS=punk>Proprietary Extensions</H1>
<P CLASS=warning>Many proprietary extensions can have negative side-effects, both on supporting and non-supporting browsers...

In this example, the punk class may be applied to any BODY element since it does not have an HTML element associated with it in the style sheet. Using the example's style sheet, the warning class may only be applied to the P element.

A good practice is to name classes according to their function rather than their appearance. The warning class in the previous example could have been named red, but this name would become meaningless if the author decided to change the style of the class to a different color, or if the author wished to define an aural style for those using speech synthesizers.

Classes can be a very effective method of applying different styles to structurally identical sections of an HTML document. For example, this page uses classes to give a different style to CSS code and HTML code.

The ID Attribute

The ID attribute is used to define a unique style for an element. A CSS rule such as

Code: CSS

#wdg97 { font-size: larger }

may be applied in HTML through the ID attribute:

Code: HTML

<P ID=wdg97>Welcome to the Web Design Group!</P>

Each ID attribute must have a unique value over the document. The value must be an initial letter followed by letters, digits, or hyphens. The letters are restricted to A-Z and a-z.

Note that HTML 4.0 allows periods in ID attribute values, but CSS1 does not allow periods in ID selectors. Also note that CSS1 allows the Unicode characters 161-255 as well as escaped Unicode characters as a numeric code, but HTML 4.0 does not allow these characters in an ID attribute value.

The use of ID is appropriate when a style only needs to be applied once in any document. ID contrasts with the STYLE attribute in that the former allows medium-specific styles and can also be applied to multiple documents (though only once in each document).

[ngoccuong]

Thanks for all.

[chummi]

highly informative.. need to make sometime and go through all of this.. it could be of much more use if you could provide more code snippets that we can copy paste into a html editor and see for ourselves how things work.. :)

[noa.aviad]

Thanks... helped me a lot!!

[Pagkached]

thanks for the tips.

[Filecheats]

Thanks this topic is great thanks for posting

[taicompose]

[ReinaFery]

It is very useful for learners who doesn't know about the CSS.

[reddy2011]

CSS provide rich functionality,including defining the appearance of HTML pages.