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.

Comments On: Learn CSS, Selectors

· At last, someone who describes the process in plain and simple English. I am so...   >>> Post your comment now!