 |
 |
BasicsTypes of CSS
Class
When creating a new CSS rule in Dreamweaver, there are three initial choices one must make. the first is what type.
There are four types or selectors from which one can choose. The default in Dreamweaver and must commonly used type is the Class. When coded in a style sheet the code appears similar to the following with a "." (period) before the name.
.leftlink {
background-image: url(images/leftlink.jpg);
background-repeat: repeat-y;
}
When this declaration or rule is applied in the HTML document it will be an attritube of a tag and will appear typically as shown below. Very commonly one will find the class attritube attached to the <div> and <span> tags. This attribute may be used several times through an HTML document.
<span class="leftlink">some text or image</span>
ID
A second is the id. It is similar to the Class type except it can be used only once within an HTML document. Therefore, it is typically used when defining a particular portion of a layout, such as the top banner, or main content, or footer. In the style sheet it is coded with a "#" before the name as seen below.
#footer {
background-image: url(images/leftlink.jpg);
background-repeat: repeat-y;
}
When this declaration or rule is applied in the HTML document it will be an attritube of a tag and will appear typically as shown below. Very commonly one will find the id attritube attached to the <div> and <span> tags. This attribute may be used several times through an HTML document.
<div id="footer">some text or image</div>
Tag
A third selector type is the Tag. It is also similar to the Class type but it is applied only to a tag and will be affective every time the tag is used. The following example will repeat an image leftlinnk.jpg everytime a <p> is used in the HTML document.
p {
background-image: url(images/leftlink.jpg);
background-repeat: repeat-y;
}
Compound
This fourth option for a selector type can be a combination of several of the above selectors and can be very involved and complex. It is strongly suggested that you contact a reference such as w3schools (view here) for additional support. The following example will be affective every time class="leftlink" is an attritube of the <p> tag.
p.leftlink {
background-image: url(images/leftlink.jpg);
background-repeat: repeat-y;
}