Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

How to Use a CSS ID Selector

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:
• Set a Background Image
• Set the Type of Bullet Used in List
• Descendant Selector
• Use word-wrap Property to allow Line Breaks in the Middle of Words
• Use Inline Style
• Set an Element's Padding
• Grouped Selectors
• Set the Text Color
• Set an Element's Clipping
• Set the Border Properties

RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro



Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2018 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268