Applying a Style
There are three ways of applying a style to an HTML or XHTML document. Each approach has its own advantages and disadvantages, and you’ll probably use some combination of all three in developing your Web sites.
Inline Styles
A style is applied to a specific element through the use of the style attribute in the element’s tag.
Advantages:
- Inline styles are easy to use.
- Inline styles are more easily interpreted.
- Inline style applies only to the specific element that it modifies.
- Inline styles do not provide a clear separation between style and content.
Embedded Styles:
A style sheet is placed in a document’s head, setting the style definitions for the document’s elements.
Advantages:
- Styles are clearly segregated from the web page content.
- The same style and value pairs can be used as is done with inline elements.
- A single style declaration can be applied to the entire web page.
Disadvantages:
- Attributes provided apply to a single web page and cannot be shared.
- If changes are made within the embedded style of one page and not on another, the pages will look different.
External Styles
A style sheet is saved in a separate document and is applied to a group of pages in a Web site.
Advantages:
- Styles are clearly segregated from the web page content.
- External style sheets can be used to apply the same style to multiple web pages.
- The attributes in external style sheet have the same meanings as those in inline and embedded styles.
- If embedded or inline styles are applied within a web page, they will take precedence over external style attributes.
- If the external style sheet cannot be accessed, the browser’s default style will be applied to the web page.
Using External Style Sheets
To link a Web page to an external style sheet, you use the link element. The link element is most often used to link to style sheets, however. To create a link to an external style sheet, add the following tag to the head element on of the Web document:
Another way to access an external style sheet is to import the content of one style sheet into another. To import a style sheet, add the following statement to either an embedded or an external style sheet: