Instead of assigning formatting attributes to each element in a page individually, you can create style rules. These rules apply property values (typically formatting rules) when a Web browser encounters any instance of an element, or of an element that has a specific ID or style class.
To work with CSS styles, you must understand how to create a style and how to apply it. This section contains information from the W3C CSS specification about CSS styles and about the tools in Visual Studio 2008 that make working with CSS styles easier.
Defining CSS Style Rules
Each CSS style rule (also referred to as a style) has two main parts: a selector (such as h1) and a declaration (such as color:blue). The declaration consists of a property (color) and its value (blue). The syntax for a style rule is as follows:
|
Selector { property : value ; property2 : value2}
|
For example, the following CSS style rule specifies that any text in any h1 elements should be centered and have a font color of blue.
|
h1 {text-align:center; color:blue;}
|
Using Different Types of Styles
You can define a style rule that applies to an element, to an element that has a class assigned, or to an element by ID. A style is defined by its rule set, which consists of a selector, followed by a block of property declarations that appear between a left curly brace ( { ) and a right curly brace ( } ). Each type of style is distinguished from the other style types by its selector. A class-based selector is preceded by a period (.). An ID-based selector is preceded by a number sign (#). The selector for an element-based style consists only of the name of the HTML element, such as h1.
Element-based styles
Element-based styles define properties that you want to apply to every instance of a particular HTML element. (Element-based styles can be overridden by class-based or ID-based styles for individual instances of an element.) For example, you might want to create a margin of 25 pixels around all paragraphs (content that is in p elements). To do this, you create an element-based style that uses the p element as its selector and that contains declarations for margin properties. The following example shows this element-based style rule.
|
p { margin-left: 25px; margin-right: 25px }
|
Class-based styles
Class-based styles define properties that you want to apply to a subset of a particular element type (for example, to some but not all p elements). They can also apply to different types of elements, such as some p elements and some span elements. The following example shows a class-based style rule. The name introduction is the style's selector (the name of the class).
|
.introduction {font-size: small; color: white}
|
The following example shows how to specify a class for a <p> tag:
ID-based styles
ID-based styles define properties that you want to apply to specific elements that are identified by their ID attribute. You often use an ID-based style when you want to style a single HTML element in a Web page. The following example shows an ID-based style. The name footer specifies the ID that this style applies to.
|
#footer {background-color: #CCCCCC; margin: 15px}
|
The following example shows how to specify an ID for a <p> tag:
Writing CSS Styles
You can write CSS style rules in several places, including the following:
Inline with the HTML markup.
In a style element in a Web page.
In an external style sheet (.css file) that is linked or imported into the Web page.
In general, you write rules that apply to the whole Web site in an external style sheet. You write style rules that apply only to a page in the page's style element. You write style rules that apply to a single page element as an inline style. Many designers and developers find that writing all style rules in one or more external style sheets makes maintaining styles easier.
Creating Inline styles
An inline style rule is defined in an element's opening tag by using the style attribute. Use an inline style when you want to define properties for a single element in a Web page and you do not want to re-use that style.
The following example shows an inline style.
|
<p style="font-weight: bold; font-style: italic; color: #FF0000">
|
Creating Internal (Page-specific) CSS styles
CSS style rules can be defined in a style element inside the head element of a Web page. In that case, the style rules apply only to elements in that page.
The following example shows how to define and apply a CSS style rule to all the h1 elements in 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:blue;}
</style>
</head>
<body>
<h1>This text is centered and blue</h1>
</body>
</html>
|
In this Web page, any text that appears between the <h1> and </h1> tags will be centered and blue. You do not have to reassign these style attributes for each h1 element in the document. If you want to change the color (or any property) of all text in h1 elements, you can edit one style rule.
Creating External Cascading style Sheets
An external style sheet is a text file that has a .css file name extension and 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 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 current page.
Style rules that are listed in an external style sheet are written the same way that they are in a style element.However, they are not enclosed in <style> and </style> tags. The following example shows the complete contents of a simple .css file.
|
h1 { text-align:center; color:blue; }
.head2 { font-size:14pt; text-align:center; color:blue; font-weight:bold; font-style:italic; }
|
You can link an external style sheet to multiple HTML pages, which applies the styles across a Web site. Style sheets separate formatting rules from content. This makes it easier to manage style rules.
Understanding the Precedence of CSS Style Rules
CSS style rules "cascade" in the sense that they follow an order of precedence. Global style rules apply first to HTML elements, and local style rules override them. For example, a style defined in a style element in a Web page overrides a style defined in an external style sheet. Similarly, an inline style that is defined in an HTML element in the page overrides any styles that are defined for that same element elsewhere.
Individual global style rules that are not overridden by local CSS style rules apply to elements even after local styles are applied. In the 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 blue). However, they do not change all the available styles, such as font characteristics. Both global and local style rules are applied, in that order. The result is that all the h1 text on this page displays in a larger font that is formatted as bold, centered, and blue.