Cascading style sheets provide a powerful tool for web designers. CSS was developed to eliminate the problem of HTML coding that was packed with formatting and design tags that created complex and hard to work with coding. The goal of CSS is to separate the content of a web page from the design. The design component is placed in an external style sheet where it can be easily manipulated and modified without having to change each and every page in a web site.
There are three different ways of implementing styles. The best method is through the use of external style sheets. This provides the easiest method of updating an entire web site. Embedded styles are placed in the head of an HTML document and is limited in scope to just that one page. You might want to use an embedded style to modify the appearance of a particular page in a web site. Embedded styles take precedence over external styles if there is a conflict. If not conflict exists then the styles are additive with the page receiving the styles from both the external and embedded styles. Inline styles are coded directly into the web page. This is the least efficient method of applying styles but it does provide the greater flexibility that comes with the use of styles.
| Style Type | Where is it found | Syntax | Precedence |
|---|---|---|---|
| External Style Sheet | An external .css document | selector { property: value } | Lowest level of precedence |
| Embedded Styles | In the head section of a page | style tag then selector { property: value } | Takes precedence over external styles |
| Inline Styles | In the body section of a page | tag style="property: value" | Takes precedence over all other styles |