HTML and CSS Reference
In-Depth Information
peting styles completely with your own desired style. This is where the !important keyword
comes in. Consider the following simple CSS example:
p {
font-family: serif;
color: blue;
}
p {
color: purple;
}
p{
color: yellow;
}
In this CSS code, you have three competing styles for the paragraph element. How the
browser renders this is based on the last style it reads for an element it applies to. So in
this case, the text in all the paragraphs will be yellow. However, if you want to override this
behavior and force the paragraph elements on the page to be purple, you simply add the
!important keyword to the style you want to have applied:
p{
font-family: serif;
color: blue;
}
p{
color: purple !important;
}
p{
color: yellow;
}
The paragraph elements will render purple and not yellow. The !important notation tells
the parser to give that style priority. This is a simplistic example, but the concept is the same
whether the styles are in a single page such as this or if they come from a variety of external
sources with conflicting styles.
Styling an element based on pseudo-elements and
pseudo-classes
The Objective 4.5 section, “Finding elements by using pseudo-elements and pseudo-classes”
demonstrated the use of pseudo-elements and pseudo-classes as selectors. In addition,
that section can be referenced for how to apply styles to elements based on the use of the
pseudo-class and pseudo-element selectors.
 
 
Search WWH ::




Custom Search