HTML and CSS Reference
Once you have your CSS code in its own stylesheet file, you need to link it to your web page so that the browser
knows how to find it. You do this using the <link> element.
<link rel="stylesheet" href="style.css">
The link element uses two attributes to point the browser to your separate resources, such as stylesheets: the rel
and href attributes. The rel attribute describes the relationship of the file that you are linking. The href attribute
tells the browser where it can locate the stylesheet file. In the previous example, the resource is a stylesheet, so the
rel attribute will have the value stylesheet , and the href attribute points to a file named style.css .
Now that you have a basic understanding of what CSS does, you need to link a stylesheet to your page templates to
make them a bit easier on the eye.
The code for this exercise can be found in folder 12.
1. Create a new folder in your project directory called css . Download the style.css file from the topic's
website (folder 12) and place it in the css folder.
2. Create a new folder called img in your project directory. Download the image files from the topic's website
(folder 12, img folder) and place them in your new img folder. There should be two files: bodyBg.png
and featureBg.png . These files are referenced in the CSS code.
3. Open the index.html and about.html files in your text editor.
4. Add the following <link> element to the <head> of your page templates.
<link rel="stylesheet" href="css/style.css">
5. Save the files.
Now open the page templates in your web browser; you should see that there has been quite a transformation. It's
just like magic!
Figures 2-13 and 2-14 show how your page templates should look with the new CSS styling.