logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Romance Movies
Creativity
Family Travel
Southwest USA
Irish Culture
Home Finance
Comedy Movies


dailyclick
All times in EST

Low Carb: 8:00 PM

Full Schedule
g
g HTML Site

BellaOnline's HTML Editor

g

How to Use the ID Selector in CSS

Guest Author - Diane Cipollo

In the last few tutorials, we discussed two out of the three types of CSS rules. The first type is the HTML selector which is based on and controls the style for the matching HTML tag. The second type is the class selector which works like a generic style that can be applied to any element on the webpage.

Now its time to discuss the third type of CSS rule which is called the ID selector. As with the class selector, the ID selector can be applied to any element on the webpage. However, it is meant to be used only once on a page. This makes the ID selector very useful for dynamic HTML and JavaScript. Theoretically, if you use the ID selector more than once on a page, the subsequent ones should be ignored by the web browser. However, this is not always the case. It is very difficult to rely on the predictability of web browsers. Therefore, when you choose to use the ID selector, be careful to use it only once. Let’s take a look at an example.

Basic Code
<style type="text/css">
<!--
#name_of_rule {property: value;}
-->
</style>

<tag id=“name_of_rule”> . . . </tag>

Example
<style type="text/css">
<!--
#special_text {color: #C00000;}
-->
</style>

<p id=“special_text”> . . . </p>


ID Selector
Inside the <style></style> tags, you will notice that the ID selector begins with the hash symbol (#) and that is followed with the name you assign to the ID selector. As with the class selector, you can use any name you want but it is best if the name indicates what the ID selector will be used for. In the example, we are using it to ID a special section of text.

{property: value;}
Also inside the <style></style> tags, the ID selector is followed by one or more property-value pairs which are placed between curly brackets. These property-value pairs set the characteristics of the style. In the example, the paragraph with the special_text ID selector will have red colored text.

<tag id=“name_of_rule”> . . . </tag>
When you use the ID selector in the body of the webpage, you will use the id attribute within the opening HTML tag. The value for the id attribute is the unique name given to the ID selector, in this case "special_text". (id="value") This is how the selector “connects” the style to that one HTML tag that you wish to apply the style to. In the example above, the ID selector will be placed inside only one <p id=“special_text”> tag on the webpage. Any other HTML tags on the webpage should not contain the ID selector inside the opening tag.




This site needs an editor - click to learn more!

Add How+to+Use+the+ID+Selector+in+CSS to Twitter Add How+to+Use+the+ID+Selector+in+CSS to Facebook Add How+to+Use+the+ID+Selector+in+CSS to MySpace Add How+to+Use+the+ID+Selector+in+CSS to Del.icio.us Digg How+to+Use+the+ID+Selector+in+CSS Add How+to+Use+the+ID+Selector+in+CSS to Yahoo My Web Add How+to+Use+the+ID+Selector+in+CSS to Google Bookmarks Add How+to+Use+the+ID+Selector+in+CSS to Stumbleupon Add How+to+Use+the+ID+Selector+in+CSS to Reddit




RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the HTML Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact BellaOnline Administration for details.

g


g features
What's Coming in HTML 5

What is FTP?

HTML Fundamentals - Tables

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor