In the last entry we learned how to put a CSS style sheet into a web document, today we will look at the structure of CSS file and how it relates too the HTML file. A CSS Style sheet can have three different types of style blocks in it’s contents. There is a HTML tag block, an ID block and a class block. All of these blocks are identified in different manners in the style sheet.

All style blocks have the same basic format. They all start with the name of the block and then contain all the style directives within a pair of brackets. Each style directive is separated by a semicolon and normally placed on a separate line for simplicity of reading. Examples of this can be seen below within the samples for each type of block.

The HTML Block
This block is very straight forward. This block’s name is the type of tag that the designer wants the style to apply towards. Examples of names for an HTML style block could be BODY, P, TABLE or DIV. These are all names of HTML tags contained within the HTML document. This type of style will apply to all instances of the HTML tag in the document. If a designer wanted to ensure that all the text on a page was font style VERDANA and size 10 then the designer could place this in the BODY tag as shown below:

BODY {
Font-Family: Verdana;
Font-Size: 10pt;
}

ID Style Blocks
ID style blocks are great for applying some style directives to a particular tag on a HTML page. The HTML tag needs to be marked with an ID attribute for these style blocks to work. Adding an ID attribute to an HTML tag is done as follows:

<div ID=”specificDIV”>This is My Text</div>

When using ID style blocks the name of the block in the CSS sheet is always prepended by a pound sign, #, which informs the browser that it is an ID block. The pound sign is the only thing that separates an ID style block from other block types in the style sheet. Also it is important to know that for proper HTML validation the ID can only be used once per HTML page. Multiple uses of the same ID name are not allowed, please use Class style blocks for this functionality. If the designer wanted to make the DIV tag above use the Arial font instead of Verdana, then they could easily add an ID style block to their style sheet that states the following:

#specificDIV {
Font-Family: Arial;
}

Class Style Blocks
This is probably the most usefull CSS block type there is. Not only can a single class block be used on multiple different types of HTML tags but it can also be used multiple times per HTML document and still be validated properly. Class blocks can also be stacked on an HTML tag to apply multiple class blocks to the same tag. This can help make a CSS style sheet more flexible when using the class blocks. Class blocks are applied to an HTML tag by adding the CLASS attribute to the HTML tag. This is done as follows:

<div class=”center”>This is my text</div>
OR
<p class=”center”>This is my other text</p>

Class style blocks are distinguished in the CSS style sheet by prepending a period, “.”, to the name of the style in the CSS sheet. This can even be taken a step further and prepending the name of the HTML tag to the name of the class block to have multiple classes with the same name that style differently based on the HTML tag it is styling. That can however get a little complex and hard to follow so the designer is better off by applying different names to the class blocks if they are styling differently then a previously used name. An example class block that will center the text on both of the examples used above would be as follows:

.center {
Text-Align: center;
}

As previously stated you can also stack the class style blocks on to a HTML tag. This is done by seperating the names of the classes on the HTML tag with a space. If a designer chooses to stack class styles on to a tag they must understand that if two styles try to modify the same directive, such as font-family or text-align, then the class that was listed on the tag first will decide how the tag is styled. So if a designer had three class styles named “center”, “verdana” and “size10″ that changed the text-align, font-family, and font-size they could easily stack these on one tag as like this:

<p class=”center verdana size10″>This text will be centered and displayed in Verdana at font size 10pt</p>

That covers all of the different types of style blocks that you will find in the common CSS style sheet. Hopefully this will clear up how to create and apply a proper style sheet for designers that are just getting started in using CSS.

Save as PDF file