CSS Part 1: Introduction

**Lop** · 09-14-2008, 08:55 PM

CSS Tutorial
Chapter 1: Introduction to Cascading Style Sheets

CSS is a form of style sheet language which is used to apply styles to HTML pages. It provides the capability to define styles like font, background, layout etc for various elements in a HTML document's presentation. One of the major advantages of CSS is that it allows for tableless web page design.

CSS is a standard used for Web markup. The standard is set and maintained accross different versions by W3C, World Wide Web Consortium. The advantages of using Cascading Style Sheets for your webpages include

Advantages

Enforces a consistent look and feel to your entire web application
Any change to your application's look, you just need to change the corresponding attribute in just one file (let's say a button's background) at one place, and Lo!, all the webpages now show up with the new color
Good programming practice. By splitting design attributes from the elements (which usually have javascript to execute some business logic) you achieve good programming style.
Wide array of style attributes

However, CSS is not without its disadvantages, some of which include

Disadvantages

Browser incompatibilities. There are certain attributes which are exclusively supported only by Firefox, and there are some other which are supported only by IE.

However, it will be a good idea to check for the corresponding attribute incompatibility if you are doubtful.
Enough said, let us start with our first Hello World! CSS.

Create a new html file with the following content Code:

HTML Code:

<html>

<head>

<style type="text/css">
    
    body 
    {
        background-color: lightblue;
    }

    h3
    {
        text-decoration: underline;
    }

</style>

<body>    
    <h3>Hello World!</h3>
<body>
</html>

The output looks like the following:

We write our Style attributes withing tag. The format of a writing a CSS attribute is given below

HTML Code:

selector 
{
    property1: value1;
    property2: value2;
    ...
    propertyN: valueN;
}

where a selector can be any HTML tag on which we want to apply style attributes to. In the above example, we have applied style to body tag. The selector here is "body". And then we set the property, background-color to lightblue.

After the body tag, we have applied style to heading 3, setting the attribute text-decoration to underline. There is also another method to apply style to HTML. Every HTML tag has an attribute style which can link to a style. Now imagine a scenario in which you have several heading3 tags. You want one particular H3 tag not to have its text underlined and want its font color to be maroon. We can override the style setting specified using the <style> </style> as follows

HTML Code:

<h3 style="color:red; text-decoration:none">I am special H3 tag</h3>

The resulting HTML page would look like this:

Please note that the above method is not considered very good practice in cases you don't need specialization of design. If you have a common design for all elements, it is always recommended to put them separately in within <style> tags. Now that we have seen how to develop and work with CSS, we now proceed to see Page Design using CSS