To apply Cascading Style Sheets to elements in your page, there are two steps: 1) creation of the style sheet rule(s); and 2) applying the style sheet rule(s) to your element in your HTML page.
In the previous tutorial, we created a style sheet; now we need to know what to do with it.
Every style sheet entry follows a certain pattern. Be very careful to observe the punctuation closely - this is crucial for your style sheet to work. Here is a very basic example of one style sheet rule applied to one tag:
Let's break this down.
1. body. This is the tag you are applying the rule to. In CSS terms, this is called a selector.
2. { This begins your rule.
3. background-color: This is the property you are formatting in your body tag. Note the colon (:).
4. #ffffff; This is what you are doing to the property - setting the colour as white. In CSS terms, this is called the value you are attaching to the property. Note the semi-colon (;).
5. } This closes your rule.
As it happens, you already created the body tag when you created your web page. Therefore, you don't need to do anything further for the above style rule to work.
Likewise, if you styled common elements (such as tables or paragraphs), the same thing would be true:
The above rule would apply a 1 pixel wide solid border around every table in your page (unless you specify differently).
This is all straightforward. But what happens if you want two or more different styles on the same type of element? For example, let's say that you wanted to have your web page consist of a table divided into three cells, stacked vertically, like this:
| header |
| main content area |
| footer |
However, you wish to style each of these cells differently; you wish to have a light-coloured main content area, so that the text can be easily read, but you wish to have a bright colour in your header, and a dark colour in your footer. Since these are all table cells (td, which stands for "table data"), you cannot simply make a style sheet for td and control them all.
Here is where things get interesting. For now, we will keep things relatively simple and introduce two ways that you can style elements: IDs and classes. An ID is for something that is only going to be used once on your page. For example, you would likely only have one header on your page; therefore, you can use an ID there. A class is for elements that you may wish to re-use. The little containers containing code on this page, for example, are used over and over. Therefore, a class is what you would use for something like that.
Unlike regular HTML tags, you need to manufacture your own IDs and classes. You will provide your own names for these, although a handful of words are reserved. Don't use special characters such as ampersands (&). Also, although you can use numbers in your ID and class names, you can't begin the name with a number. Thus: #table1 is okay, but #1table is not.
Creating style rules for your IDs and classes follows the same pattern as the rules for basic tags such as body (covered above), except that you need to place a hash (#) immediately before your ID name, or a period (.) immediately before your class name.
Here, then, is an example of an ID rule:
This will provide your header with the same colour as Pactumgroup's pages.
Here is an example of a class rule:
The above uses the same colour, but now as a border on a class called .mytable.
Okay, you have created your IDs and classes - but they don't yet match anything on your page. You still need to apply your styles. This is done quite easily.
Applying an ID
In our example above, we suggested you might have a table including all of the content on your page, consisting of header, main content area, and a footer. Each of these is a td (table cell).
In our style sheet, we gave a background colour to an ID for the header. To apply that ID to the cell, find the correct td in your HTML, and add id="header" to your opening tag. Note: id in the HTML tells the browser that this is an ID; do not use the hash mark (#) here.
Thus, your opening td tag should look like this:
That's it. Now, when you preview your page in the browser, the top cell in your table will show the deep red background you set in your style sheet.
Applying a class
Applying a class is the same as applying an ID, except that rather than typing id, you type class. Once again, even as you do not include the hash mark (#) in your HTML, neither do you include the period. Thus, to apply your style to your table, your opening table tag would look like this:
Whatever table you apply this class to will now have a dotted deep red border surrounding it.
The above has only been very simple - we've only applied one rule per style. But don't create a whole new rule set every time you wish to do something to your element. For example, when you style your body tag, you can set background colour, margins, padding, and much more all at once. Thus:
There are many shortcuts to make your CSS code lean (meaning that your CSS file will download quicker, and in turn your pages will display faster). For example, with colour codes, colours made of up all one character (such as white, above), or three consecutive sets of two characters (e.g. #332233, the colour I randomly gave the background to this particular page) can be coded "in half." Thus, white can be written #fff, while the deep purple on this page can be coded simply as #323. Other rules can be written in shorthand; instead of creating a rule for each of border-style, border-width, and border-color, you can create a simplified border property:
(Be aware, however, that many shortcuts available need to be written in a specific order, or the entire rule will fail.) We cannot go into shortcuts any further in this introductory lesson, but I encourage you to take the time to learn them.
Since you can apply a class more than once, why would you bother with IDs at all? Here is where the "cascade" part of "Cascading Style Sheets" comes in to play. In CSS, the more specific a rule is, the more "weight" it pulls in determining whether it gets used. This makes CSS a very powerful way to style elements.
Let's take that table class "mytable" as an example. Let's say that you set a font size of 13px for the regular paragraph text in your table. What if you wanted one item in that table to have a different font size? It could have an ID which would overrule the class setting. (In this particular example, there are other ways the class could be overridden, but in some cases, the specificity of the cascade provides the easiest and most practical way to accomplish such overrides.)
That's it for this tutorial. Be sure to learn about the various things you can do to style the various elements. You will discover that CSS is a very powerful tool, both in terms of reducing the weight of your pages (and thus speeding up download times) and of giving flair that straight HTML cannot accomplish.
Related tutorial:
Links and the Cascade:Getting the Fundamentals Right
Click on the monitor for more info about a site.