Home arrow Style Sheets arrow Page 2 - Learn CSS, Selectors

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
  1. · Learn CSS, Selectors
  2. · The Universal Selector
  3. · The Class Selector
  4. · The ID Selector

print this article

Learn CSS, Selectors - The Universal Selector
(Page 2 of 4 )

CSS supports a selector called the universal selector (and it's supported by almost all the browsers), which you can use to apply certain styling properties to each and every element in the document. That's why it's called universal, because it applies the styling properties to all of the elements in the Web page. You need to understand inheritance and cascade to understand how to use the universal selector; I will discuss these concepts a little later in the series. 

Let's look at an example of how to use the universal selector. Replace the above CSS code with the following, and reload the Web page.

  font-size: .9em;
  font-family: Arial, Tahoma;
  color: blue;

As you have guessed, the asterisk symbol is the universal selector. Here we are saying that we want all of the elements in the referencing web page to have a font-size of 90 percent of the default font size, a font-family of Arial with an alternative font of Tahoma and blue text. Here's the resulting Web page.

blog comments powered by Disqus

- 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 

Developer Shed Affiliates


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