Learn CSS, Selectors - The Class Selector
(Page 3 of 4 )
The word class means a class of styles that you write in CSS to be applied to any element in the markup document, regardless of its type. In other words, the class selector is a way to apply style properties on various markup elements that will use the class name as a value to the class attribute. So you can have a class selector called FontClass that sets some font properties and use it with some HTML elements like h1, h4, p, ol and so on through the use of the element's class attribute.
To create a class selector, you need to give it a name and precede it with a dot (.), then use this name from the HTML code through the class attribute of any element. Let's modify our example to use some class selectors:
h1,p
{
color: blue;
font-family: Arial;
}
h1
{
background-color: GreenYellow;
font-size: 1.3em;
}
p
{
font-size: .9em;
}
a
{
color: red;
}
.NavyArial
{
color: navy;
font-family: Arial;
font-size: .8em;
}
.HClass
{
border: .05em solid black;
}
And here's the HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="Selectors.css" type="text/css">
<title>CSS Selectors</title>
</head>
<body>
<h1 class="HClass">CSS is the web design future</h1>
<p>Yes CSS is the future of web design because it gives web designer a great set of formatting and styling techniques and in the same time it's a very easy language to learn and to master in no time. CSS code is made up of Selectors which are those elements that will
have certain formatting properties set through the use of CSS Rules.
</p>
<p class="NavyArial HClass">If you want to read the CSS Specification then <a href="http://www.w3c.org">click here</a>
</p>
<ol class="NavyArial">
<li>Read about Selectors</li>
<li>Pseudo Selectors</li>
<li>Colors</li>
<li>The CSS Box Model</li>
<li>Text Manipulation with CSS</li>
</ol>
</body>
</html>
Okay let's explain it step by step. We have modified the CSS code by removing the ol element selector and adding two new class selectors (.NavyArial and .HClass). The class .NavyArial styles the font as Arial, .8em and Navy, and the class .HClass sets the border property to size .05em, solid and Black color. What this actually means is that any element in the markup that use the class name (or names, as we are going to see) as a value from the class attribute will have the styling properties of the class.
In the HTML code, we use the class attribute of the h1 element to set it to HClass. Note that the h1 already has styling properties that come from the group selector and from the h1 element selector. Now, by referencing the HClass class, the h1 has styles properties from three places instead of two. That's why we can see that the element <h1> has a blue text, Arial font (from the group selector), a Greenyellow background and a font-size of 1.3em (From the h1 element selector). Now it has .05em solid black border (from the .HClass).
Note that you use the class name without the dot, so in the <h1> element we use the class .HClass as <h1 class="HClass">. The <ol> element uses the class .NavyArial to set some styling properties. Now any element in the Web page can use this class if it needs these styling properties; this is what the second paragraph used, but with some extending. This is the code of the class attribute of the second <p> element <p class="NavyArial HClass">. As you can see, the class attribute's value contains both the NavyArial and the HClass classes separated by one space. This means that the <p> element will use the styling properties of both classes. So browsers give you the ability to use more than one class in the class attribute's value, and it will combine the styles of both.
You can state that a certain class selector is permitted to exist inside a certain markup element (or a group of elements) as follows:
h1,p
{
color: blue;
font-family: Arial;
}
h1
{
background-color: GreenYellow;
font-size: 1.3em;
}
p
{
font-size: .9em;
}
a
{
color: red;
}
P, ol.NavyArial
{
color: navy;
font-family: Arial;
font-size: .8em;
}
p.HClass
{
border: .05em solid black;
}
Reload the page:
Although we have used the class HClass with the <h1> element, it didn't work, because in the CSS code we stated that we want the HClass class to exist only in the context of a <p> element. On the other hand, the NavyArial class works well with both the <p> and the <ol> elements because we stated that we need this class to exist inside the context of a paragraph or an ordered list only. The syntax is very similar to the group selector with one exception: the use of the dot of the class name.
There's one more thing, you can state that you want certain styling properties for the elements that use both classes together, like the second element <p class="NavyArial HClass"> in the above HTML code. Add the following rule to the CSS file:
.NavyArial.HClass
{
background-color: YellowGreen;
}
Note that there are two dots here. The first one pertains to the NavyArial class and the second one to the HClass class. The second paragraph element now has a background-color of YellowGreen because it refers both classes.
Next: The ID Selector >>
More Style Sheets Articles
More By Michael Youssef
/ 22 
