HTML Class Attribute and CSS Class Selectors

By: Dusty Arlia
Published on February 6, 2013
Last Updated on Monday, July 06, 2015 at 10:22 PM
Total Updates: 4

Sometimes the best way to select a collection of HTML elements in a webpage is to use the class attribute. A class is the value set to the HTML element's class attribute. Here is an example of how you would set a class attribute:

<p>Let me tell you something <span class="emph">REALLY</span> important.</p>

Once the class attribute is assigned a value, you can use it as a CSS selector. In this case the class attribute is set to "emph". Here's how you would use this class in a CSS rule:

.emph {
font-size:larger;
font-color:red;
font-weight:bolder;
}

You will see that before the class name comes a period (.). .emph is referred to as the css selector. The period indicates that the CSS selector is a class. There can be multiple instances of that class on the webpage. If you only had a single HTML element that needed to be styled, use a CSS identifier instead.

There are times when you might want to use both a class attribute and an id attribute on the same element. Here is an example:

<h1>Title</h1>
<p class="article_body" id="first_paragraph">First paragraph.<p>
<p class="article_body">Middle of your article.<p>
<p class="article_body" id="last_paragraph">Last paragraph.<p>

Comments:

Ad:

Ad: