Reusable Code

A basic premise of modern web design is separating presentation from content. This is accomplished by storing css stylesheets in separate files from html files.
If we have a stylesheet named style.css, there are two methods for embedding it into our html page. Either statement can be placed in the head section of our HTML page. This allows easy sharing of common CSS styles across many HTML pages.
We have already seen that css rules can be used to modify the style of any html block. For example, we might want a css rule for all paragraphs to have a specific font color and have a specific background color:

Introducing Classes and IDs

One way to target a specific area of your document is by adding classes and IDs. A class css rule starts with a period whereas an ID uses a # symbol. They are very similar in their application. We'll look at classes in this lesson and IDs in the following lesson.
Let's say we wanted to present a series of famous speeches such as the Gettysburg Address. We want to present the title, author, and the content of the speech each in a visually distinct manner. Here's how our html would look after we added class definitions to our markup:
View Current Version

Now we're ready to add css rules based on our class descriptions. We'll create a file called style1.css with the following rules:
Now we'll add the following to the head section of our html page:

View Updated Version

Sample Projects