(ex: heart necklace)

ID predefined CLASS

There are two ways to reference a predefined set of style information for an HTML element, the ID and CLASS definitions. The ID method is meant for only one place on the page, like a navigational menu. In contrast, the CLASS method is meant to be used over and over again on the same web page.

The ID attribute

You use the ID attribute with only those HTML elements you expect to use once on a particular web page. The most common example is a navigational menu. The menu on the side of this page that takes you to all our Web Developer articles is a perfect example. It is called like this in our HTML <div id="resourcesMenu">. Then, in the CSS properties file, it is defined using a pound sign "#" like so: 

#resourcesMenu
{
    display: block;
    float: right;
    margin:0 10px 10px 20px;
    padding: 0 10px 0 0;
    width: 200px;
    background: #E0DCDA;
    text-align: left;
}

The CLASS attribute

Use the class attribute any time you expect to use it more than once on a particular web page. The way we breakout source code in their own box on this page is a perfect example of using the CLASS tag. We expect to do this multiple times so it needs to be in a CLASS definition. The way we wrap our source code on this page looks like this <div class="sourceWrapper">. Then, in the CSS properties file, it is defined using a period "." like so: 

.sourceWrapper
{
    margin:0 100px; 
    padding: 10px; 
    border: 1px dotted gray; text-align:left;
}

CSS properties file

Where do you put your ID and CLASS definitions? You put them in a file with a ".css" extension. Place that file somewhere on your webserver, perhaps in the root directory. Next, add the following to the HEAD of your HTML page like so: 

<HEAD>
        <style type="text/css">
                @import url("http://www.mysite.com/myproperties.css");
        </style>
</HEAD>

Redefine basic HTML elements

In addition to ID and CLASS definitions, you can redefine fundamental HTML elements in your CSS properties file. Take the <P> paragraph tag for instance. Suppose you wanted to always have the text fully justified (left-right) and also a buffer of 50 pixels on both the left and right sides. You would name the "P" element and redefine it in your CSS properties file like this:

p
{
    text-align: justify; 
    padding-left: 100px;
    padding-right: 100px;
}

Specificity

You can instruct your stylesheet to redefine an HTML element only if a chain of circumstances is true. For instance, you could specify that only the <P> tags which are encapsulated by an element with the "main-container" ID class defined should be redefined. This could be quite useful in many situations. In the previous example, we redefined the paragraph tag no matter where it appeared. That's probably not what you want. You may prefer to do this only for paragraphs that are inside a block component, rather than globally. Simply put a space between each encapsulating element in your stylesheet definition. To do this, define the stylesheet like so: 

#main-container p
{
    text-align: justify; 
    padding-left: 100px;
    padding-right: 100px;
}

Note: It is possible for multiple stylesheet definitions to redefine an HTML element in various ways. How does your web browser know which definition to obey? The most specified definition is the one who wins. This usually means that, all things being equal, a DIV tag trumps a CLASS tag. More generally, it means that the longest chain of specificity wins. So in the following example, the third definition wins if there happened to be a paragraph tag inside a table which was inside a "main-container": 

p
{
    text-align: left; 
}

#main-container p
{
    text-align: justify; 
}

#main-container table td p
{
    text-align: center; 
}

Force Internet Explorer to play nice

Internet Explorer (aka IE) is not a good citizen. This web browser supports CSS but often does so incorrectly or half-heartedly. The good news is that you can use the rules of specificity, and some of IE's quirks, to get it to work appropriately with other more compliant browsers. Internet Explorer, and only Internet Explorer, defines a mysterious asterisk "*" element that encapsulates everything. This simple realization is what has made CSS layouts feasible because all other web browsers consider the<HTML> tag to be the supreme encapsulator. Since standards compliant browsers don't understand the asterisk symbol, they will happily ignore what you define this way.

For the most part, IE has trouble with margins and padding. You should first develop your CSS based sites using Safari or Firefox, and then work out the idiosyncrasies of IE to make it look good in all browsers. Take a look at this example where I redefine margins for only IE:

.purchaseBookImage
{
    float:left; 
    margin-left:100px; 
    display:block;
}

/* Hack for Windows IE - Hides from Standards compliant browsers \*/
* html .purchaseBookImage { margin-left: 50px; }
/* End hide from Standards compliant browsers */