Cascading Style Sheet (CSS) - Writing Style Sheets

Styles can be written in couple of ways, which are listed below:

Writing styles for the elements themselves. 

This is the preferred way of doing the things. In this case, the style element would look like

body,div,td {

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;

    color: #666;

}

body {

    background-color: #fff;

    text-align: center;

 }

In this case, the styles are automatically applied to the respective elements. This will also allow to handle the site look and feel in a generic way. It is always better to control the look and feel in this way and than do the local application of styling where required.

Applying style using id's

Here style are applied to the elements based on id. The definition of style is done by (Note the use of #)

#wrapper {

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;

    color: #666;

}

And this is applied to the elements using the id name

<div id="wrapper">

</div>

Using classes

This is what is the most prevalent way of using the styles. But use after you have exhausted the way of doing it in the first way. Here a class is define (Note the use of .)

.myStyle {

    text-align: center;

    font-weight: bold;

    padding-top:1em;

}

Now this can be applied on an element using the class attribute

<div class="myStyle">

</div>

Applying style directly as an style attribute

<div style="text-align: center;font-weight: bold;padding-top:1em;">

</div>

More articles on CSS