Home arrow Style Sheets arrow 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
(Page 1 of 4 )

We have been using the simplest type of selector in CSS, namely the element selector, like p, h4, body and so on, which apply certain style and formatting rules to all occurrences of the element in the document. This is not intuitive. CSS introduces other selector types which we will look at them in this article and the next one. In this article, the fourth in our series, we will discuss the group, universal, class and ID selectors, and in some of the examples we will create an XML file (besides the HTML file) and use CSS with it. So let's begin.

Grouping  Selectors

CSS is a powerful design language, as you will see in this article and until we finish the series. One excellent feature of CSS is the ability to group selectors and declarations. By grouping selectors (we will see the syntax in a minute), we can apply certain declarations to a group of selectors. I think it's easier to explain with an example.

Suppose that we have a simple Web page that has one <h1> element, two <p> elements, one <a> and an Ordered List <ol>. We need to apply some formatting rules to these elements: we need the <h1> element to have a Greenyellow background (this is a named color from the CSS 3.0 Specifications), a blue text, an Arial font and a font size that is greater than the default font by 30 percent (which we can accomplish using the em or the percentage, but I will use em in this example). We need the paragraphs to have blue text, Arial font and a size of 90 percent of the default font size (this means .9em). We would like the hyperlink to have a different color, something with a good contrast, like red. The ordered list will have a font size of 80 percent of the default font (.8em), the font will be also Arial and it will have a navy color. Let's write the CSS code for this elements.

h1
{
  color: blue;
}
h1
{
  background-color: GreenYellow;
}
h1
{
  font-family: Arial;
}
h1
{
  font-size: 1.3em;
}
p
{
  color: blue;
}
p
{
  font-family: Arial;
}
p
{
  font-size: .9em;
}
a
{
  color: red;
}
ol
{
  color: navy;
}
ol
{
  font-family: Arial;
}
ol
{
  font-size: .8em;
}

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>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>If you want to read the CSS Specification then <a
href="http://www.w3c.org">click here</a>
    </p>
    <ol>
      <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>
 

And here's the result:

As you can see, the way we wrote the CSS code is not intuitive. We have four separate rules for the four declarations applying to the h1 element selector (the same applies to the other selectors in the file, except for the a selector). Also note that the Selectors have similar values for some properties, such as the color and the font-family properties. CSS permits us to write the above CSS file as follows:

h1,p
{
  color: blue;
}
h1
{
  background-color: GreenYellow;
}
h1, p, ol
{
  font-family: Arial;
}
h1

  font-size: 1.3em;
}
p
{
  font-size: .9em;
}
a
{
  color: red;
}
ol
{
  color: navy;
}
ol
{
  font-size: .8em;
}

We have made some changes to the CSS code, but if you refresh or reload the web page you will have the same effects as before. We have grouped the selectors h1 and p to have a blue text, and we have grouped the selectors h1, p and ol to have a font-family of Arial. To group selectors, you need to separate selectors with a comma. You can put as many selectors as you need. We said that we can group declarations too, so let's modify the CSS code to group declarations.

h1,p
{
  color: blue;
  font-family: Arial;
}
h1
{
  background-color: GreenYellow;
}
h1
{
  font-size: 1.3em;
}
p
{
  font-size: .9em;
}
a
{
  color: red;
}
ol
{
  color: navy;
}
ol
{
  font-family: Arial;
}
ol
{
  font-size: .8em;
}

What we have done in this CSS code is modify the group selectors to have more than one declaration, because both h1 and p have a font-family of Arial and blue text. Note that we didn't add the selector ol to the group; it has a navy text color, which is different from the color we have for the group selectors (which is blue). To group declarations, just follow each one with the semicolon in the group the selectors rule.

There's one more thing that we can do about this CSS code. Let's take a look:

h1,p
{
  color: blue;
  font-family: Arial;
}
h1
{
  background-color: GreenYellow;
  font-size: 1.3em;
}
p
{
  font-size: .9em;
}
a
{
  color: red;
}
ol
{
  color: navy;
  font-family: Arial;
  font-size: .8em;
}

I have simply grouped all the declarations that have the same element selector into one rule. Instead of writing separate rules for the ol and h1 selectors, we can include all the declarations in one rule for each selector, as you can see above.

Note that you have two occurrences of h1. The first occurrence is in the group selector, and the second occurrence is in the h1 element selector. The occurrence in the group selector states that the h1 has the same styling properties as the p element; the second occurrence adds some other styling properties that pertain to the h1 only. In other words, the h1 has some styling information in two places in the style sheet; the first is in the group selector and the second in the h1 element selector. For p it is the same story; it has some styling properties in the group selector and in the p element selector, which both form the properties that will be set for paragraphs in the HTML referencing Web page.


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-2014 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials