Merging CSS and HTML
There are three ways to add CSS to your Web pages:
| ✓ | Inline styles: With this method, the effect is totally localized. That is to say, the style you create with this method applies only to the element that contains it and to nothing else on the Web page. An inline style is the simplest kind of CSS, but lacks much flexibility. It uses the style attribute to add CSS. An inline style that sets the color only for the H1 element in which it is declared looks like this:
<H1 style="color: blue">This is a major heading in blue.</H1> |
| ✓ | Style declaration: This permits you to use the full range of CSS, applying it throughout a single Web page, but it’s of limited utility when dealing with a large number of pages on a significant Web site. Such a declaration must occur within the HEAD element of the HTML document. A style declaration takes the form of:
<HEAD> <STYLE> H1 {color:blue} </STYLE> </HEAD> After such a declaration, the text in all H1 elements on this Web page will be blue in color. |
| ✓ | Separate .css file: This file is linked to the .html files on your Web site. With this approach, all the creative elements (color, font size, and the like) are specified in a different file (.css) from the ones that define the content of the Web pages on your site (.html). This has a tremendous advantage over either of the other two approaches: One .css file can control the appearance of multiple Web pages. Let’s say, for example, that you have a Web site with 87 pages. You can readily imagine the amount of effort involved if you have to go into each and every one of those Web pages and manually alter all the CSS properties you’d entered into each of them. Now imagine that there’s just one .css file that you have to change to effect a new style on every single Web page in your site. You get the picture, right? |
A .css file isn’t anything fancy. It’s just a plain text file, like a regular .html file. You can create one in anything from Windows Notepad to the fanciest Web page editor. Just make sure to give it an extension of .css (if your program doesn’t already do that for you), and you’ll be fine.
All you have to do is put a link to the .css file in each of your Web pages and, after that, any change in the linked file is reflected automatically in all your Web pages.
Here’s how it’s done:
1. | Create the .css file with the variables relating to font size and color or whatever other features you wish to specify. |
2. | Create the .html files that define the content of your site. |
3. | In the HEAD element of each Web page on your site, add the following lines of code: <HEAD> <LINK rel=stylesheet href="file.css" type="text/css"> </HEAD> Of course, you replace the file part with the name of your actual .css file. |
4. | Upload both the .css and .html files to your Web server. There. You’re done. |
After that, to change the appearance of every page on your site, just alter the .css file and upload the new version. Yep, simple as that. No kidding.
You can add several different .css files to one .html file by simply listing them all. Say you have three different style files that apply to your site. The following code would add them all:
<HEAD> <LINK rel=stylesheet href="file1.css" type="text/css"> <LINK rel=stylesheet href="file2.css" type="text/css"> <LINK rel=stylesheet href="file3.css" type="text/css"> </HEAD>
Perhaps the hardest thing to keep in mind when dealing with a separate .css file is also the simplest: that you don’t use the <STYLE> tag. In fact, a .css file doesn’t use any HTML at all. Ever. Other than that, the syntax is exactly the same. Take a look at how the code changes between the two:
| ✓ | Declared style:
<HEAD> <STYLE> H1 {color:blue} </STYLE> </HEAD> |
| ✓ | Separate file:
H1 { color:blue } |
There’s actually a fourth level of CSS, but Webmasters have no control over it. A visitor to your site can specify in his Web browser that his own personal style sheet be used instead of any that is intended on the site.