There are several ways in which styles can be applied:
As an inline style applied to a unique element in a single page. An inline style cannot be re-used for other elements. As such, it is very inefficient, but sometimes necessary.
As a scoped style within a container element in HTML5. Styles in scoped CSS are limited to the children of the element they are contained within. Extremely limited support at the moment, continued development and potentially disastrous interpretation of scoped CSS in non-supporting browsers means that scoped is not yet a realistic option for production code.
As an embedded style that is applied to a page, and can be used by every element on that page, but not by other pages in the site. Style rules are re-usable, but only on the page on which they are embedded.
As a linked style: typically a page with the filename styles.css. Rules in a linked style sheet can be referred to by multiple pages in the site. For the purpose of consistency, clarity, and power, the majority of your styles should generally be written in a linked style sheet: embedded styles, having less utility, should be avoided, and inline styles avoided entirely, or as much as possible.
As a general rule, most of the styles for a website should be written in a separate style sheet. This requires two things: a working CSS file, and a link to the same. The link is easy to create, and is written in the <head> section of our HTML document:
<link rel="stylesheet" href="styles.css">This line must be in the head section of every HTML page that wishes to use the stylesheet.
Embedding a style sheet
An embedded style sheet is written inside the head section of the HTML page to which it applies, between opening and closing <style> tags:
<style>
/* CSS code */
</style>Photograph by Doc Searls, used under a Creative Commons Attribution Generic 2.0 license
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
