How to Create ID Styles in Cascading Style Sheets (CSS) - dummies

How to Create ID Styles in Cascading Style Sheets (CSS)

By Sue Jenkins

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 <div id=”sidebar”>. The <div> tag is a block-level container. Typically, block-level tags contain inline elements and other block-level elements.

To illustrate this idea further, presume that you have a layer on your page (using the <div> tag) that contains a header that says “Popcorn Makers” and below it a listing of five different brands of popcorn makers for sale.


When you give the <div> layer an ID attribute of popcornmakers, using the syntax id=”popcornmakers”, and create a style using the syntax #popcornmakers, that ID style is automatically applied to the layer.


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 id="popcornmakers">
 <h3>Popcorn Makers</h3>
 <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>

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.