CSS2 is shorthand for Cascading Style Sheets, level 2.1 (CSS2) standard. Layers refer to one part of this standard. The purpose of CSS2 is to attach style to a structured documents, such as XHTML documents. This technology will allow you to precisely place text, images, and other objects on your page in a way that would be impossible with tables. CSS also provides a second way to format your text. Full specifications for this standard can be found on the W3C website.
Again I will direct you to tutorials written by those more knowledgeable than myself. HTML Dogs has created a tutorial with Beginner, Intermediate, and Advanced levels. That site also has a helpful list of CSS Properties. A similar chart of properties, with links to examples, can be found at W3 Schools.
Here my goal is simply to give an overview of the three basic ways to use CSS: inline, internal style sheets (in the HTML <head> tag), and external style sheets .
Inline CSS
The basic code for in-line CSS is <tag style=”property: value; property2: value2; property3: value3″>content</tag>, where the <tag> can be the HTML tag of your choice. To see this in action, view the text box below which tells you the code that created it.
<div style=”width:50%; text-align:center;
color:yellow;”>
Here is the same example but this time I’ve added two properties to change the font size and background color.
<div style=”width:50%; text-align:center;
color:yellow; font-size:150%;
background-color:red;”>
Note that I can add on different properties with ease as long as I follow the pattern property:value;. In this case I added font-size:150%; which makes the font 1.5 times larger than the default and background-color:red; which fills in the otherwise transparent layer with (not surprisingly) red.
Incidentally, you will now have noticed that there are two ways to format text: using HTML tags as we saw earlier and now using CSS. While both are permissible, using CSS properties is strongly preferred.
Earlier I mentioned that HTML/XHTML is used to create a structured document whereas CSS/Layers are used to add style and formatting to that structure. Because of this, the HTML gods encourage us not code inline CSS too often. As much as is possible, it is better to separate the CSS code from HTML tags. This is exactly what internal CSS allows you to do.
Internal CSS
When a specific HTML document has a unique style, internal style sheets are written into the <head> tag of the document. They must be written as selector {property:value;}, where the selector is the HTML tag that you want to define. Below is an example of CSS encoded in the <style> tag which is enclosed in the <head> tag. Click here to see what it looks it.
<html xmlns=”http://www.w3.org/1999/xhtml”><head>
<title>HTML Primer: Sample Internal Style Sheet</title>
<style type=”text/css”>
h1 {color: #FFFF00; text-align: center;}
p {color: #FFFFFF;}
body {background-color: #FF0000;}
</style>
</head>
<body>
<h1>Sample Internal Style Sheet</h1>
<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>
<p>This is paragraph 3.<br />
Notice that the tags for these three paragraphs are all generic <p> tags.
I’ve instructed the web browser in the style sheet contained in the <head>
tag that all the contents of <p> tags should be white.</p>
<p>Likewise, note that the color of the <h1> tag was set to yellow and the
background set to red in the <head> tag. </p>
<p>There is no inline CSS or HTML formatting of individual tags in this web page.</p>
</body>
</html>
External CSS
Ideally we would like to keep HTML and CSS as separate as possible so that content and presentation remain distinct. External CSS allow you to go one step beyond internal style sheets by keeping your formatting and your HTML in entirely separate files.
As with internal style sheets, the coding follows the pattern selector {property:value;}. The difference is that now you can use a text editor (like notepad) to enter all your CSS info in separate file. Just be sure to save it with the .css extension. Here are the contents of primer5_2.css, which contains the same style sheet info as our header in the internal CSS example above.
p {color: #FFFFFF;}
body {background-color: #FF0000;}
And here is the HTML coding of the page above, only this time it links to the external style sheet which we’ve called primer5_2.htm. Click here to see what it looks like.
<html xmlns=”http://www.w3.org/1999/xhtml”><head>
<title>HTML Primer: Sample External Style Sheet</title>
<link href=”primer5_2.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<h1 align=”center”>Sample External Style Sheet</h1>
<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>
<p>This is paragraph 3.<br />
Notice that the tags for these three paragraphs are all generic <p> tags.
This time I instructed the web page to link to the external CSS sheet.
As before, contents of <p> tags should be white. Also, the color of the <h1> tag was set to yellow and the background set to red.
There is no formatting information at all contained in this file.</p>
</body>
</html>
As you can see, the formatting of the two pages is identical and yet the coding of the second page, the one linked to the external style sheet, is simpler. Rather than having to type <style type=”text/css”>selector {property:value;}</style>, it is now only necessary to link to the style sheet as in <link href=”page5.css” rel=”stylesheet” type=”text/css” />.
The beauty of external style sheets is that they allow you to apply your formatting / styling preferences consistently throughout your site. All you have to do is type in the link to your external style sheet(s) in the header of each new page rather than having to manually format your page or even cut and paste in your CSS as you would need to do with internal style sheets. Of equal importance is the ease with which external style sheets allow you to change your formatting throughout your site. All you need to do is change one file, the .css file, and you’re done. The changes will be rendered on every page that is linked to that .css file.
Priority
As you can imagine there may be times when you want to override the general formatting that you’ve set up for your site. The priority ordering of CSS is: 1) inline, 2) internal, then 3) external, with 1 signifying highest priority. So, for example, if an external sheet says to make the content of an <h1> tag blue, the internal sheet says to make it red, and the inline CSS says to make it green, it will be green.
Conclusion
As stated above, I had no intention of leading anyone step by step through working with CSS but simply wanted give examples of the three different ways to use CSS. For all intents and purposes, this primer is done. The only thing that remains is a chart of CSS properties that you can use for future reference. If/when I have time, I’ll put work on this and post it here.