As covered in the Basics of CS Tutorials, there are two main references ways we can essentially "link" a particular style to an HTML document, and PHP document, ASP, etc... They all operate in the same general fashion.

ID Selector

ID is called the "unique identifier element" and it is used to define a special case for an element. For example:

#selector {property:value;}
#footer-example {
     margin:auto;
     background: url("images/footerbg.gif") repeat-x bottom center;
     height:67px;
}

We are defining a special case for our footer

We can "call" this id by doing something like the following:

<div id="footer">
<p>Copyright &copy; 2009 AomicPages</p>
</div>

Why ID?

The reason why they chose ID is because an ID is unique to one person so two ID selectors CANNOT exist within the same html document. Example:

<div id="header">
<a href="#">Login</a>
</div>

<div id="header"> <!--INCORRECT-->
<ul style="float:left;">
     <li><a href="#">home</a></li>
</ul>
</div>

In the above example, you must choose one or the other to exist within the same document! If you wish to have multiple selectors within a document then you use the class selector. Click here to download a very small (2.98KB) zip archived example that I put together for the ID Selector!

Class Selector

A Class Selector is used when you have many elements that you want to apply styles to! You can technically create a web page with only class or ID selectors (although a combination of both is best).

So let's say we have a cool looking box that we're going to use multiple times on our web page. Obviously we don't want to create a separate ID Selector for every instance that we use this nifty box. ID is the "Unique Identifier" and it can only be used once so...

<div id="nifty-box">
<p>Some text here</p>
</div>

<div id="nifty-box">
<p>Some more text here is not valid</p>
</div>

So two of the same ID Selector within the same page is NOT valid! Our solution is by using the Class Selector!

<div class="nifty-box">
<p>Some text here</p>
</div>

<div class="nifty-box">
<p>Some more text here IS valid!</p>
</div>

That is perfectly fine to do! In fact, this make things significantly easier when creating a web page because you can easily implement styles across your entire web site with just a few keystrokes. Instead a few dozen ID Selectors you can get the job done with one Class Selector! Click to download a very small file to see this in action!

class.zip
class.zip
Size: 3.3 KB
Be Sociable, Share!