Styles overview
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.
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.
In the following example, "introduction" is the style's selector, and "font-size: small" is one property declaration, followed by a second property declaration.
Example of a rule set for a class selector
.introduction {font-size: small; color: white}
Example of a class selector applied to a <p> tag
<p class="introduction">
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.
Example of a rule set for an element selector
p { margin-left: 25px; margin-right: 25px }
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.
Example of a rule set for an ID-based style
#footer {background-color: #CCCCCC; margin: 15px}
Example of an ID-based style applied to a <p> tag
<p 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.
Example of a rule set for an inline style
<p style="font-weight: bold; font-style: italic; color: #FF0000">