An ID style is a kind of hybrid Cascading Style Sheet (CSS) style rule that combines certain elements of both custom class and tag redefine styles. With an ID style, the declarations defined in that style are automatically applied to any object on the page that has an id attribute that matches the id name in the ID style.
To style an object with an id attribute, you must first create a selector that includes the number symbol (#) followed by the id name, such as #sidebar, and then add as many declarations to the style as desired, as in the following example:
#sidebar {
border: 1px dashed #cad0d6;
margin: 0px 1px 0px 0px;
padding: 10px;
}
After you’ve created your style in the CSS, add the id attribute and style name value to the opening tag of the object or other HTML container tag that uses the style, as in
To illustrate this idea further, presume that you have a layer on your page (using the
When you give the
Here’s an example how this ID style is written in the CSS:
#popcornmakers {
font-family: Georgia, "Times New Roman", Times, serif;
background-color: #FFC;
border: 1px solid #039;
position: absolute;
width: 330px;
height: 180px;
z-index: 1;
left: 50px;
top: 50px;
padding: 10px;
}
And here is what the HTML markup looks like:
<div <b>id="popcornmakers"</b>> <h3>Popcorn Makers</h3> <ul> <li>Presto Hot Air Popcorn Maker</li> <li>Classic Popcorn Popper</li> <li>Retro Popcorn Maker</li> <li>West Bend Housewares Popcorn Maker</li> <li>Cuisinart EasyPop Popcorn Maker</li> </ul> </div>
Just like the tag redefine selector, which automatically changes how contents surrounded by a particular tag appear, anytime that a style name uses the #id syntax, the style definition is automatically applied to the object with the matching id attribute.