Introduction to Cascading Style Sheets

Article
10/12/2006

A cascading style sheet (CSS) contains style definitions that are applied to elements in an HTML document. CSS styles define how elements are displayed and where they are positioned on your page. Instead of assigning attributes to each element on your page individually, you can create a general rule that applies attributes whenever a Web browser encounters an instance of an element, or an element assigned to a certain style CLASS.

CSS styles can be placed inline within a single HTML element, grouped in a <STYLE> block in the HEAD portion of a Web page, or imported from a separate CSS style sheet file. The same external style sheet file can be linked to many Web pages, thus giving a common appearance to an entire Web site.

To use CSS style rules in the HTML Designer, the targetSchema property of your HTML document must be set to a Web browser that supports HTML 4.0 or higher. Older Web browsers that support only HTML 3.2 or earlier will simply ignore CSS styles. When the targetSchema property is set to an older Web browser, the integrated development environment (IDE) conceals CSS options and properties that are only available in more recent browsers. When the targetSchema property is set to a browser that does support HTML 4.0, CSS style rules become the preferred method for specifying the desired appearance and position of HTML elements.

Defining CSS Style Rules in STYLE Blocks

Each CSS style rule has two main parts — a selector (such as H1) and a declaration (such as color:red). The declaration includes a property (color) and its value (red). A simple CSS style rule that says "Center any text contained within <H1></H1> tags and make the font color red" is written as follows:

H1 {text-align:center; color:red;}

CSS style rules can be defined in a <STYLE> block within the <HEAD> portion of your HTML document. Here is an example that defines and applies a CSS style rule to all <H1> elements on a Web page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
   <HEAD>
      <TITLE>HTML 4.0 CSS Element Style Example</TITLE>
      <STYLE TYPE="text/css">
      H1 {text-align:center; color:red;}
      </STYLE>
   </HEAD>
   <BODY>
      <H1>This text is centered and red</H1>
   </BODY>
</HTML>

On this Web page, any text that appears between <H1></H1> tags will be centered and red. You no longer need to reassign these style attributes repeatedly each time an <H1> tag occurs in the document. In addition, if you want to change the color (or any other property) of all text between <H1></H1> tags, you can do so simply by editing one style rule.

Precedence of CSS Style Rules

CSS style rules cascade in the sense that global style rules continue to apply to HTML elements unless local style rules supplant them. In general, local style rules take precedence over general style rules. This means, for example, that a style defined in a STYLE block within a Web page can revise for that one page a Web site style defined in an external CSS style sheet. Similarly, an in-line style defined within a single HTML tag on that page can revise for one line any styles defined for that same element elsewhere.

Portions of global style rules not contradicted by local CSS style rules will continue to apply to HTML elements even after local styles are applied. In the example above, the local CSS styles governing text between <H1> tags replace some of the Web browser's global style rules for <H1> text (center <H1> text and make it red), but they do not change others (display all <H1> text in a larger font and bolded). Both global and local style rules are applied, in that order, making all the <H1> text on this page display in a larger font and bolded, and centered and red.

Assigning HTML Elements to a CSS Style CLASS

CSS styles can be applied whenever text occurs within HTML tags assigned to a certain CLASS. The selector for a CLASS style rule in a <STYLE> block will begin with a period. For example:

.head2 {font-size:14pt; text-align:center; color:red; font-weight:bold; font-style:italic;}

To apply this type of style inline, add a CLASS attribute to a tag that supports inline styles:

<DIV CLASS="head2">

The string entered as the value for a CLASS attribute should match the selector for a style rule applied to the page. Here is an example of a page that defines and applies a CSS style CLASS named head2:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
   <HEAD>
   <TITLE>>HTML 4.0 CSS Style Class Example</TITLE>
   <meta content="Internet Explorer 5.0" name="vs_targetSchema">
   <STYLE TYPE="text/css">
   BODY {background:#FBFBFB; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:9pt;}
   A:link {color:blue; text-decoration:none}
   A:active {color:red; text-decoration:none}
   A:visited {color:green; text-decoration:none}
   .head2 {font-size:14pt; text-align:center; color:red; font-weight:bold; font-style:italic;}
   </STYLE>
   <LINK REL=stylesheet Type="text/css" HREF="mystyles.css">
   </HEAD>
   <BODY>
   <DIV CLASS="head2">This text is centered, large, red <SPAN style="color:green; font-style:normal; text-decoration:underline;">and green</SPAN>, bold, and italic</DIV>
   </BODY>
</HTML>

All the style rules for the CLASS head2 are applied to the text contained within the <DIV>. Because inline styles defined in a tag within the <BODY> take precedence over <STYLE> block styles defined within the <HEAD>, the words "and green" are displayed in green, not bolded, and underlined.

External CSS Style Sheets

An external CSS style sheet document is a plain text file with a .css extension that contains only style rules. The statement

<LINK REL=stylesheet Type="text/css" HREF="mystyles.css">

applies the style rules in the external CSS style sheet "mystyles.css" to the page. In the following example, "Mystyles.css" is an external CSS style sheet document that contains a style rule for the <H1> tag:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
   <HEAD>
   <TITLE>Calling an External CSS Style Sheet Example</TITLE>
   <meta content="Internet Explorer 5.0" name="vs_targetSchema">
   <LINK rel="stylesheet" href="Mystyles.css" type="css/text">
   </HEAD>
   <BODY>
   <H1>This text is red</H1>
   </BODY>
</HTML>

Style rules listed in an external CSS stylesheet are written just as they are when placed within <STYLE> blocks, but without <STYLE> </STYLE> tags enclosing them:

H1 { text-align:center; color:red; } 
.head2 { font-size:14pt; text-align:center; color:red; font-weight:bold; font-style:italic; }

An external CSS style sheet can be linked to many HTML pages, and thus apply consistent styles across an entire Web site. CSS style sheets separate formatting rules from content, making it much easier to locate and edit style rules. A <STYLE> </STYLE> block can also be used to expose a document for processing via the Extensible Markup Language (XML).

Support for HTML 3.2

When the targetSchema property of a Web page is set to an older Web browser that supports only HTML 3.2, it is necessary to assign deprecated formatting elements such as <FONT> to elements on your page to define their appearance and position. Web browsers that support only HTML 3.2 and earlier will not apply CSS styles. Here is a typical chunk of HTML 3.2 markup:

<HTML>
   <HEAD>
      <TITLE>HTML 3.2 Example</TITLE>
   </HEAD>
   <BODY BGCOLOR=#EFEFEF LINK=blue ALINK=red VLINK=green>
      <CENTER>
      <P><FONT size=+2 color=red><b><i>This text is centered, large, red, bold, and italic</i></b></FONT></P>
      </CENTER>
   </BODY>
</HTML>

While the markup in the example above will display a text string that is centered, large, red, bold, and italic, all of the style tags used must be entered each time you want to display another string in the same manner.

Note The World Wide Web Consortium maintains CSS standards. Because these standards are constantly evolving, visit the W3C website (https://www.w3.org/) for details on current CSS specifications.

Visual Studio .NET CSS Editor

The CSS Editor in Microsoft Visual Studio .NET makes it possible for you to create styles and style sheets either by entering style rules directly in the Editor or by selecting options in the Style Builder and Add Style Rule dialog boxes. For more information, see Adding CSS Style Attributes in Design View, Add Style Rule Dialog Box, and Style Builder Dialog Box.

Share via