<class home>  <styles>   <back   next>

Styles

ID vs. Class:

Most custom styles use the Class attribute. You can also create custom styles with the ID attribute. The difference is that Javascript can talk to the ID attribute and it will be useful if you use layers in the future because they use the ID tag as well.

This is often used with the "div" prefix.


Creating an ID attribute:

1. Open the New Style Sheet Dialog Box.

2. Select the "CSS Selector" radio button.

3. Type in a name for you ID selector, using a # sign in front of the word.
ex. #allfancy

4. Create the style you want in the Style Definition Dialog box.

5. To use the style you must enter it in the code manually using the p, span or div tag. Such as:

<p id="allfancy">paragraph</p>
or
<span id="allfancy">some words</span>
or
<div id="allfancy">block of text</div>


It should look like this in the style sheet file:

#allfancy {
margin: 2px;
padding: 2px;
border: 2px solid #000000;
visibility:visible;
background-color: #00FF66
}

or to just apply it to div tags:

div#allfancy {
margin: 2px;
padding: 2px;
border: 2px solid #000000;
visibility:visible;
background-color: #00FF66
}