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".
box-shadow: 6px 6px 4px #a0a0a0;
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:
• Set an Element's Display Property
• Use an Embedded Style Sheet
• Grouped Selectors
• Set the Background Color
• Set an Element's Padding
• Set a Background Image
• Set the Font Properties
• Define CSS Rollover Effects
• Set the Text Alignment