HTML and CSS Reference
In-Depth Information
}
.myfooter {
background:blue;
}
# footer1 {
font-size:12pt;
}
Then the footer will have all three styles applied to it:
font-size:12pt;
background:blue;
color:black;
This does not present a problem when the properties are unique, but what if the styles had
been defined as follows:
footer {
color:black;
}
.myfooter {
color:blue;
}
# footer1 {
color:red;
}
In this case, CSS needs to find the most precise rule, and select the appropriate color based
on that. There are several ways this is done.
Firstly, CSS uses a priority system to determine which rule has the most weight to it:
• If a match is based on element type, the rule is assigned 1 point.
• If it matches on class, the rule is assigned 10 points.
• If it matches on ID, the rule is assigned 100 points.
This means that a match against the following rule will be assigned 11 points (it has one
element match, and one class match):
footer .myclass
