Go to Previous Section:
What is CSS?This is the second section of the CSS Getting Started tutorial and explains why documents use CSS. You use CSS to add a stylesheet to your sample document.
Information: Why use CSS?
CSS helps you to keep the information content of a document separate from the details of how to display it. The details of how to display the document are known as its style. You keep the style separate from the content so that you can:
- Avoid duplication
- Make maintenance easier
- Use the same content with different styles for different purposes
Your web site might have thousands of pages that look similar. Using CSS, you store the style information in common files that all the pages share.
When a user displays a web page, the user's browser loads the style information along with the content of the page.
When a user prints a web page, you provide different style information that makes the printed page easy to read.
In general with HTML, you use the markup language to describe the information content of the document, not its style. You use CSS to specify its style, not its content. (Later in this tutorial, you will see some exceptions to this arrangement.)
A markup language like HTML also provides some ways to specify style.
For example, in HTML you can use a <b> tag to make text bold, and you can specify the background color of a page in its <body> tag.
When you use CSS, you normally avoid using these features of the markup language so that all your document's style information is in one place.
Action: Creating a stylesheet
- Create another text file in the same directory as before. This file will be your stylesheet. Name it:
style1.css - In your CSS file, copy and paste this one line, then save the file:
strong {color: red;}
Linking your document to your stylesheet
- To link your document to your stylesheet, edit your HTML file. Add the line highlighted here:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Sample document</title> <link rel="stylesheet" href="style1.css"> </head> <body> <p> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets </p> </body> </html> - Save the file and refresh your browser's display. The stylesheet makes the initial letters red, like this:
Cascading Style Sheets
In addition to red, CSS allows some other color names.
Without looking up a reference, find five more color names that work in your stylesheet.
CSS supports common color names like orange, yellow, blue, green, or black. It also supports some more exotic color names like chartreuse, fuschia, or burlywood. See CSS Color value for a complete list as well as other ways of specifying colors.
What next?
Go to Next Section:
How CSS works.Now you have a sample document linked to a separate stylesheet, you are ready to learn more about how your browser combines them when it displays the document.