Now that we've covered the reasons why using CSS is so valuable to a web developer, let's get started with a review of CSS basics.

Documents contain 3 elements:

Content (which is not the focus here)
Valid (and validated) structural markup
Presentation styles

We will focus on separating the structural markup from the presentation styles by using Cascading Style Sheets. There are 3 methods of using CSS with documents; inline, embedded and linked.

Inline Styles

Inline styles apply CSS directly to each individual HTML element on a web page using the STYLE attribute.

Scope is very restricted. Applies only to the tag to which it is attached.
The syntax of inline styles differs from embedded and linked style syntax.
No portability or editablity! Reusing them in another place is futile.
Use inline to test style ideas before adding them to linked CSS.
Inline styles "win" over all other style types in the cascade of styles.¹

<p  style="font-family: arial, Helvetica, sans-serif; 
font-size: 16px; 
text-align: center; 
font-weight: bold; 
color: #CC0000; 
background-color: #FFFF99;"> Here is an example of a 
sentence which uses an inline style.</p>

Here is an example of a paragraph which uses an inline style.

Embedded Styles

Embedded styles apply CSS to the current page. It consists of CSS rules placed between a pair of STYLE tags in the head of the HTML page.

The embedded STYLE tag must be in the HEAD of the HTML document.
Styles should be enclosed in HTML comments or CDATA² tags to prevent them from being interpreted as HTML or XML.
Embedded styles are limited to the page which contains them.
Embedded and linked CSS syntax are the same.
Use embedded styles to test. When complete, add them to the linked CSS document and replace the style tag with the link tag in the HEAD of the document.
Embedded styles take precedence over all styles except inline styles in the cascade of styles.¹

<style type="text/css">
/* <![CDATA[ */
 
h1 {
   font-family: Impact, Helvetica, sans-serif; 
   font-size: 20px;
   color: #006600;
   }
 
/* ]]> */
</style>

Here is an example of a heading which uses an embedded style.

Linked (External) Styles

Linked styles is the only method which truly separates the presentation from the structural markup. Using the LINK tag in the HEAD of the document, the browser links to a separate CSS document which contains all the styles. Any and all pages in the site can link to this document, reducing and simplifying maintenance for the developer.

Scope is vast. Applies to the tags on any page which links to the external style sheet.
The LINK tag is an empty element, like META, AREA, IMG, etc. It is closed with a backslash at the end of the tag.
Various media attribute values are available depending on how the page will be used.
- For example, a second LINK tag that specifies media="print" can be added to apply specific formatting when printing a document.

<link rel="stylesheet" href="review.css" type="text/css" media="screen" />
<link rel="stylesheet" href="review_print.css" type="text/css" media="print" />

The Lecture pages in this course are examples of documents that use an external, or linked, style sheet.

_______________
¹ The "Cascade" of styles will be covered in a future lesson.
² The use of CDATA tags is covered on p. 32 of the Stylin' book.

References

XML CDATA tag explanation
CSS Media Attributes

Style Sheets

Inline, Embedded and Linked Style Sheets

Inline Styles

Embedded Styles

Here is an example of a heading which uses an embedded style.

Linked (External) Styles

References