Export (0) Print
Expand All

Cascading Style Sheets Overview

A cascading style sheet (CSS) contains style rules that are applied to elements in a Web page. CSS styles define how elements are displayed and where they are positioned on the 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 that is assigned to a certain style class.

CSS styles can be placed inline within a single HTML element, grouped in a style block within the head section of a Web page, or imported from a separate style sheet. If styles are created in a separate style sheet, you can link multiple Web pages to the style sheet, thus giving a common appearance to an entire Web site. If you are using CSS to style web controls, you should use the CssClass property to define a CSS class name to be associated with the control or control elements and then reference that class name when assigning styles to the control or control elements in the style sheet.

NoteNote

CSS styles are not supported in all browsers. Older Web browsers that support only HTML 3.2 or earlier will ignore CSS styles, and support for browsers on mobile devices varies. You can select a browser schema in Visual Studio .NET that will validate the styles you are using and provide IntelliSense for styles in Source view. For details, see How to: Select Validation Schemas for HTML Editing in Visual Web Developer.

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). The syntax is as follows:

Selector { property : value ; property2 : value2}

A simple CSS style rule, which specifies that any text contained within <h1></h1> tags be centered and the font color formatted as red is written as follows:

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

CSS style rules can be defined in a style block within the head element of your Web page. The following code example defines and applies a CSS style rule to all of the 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 the <h1></h1> tags will be centered and red. You do not need to reassign these style attributes for each <h1> tag that occurs in the document. If you want to change the color (or any other property) of all text between the <h1></h1> tags, you can do so 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 override them. In general, local style rules take precedence over general style rules. This means, for example, that a style defined in a style block in a Web page overrides a style defined in an external style sheet. Similarly, an inline style that is defined within a single HTML element on the page overrides any styles that are defined for that same element elsewhere.

Portions of global style rules not overridden by local CSS style rules continue to apply to elements even after local styles are applied. In the code example in the previous section, the local CSS styles governing text in the h1 element 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 all of the available styles, such as font characteristics. Both global and local style rules are applied, in that order, making all the h1 text on this page display in a larger font that is formatted as bold, centered, and colored red.

CSS Styles and ASP.NET Themes

ASP.NET allows you to define themes, which are a combination of property settings for Web server controls, style sheet rules, and images. By applying a theme to a Web site, you can specify a consistent look across all of the pages in the site.

Themes are similar to styles in that they define a global set of characteristics for elements on a page. However, unlike styles in a style block or style sheet, you can control the precedence of settings. By default, when you apply a theme to a page or a Web site, the styles and other properties in the theme take precedence over the locally defined styles. This is the opposite behavior from the way styles are normally applied. This behavior was designed to allow themes to be applied to existing pages (including those with locally defined styles) and establish the same look for different pages.

You can also apply a theme as a style sheet theme. In that case, the styles and properties defined in the theme are applied in the same way that CSS styles are — local styles take precedence over styles that are defined in the theme. For more information, see ASP.NET Themes and Skins Overview.

Assigning HTML Elements to a CSS Style Class

You can define styles to apply to tags by tag name, such as h1. To allow you to create different styles for the same element, or the same style for different elements, you can create CSS classes. A class defines styles in the same way as any other style definition. However, you give the style a name. To apply the style to an element, you specify the style name as the class attribute of the tag. For instance, the following code example is a style definition for the class head2:

.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 as shown in the following code example.

<div class="head2">

What makes head2 a class is the period (.) character. You could have made head2 a class for h1 tags only by declaring it as follows:

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

External Cascading Style Sheets

An external style sheet is a plaintext file with a .css file name extension that contains only style rules. You can link a style sheet to a Web page by using a link element, as shown in the following code example.

<link rel="stylesheet" type="text/css" href="Mystyles.css" />

This link element applies the style rules in the external style sheet Mystyles.css to the page.

Style rules listed in an external style sheet are written just as they are when placed within a style block, but without <style> </style> tags enclosing them, as shown in the following code example

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

You can link multiple HTML pages to an external style sheet, which will apply consistent styles across an entire Web site. Style sheets separate formatting rules from content, making it much easier to locate and edit style rules.

See Also

Community Additions

ADD
Show:
© 2015 Microsoft