HTML and CSS Reference
In-Depth Information
When a CSS statement is provided as the value of an HTML element's
style
attribute, only the property names and value expressions are used; the selector
expression and curly braces are omitted. he CSS statement just shown applied
to a particular level-two heading in a document would be written like this:
<h2 style="font-weight:bold; color:red;">...</h2>
CSS rules in the value of an HTML element's
style
attribute take prece-
dence over any rules previously in efect for that element's properties. In the
following HTML, the level-two heading will be bold, italic, and blue when
viewed in a typical browser:
<!DOCTYPE html>
<html>
<head>
<title>Example 3.0</title>
<style type="text/css">
h2 { font-style: italic; color: red; }
</style>
</head>
<body>
<h2 style="color:blue; font-weight: bold">
Earthquakes!
</h2>
</body>
</html>
he normal order of the cascade can be overridden by adding an exclama-
tion point (!) and the
important
keyword ater a CSS rule. For example, chang-
ing the rule for the
h2
element in the preceding code to this
h2 { font-style: italic; color: red !important; }
instructs the browser to ignore any further settings of
h2
elements'
color
prop-
erty, unless those settings also include the
important
keyword. As a result, the
level-two heading will be bold italic and red.
he
important
keyword becomes very useful with content management sys-
tems and blogging sotware. It is oten common with such sotware for plugins
and other code to dynamically insert CSS
style
elements and attributes
directly into the document's
head
and
body
elements. If you only have access to
the style sheet, and your changes are blocked by the generated CSS rules ater
the style sheet is loaded, using
!important
can put you back in control.
