CSS Classes
Now you might be thinking that CSS is pretty darned useful and not as limiting as you once thought. All your CSS has been moved to the head, or perhaps an external stylesheet which makes updating much easier and all your documents look neater.
There’s one problem, though: when using selectors such as div, body, table, td, input, a:link, etc – all of those HTML tags are effected and you may want one or some of those elements to have different properties. Not a problem. Just use id’s or classes,
If you have, say, one div which you want to apply specific styles, you would use an id. Your CSS would look something like:
<style type="text/css">
div {
all your general div properties and values
}
#div1
{font-color: blah;
font-family: blah,blah;
etc: blah;
}
<style>
The #div1 indicates an id, which can only be used once. “div1″ can be any name you choose. Just like any other selector, you add the properties you want to apply and voila.
In your actual body, the specific div tag will need to include id=”div1″
<div id="div1">
That’s fine, you say, but what if I want to apply specific properties to several HTML elements. Look no further, I tell you! This is time to use classes!
A class can be applied to more than one tag and, furthermore, can be used with one or more HTML elements. By that, I mean that you can apply the same class to a div and a textarea or a div and a span, etc.
<style type="text/css">
.class1
{
{font-color: blah;
font-family: blah,blah;
etc: blah;<
}
<style>
This class has no tag name, allowing you to use it for divs, tables, textareas, etc. All you need to do is insert class=”class1″ into the HTML tag.
<div class="class1">
Or, if you have a class which will only be applied to one HTML elements ( divs, spans, paragraphs, tables, links, etc) you can use the class selector with a tag name.
<style type="text/css">
p.class1<
{
<{font-color: blah;
font-family: blah,blah;
etc: blah;
}
<style>
Insert class=”class1″ into only paragraph tags, however many times you want.
<p class="class1">
Id’s and classes are useful because you can still apply general CSS to most specific HTML elements while having one (or several) of that element have a different, specific behaviour.
