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

There's a big difference between the HTML class attribute and the ID attribute. The first difference is that the class attribute in HTML means that this element has a classification. In other words, this element has a class of NavyArial, which as we know defines a Navy text, Arial and .8em font-size. You can use this class as value to any element in the document, but ID does not work like this.

Actually, the term ID means identifier so, for example, your ID is your Social Security number -- this number is only yours and we can't find someone else who has the same number. In HTML the attribute ID's value is set once for each element, and it must be unique in the document. This is an obvious different between the class selector and the ID selector. The value of the ID attribute doesn't permit any white spaces, so we can't combine ID selectors as we did with class selectors. If you have used the same ID value for more than one element, web browsers will apply the styles for the elements, although this is far from what should happen.

To create an ID selector, use the hash mark (#) instead of the dot (.) and you are done, but you must set the value of the HTML ID attribute to the ID selector name. Here is an example:

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

Now you need to modify the HTML code, remove the class attribute of the <ol> element and put the ID attribute to be the following:

<ol ID="OrderedList">

Note that we didn't include the # in the name of the ID selector, in much the same way we didn't include the dot (.) in the name of the class selector.


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

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