Working with styles
A style is a set of formatting characteristics that are defined in a cascading style sheet (CSS). You can apply styles to content in a web page, including text (individual characters or entire paragraphs), graphics, layers, tables, and even to the body of the entire web page. Styles enable you to efficiently reuse a set of properties and values without having to set the properties every time you want to use them.
The styles of a CSS cascade in the sense that global style rules apply to HTML elements unless local style rules override them. In general, local style rules take precedence over general style rules. For example, a style defined in an internal CSS in a web page overrides a style defined in an external CSS. Similarly, an inline CSS defined within a single HTML element on the web page overrides any styles defined for that same element in the internal or external CSS of the web page. The portions of global style rules that aren't contradicted by local CSS style rules apply to HTML elements even when local styles are applied.
Types of styles
A style that resides in an external or internal CSS can have a class, element, or ID selector. 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 right curly brace (}). Each type of style is distinguished from the other style types by its selector; a period (.) precedes the selector for a class-based style; a number sign (#) precedes the selector for an ID-based style; and the selector for an element-based style consists only of an HTML element, such as H1.
Element selectors
Use an element selector to define a set of properties that you want every instance of a particular HTML element to use in a web page. For example, to create a margin of 25 pixels around all paragraphs (content surrounded by <p> tags) in your web page, you create a style that uses the p element as its selector and contains declarations for margin properties, as shown in the following code.
The following example applies the margin-left and margin-right properties to all h2 HTML elements in the document.
h2 { margin-left: 25px; margin-right: 25px;}
Class selectors
Use a class selector to define a set of properties that you want to use on one or more items in a web page. If you ever want to modify the style, you can edit the style's rule set and every item you've applied the style to will automatically reflect the changes.
The following example declares the class introduction and specifies the font-size and color properties.
.introduction {font-size: small; color: white;}
You can assign this class to any HTML element:
<h3 class="introduction">
If you want to restrict a CSS rule to specific HTML elements, include the element in the selector as follows:
p.subtext {font-style: italics; font-size: 0.8em;}
This style rule will only apply to paragraph elements.
Note
You can assign multiple classes to a single HTML element.
<p class="introduction subtext">
ID selectors
Use an ID selector when you want to define a set of properties for a single item or block of items that you want to distinguish from all other content in one or more web pages. Use an ID selector when you want to style a single HTML element in a web page.
#footer {background-color: #CCCCCC; margin: 15px;}
Apply this CSS rule to a single HTML element.
<div id="footer">
Inline styles
Use an inline style when you want to define a set of properties for a single item or block of items in a web page and don't want to reuse that style. Unlike ID, element, and class selectors, whose properties are defined in either the head section of a web page (internal CSS) or in an external CSS file, the properties of an inline style (or inline CSS) are defined directly in the HTML element you want to use the style.
<p style="font-weight: bold; font-style: italic; color: #FF0000">
See also
Tasks
Concepts
Controlling appearances with styles
Cascading style sheet reference
Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.