Associating CSS with Documents
There are several ways to associate styles with Web documents. The most commonly used are external style sheets, embedded style sheets, and inline style attributes.
External Style Sheets
An external style sheet is a separate text file that can be associated
with one or many HTML documents. A single style sheet can be associated
with a limitless number of HTML documents, making this a powerful tool.
By using an external style sheet you can specify fonts (including size,
weight, and color), line heights, background colors, padding, borders,
and almost any other presentation or layout element used. To include
an external
style sheet with an HTML document, include a <link> element
in the <head> element of the HTML document.
Embedded Style Sheets
An embedded style sheet is sometimes appropriate, as when one particular
page has a specific presentation and layout that are different from other
pages on the same site, for example. If a document contains both a link
to an external style sheet and an embedded style sheet, the embedded
style sheet is used. So if both style sheets apply formatting to the
same element, such as table, the browser will display the table according
to the embedded style sheet. This is why they are called Cascading Style
Sheets. The embedded style sheet is actually a <style> element
with all definitions enclosed between the <style> and </style> tags,
which must be contained within the document's <head> element.
Inline Styles
An inline style attribute may be used in conjunction with either external
style sheets or embedded style sheets. It is appropriate to use this
method when you want to format a single element. Just as an embedded
style sheet overrides an external one, an inline style attribute overrides
style declarations in external and embedded style sheets. An inline style
is an attribute rather than an element or a separate document. For the
inline style to take effect,
the style declaration is included using the tag's style attribute.
The inline
style attribute should be used sparingly, for using it too much can cancel
out many of the benefits of using CSS when making changes across sites
or many pages.
Example
Document with Embedded CSS:
Document with External CSS:
Document with Inline style:
