Sunday, March 22, 2009

id vs. class

Use id selectors for divisions over classes if you only need to use it once within a file.

Your CSS for an id selector named "container" might look like this:

#container{
width: 80%;
margin: auto;
padding: 20px;
border: 1px solid #666;
background: #ffffff;
}

The HTML to display that ID-ed division is this:

<div id="container">Contained content</div>

Your CSS for a class would look like this:

.tealtext{
color: #008080;
font-weight: bold;
}

And you invoke that text with this HTML:
<span class="tealtext">This text is teal.<span>

1 comment:

  1. I have also heard the analogy that the ID markers are considered the parent and the CLASS markers the children. Not sure if that would cause you to get confused, but I find it helps me remember how to differentiate them.

    ReplyDelete