Home arrow Style Sheets arrow Page 3 - Learn CSS, Selectors
STYLE SHEETS

Learn CSS, Selectors


So far in our series covering CSS, we have used only the simplest type of selector. There are many other types of selectors, which give you a lot of power to adjust the styling of your Web documents. In this article, you will learn about the group, universal, class and ID selectors.

Author Info:
By: Michael Youssef
Rating: 5 stars5 stars5 stars5 stars5 stars / 49
June 06, 2005
TABLE OF CONTENTS:
  1. · Learn CSS, Selectors
  2. · The Universal Selector
  3. · The Class Selector
  4. · The ID Selector

print this article
SEARCH DEVARTICLES

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.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials