How to Create a Media Query in Dreamweaver
CSS Code Hinting in Dreamweaver
How to Apply CSS3 Effects and Transforms in Dreamweaver

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

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.

image0.jpg

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.

image1.jpg

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>
 <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.

blog comments powered by Disqus
Create a New Style Sheet in the CSS Styles Panel
Preview HTML Documents on a Cellphone, Tablet, or Laptop in Dreamweaver
CSS3 Properties
How to Create a Resizable Interface in CSS3
How to Work with Slider in CSS3
Advertisement

Inside Dummies.com