In CSS you can identify what a style applies to in 3 ways (from a basic level):
1. Tag name: Type just the letters of the tag the style applies to:
TD{
background-color: #FF0000;
}
2. Class name. Identify the tag's class that the style applies to. For this you need to specify the class in the element's markup (<TD class="RedBG">):
.RedBG{
background-color: #FF0000;
}
3. Object ID. Identifies a specific element by ID to which the style applies. For this you specify the tags ID attribute (<span id="PageHeader">):
#PageHeader{
font-size: 36px;
color: #00FF00;
}
Usually, you would have only one element with that ID on the page otherwise you'd have a ID conflict that could cause other problems.
You can combine style identifiers to be more specific:
TABLE#MasterLayout{}
TD.Header{}
and chain them together to create complex styles with simple style syntax:
TABLE#MasterLayout TD.Header{}
In this case, the "TD.Header" style will be different for TD tags with the "Header" class when they exist under a table with the "MasterLayout" ID.
-
Peter