CSS Class and ID Selector

CSS Class Selector

You define a class selector when you want to set different properties on the same html element.
For instance, you want to define a paragraph with a font size of 12px and another paragraph with a font size of 10px. You can do so by defining separate classes of p.

p.paragraph1 { font-size: 12px }
p.paragraph2 { font-size: 10px; color: red; }

Then you can apply it to using the class property of your paragraphs in your html code.

<p class="paragraph1"> paragraph 1 </p>
<p class="paragraph2"> paragraph 2 </p>

You may also define a class independently and use it to any html element that applies to the defined properties. A class selector starts with a dot (.) and name it whatever you want. But it’s better if to name it descriptively.

.normaltext { color: #221133; font-size: 12px; }

It may be applied to the following:

<div class="normaltext">content here </div>

<p class="normaltext">paragraph here</p>

<p>

my <span class="normaltext">css</span> sample text

</p>

A good thing about classes is that you can use it several times in your pages and you won’t have to define redundant styles for html elements.

Note: In naming your classes, don’t begin it with a number coz it won’t work in Mozilla/Firefox browsers.

CSS ID Selector

The ID selector works like a class selector. But instead of a dot (.), it uses a sharp # sign. The only difference is, you can only use a defined id once in a single html file.

#page-container { width: 600px; margin: 0px; color: #442122; }

It can also be preceded by a tag to specify the html element to where the id selector will be applied.

div#page-container { width: 600px; padding: 0px; color: #442122; }

Use the “id” property of an html element to apply the defined id.

<div id=”page-container">
---your content here ---
</div>