HTML and CSS Reference
In-Depth Information
Applying Style Rules
Styles are specified from various sources and in several different ways and as the name suggests, they are
cascaded, or inherited. It's important to understand how this works, especially when there are conflicting
declarations.
Including Style Specifications
There are three sources of style sheets:
•
Author - these are the style sheets created by the web developer and what we normally
think of when referring to a style sheet.
•
User - a user can also create a style to control how web pages are displayed for them
specifically.
•
User Agent - a user agent (web browser) will have a default style sheet. For example, if you
create a document with no style rules, the browser will display the content using a default
font family and size. These are actually defined in a style sheet that is specific to the browser.
For author styles, which are the only source you can control, there are three ways to include style rules in an
HTML document:
style
attribute like this
<p
style="color:red">This is red text</p>
. Of course, with this method you don't use a
selector since the style only applies to the current element (as well as all child elements).
•
Inline - the style is set directly in the element using the
style
element. This is normally placed in the head tag and applies to the entire document.
Styles defined this way will require a selector to indicate on which element(s) the style
should be used. This approach is sometimes referred to as
embedded
styles.
•
Internal - style rules can be included in the actual HTML document using the
•
External - the most common way to apply styles is to place all of the style rules in a separate
file with a .css extension. The style rules are formatted just like the internal styles. The
obvious benefit of using an external style sheet is that the same set of rules can be applied to
multiple pages. Each page references this style sheet with a
link
element like this:
<link rel="stylesheet" type="text/css" href="MyStyleSheet.css" />
Cascading Rules
When rendering a page, the browser has to process styles from all of these sources to determine the appropriate
style for each element. When there are conflicting rules, the author style sheet takes precedence over the user
style sheet, which takes precedence over the user agent styles (browser defaults). The author styles can be
specified using the three methods I explained earlier (inline, internal, and external). Within the author styles,
inline declarations take precedence over internal declarations and external styles sheet are considered last. So
if a page uses an internal
style
element and also uses the
link
element to include an external style sheet, the
internal declarations will override conflicting rules in the external style sheet.
■
if an external style sheet is referenced after the
style
tag, it will take precedence over the internal
styles. if you have both external style sheets and an internal
style
element, you should reference the external sheet
first so the precedence rules work as expected.
Caution
