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, and typically does not give you a great advantage over previous techniques (such as <font> tags). As such, it is very inefficient, but sometimes necessary.
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.
We will therefore be creating most of our styles in a separate style sheet. This requires two things: our style sheet, and a link to it. The link is easy to create, and is written in the <head> section of our HTML document. For XHTML, it is this:
- <link rel="stylesheet" href="styles.css" type="text/css" />
For HTML5:
- <link rel="stylesheet" href="styles.css" >
(The nice part of this is that you only ever have to write this line of code once, then copy and paste it into your other web pages after ensuring that it works correctly).
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. For XHTML:
- <style type=“text/css” >
- </style>
For HTML5:
- <style>
- </style>
so we don't need the jQuery minimum length anymore:) cool!


