How to Use a CSS ID Selector
By Stephen Bucaro
A CSS id selector, which uses the pound sign (#), can be used to select one, and only one
html element on a webpage (the element with its id attribute set to the same name
as the name after the Id selector). Shown below is html code for a div with its id
attribute set to "appbtn".
<div id="appbtn">This box was styled by the id selector #appbtn</div>
The id for an html element cannot begin with a number or a hyphen followed by a number.
The id cannot contain spaces, and the only punctuation characters allowed are the hyphen
(-) and the underscore (_).
Shown below is a CSS declaration block that uses the id selector to select and apply style
rules to the element with its id attribute set to "appbtn".
<style type="text/css">
#appbtn
{
width:130px;
height:60px;
padding:4px;
border-style:solid;
border-color:#009000;
background-color:#66ff66;
font-family:verdana;
font-size:14px;
box-shadow: 6px 6px 4px #a0a0a0;
}
</style>
Note: If you need to apply the same set of style rules to multiple html elements, even to
dissimilar elements, you should use a class selector. The class selector uses a dot (.)
in front of the name instead of a pound sign, and the html element to receive the class
used the class attribute rather than the id attribute.
More CSS Quick Reference:
• CSS background-clip Property
• Set Text Justification
• Grouped Selectors
• Descendant Selector
• Set the Border Width
• Use word-wrap Property to allow Line Breaks in the Middle of Words
• Set the Text Decoration
• CSS Units of Measurement
• Vertical Align an Element
• Set the Text Alignment
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
