2007-12-08

Understanding Style Sheets (CSS)

HOME||CONTENTS

There are actually different types of style sheets that can be integrated with HTML documents. However, the most commonly used type of style sheet is the Cascading Style Sheet or CSS. As the name implies, this style sheet is a layered style sheet. This means that different formats can be implemented using different attributes. CSS is an extension of the HTML language. CSS allows generalized formatting of a web document without the need for individually tagging each element. Basically, CSS provides the general formatting for the texts, graphics and layout a HTML document or web page.

You can consider CSS as some sort of generic formatting tool that is much similar to the formatting tools of word processors. CSS tells the browser how a particular type of page element will be displayed. For instance, the post titles (header texts) of this blogsite are displayed as left aligned, blue color, and black during mouse hover. All of these characteristics are declared in the style sheet. Without the style sheet, the individual titles need to be tagged separately.

CSS codes are placed inside the <head> tags of a HTML document. These CSS codes, are further nested inside the <style> tags. In Blogger/Blogspot templates, the style sheets are found between the <b:skin> tags. If HTML tags are easily identifiable because of the arrow brackets (< and >), CSS codes are easily identifiable because of the curly brackets ({ and }) CSS codes or attributes are enclosed within these brackets.

Below is an example of CSS codes. These CSS codes provide the background image for this blogsite. Tweaking these codes in my template will change the attributes of the background image.

<style type='text/css'>
body
{
background-image:
url('http://www.quiltingbb.com/images/wood_tile.jpg');
background-repeat: repeat;
background-attachment:
fixed
}
</style>

Unlike HTML tags, CSS codes do not necessarily need to be grouped in hierachical order. However, for the sake of convenience, the CSS codes are grouped according to the particular HTML elements they format. For instance, in the Blogger templates, the CSS codes for the header elements are grouped together. CSS codes have similar attributes to HTML tags. Some of the most common attributes of CSS codes are width, alignment, height, color, and text effect. Hence, if you are very familiar with HTML tags, you can easily learn how to format CSS codes. In my successive posts, I will discuss specific CSS formatting codes that can be used in Blogger/Blogspot templates.

If you want to learn more about CSS, you can visit this site: W3.ORG

Check Page Rank of any web site pages instantly:
This free page rank checking tool is powered by Page Rank Checker service