Go to Previous Section:
What is CSS?This second section of the CSS Getting Started tutorial explains the relationship between CSS and documents. In the exercise you'll learn how to add a CSS stylesheet to the sample document you created in the first section.
Information: Why use CSS?
Use CSS to define styles for your documents, including the design, layout and variations in display for different devices and screen sizes. You can place your CSS in the <head> of a document with an embedded style sheet, or attach a separate file that defines your styles with an external style sheet. To link an external style sheet to your document, you'll simply add a link to the style sheet in the <head> of the document.
An external style sheet has many advantages. Keeping the styles separate from your HTML content:
- Helps avoid duplication
- Makes maintenance easier
- Allows you to make a site-wide change in one place
Using CSS, you store the style information in common files that all the pages share. For example, when the documents link to the same style sheet that defines the color of h2 headers, you can apply the style for h2 header tags globally by changing one css attribute.
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 can provide different style information that makes the printed page easy to read.
How do HTML and CSS work together? In general, you use HTML to describe the content of the document, not its style. You use CSS to specify the document's 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 the
doc1.htmldocument you created in the first section. - Save your document as:
style1.css. This file will be your stylesheet. - 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:
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.