HTML and CSS Reference
In-Depth Information
CSS and (X)HTML Elements Fundamentals
CSS relies on markup. As mentioned a number of times already, incorrect markup is likely
going to result in incorrect style. However, the symbiotic relationship between (X)HTML
and CSS isn't one way. It is quite possible to misuse markup due to the implications of CSS.
In this section, we explore just how dependent the two technologies are on each other,
discuss how CSS can fundamentally alter the perceived nature of markup, and encourage
Web developers to use these newfound powers for good not ill.
Physical Markup and Overriding Expected Results
One potential problem with style sheets and HTML is that the default rendering of an element
might get in the way. For example, consider the situation in which you apply a style rule to
a
<strong>
tag like so:
<strong style="color: red;">
I am strong!
</strong>
While this will put the text contents in red as expected, it will also probably be bold
because that is the typical rendering of this (X)HTML element. Designers have to consider
these default renderings as rules are added; a careless document author can create a potentially
confusing use of markup using style sheets. Here we change two tags to act the opposite of
how you might expect them to act:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
Improper Overrides
</title>
<style type="text/css" media="all">
b {font-style: italic; font-weight: normal;}
i {font-style: normal; font-weight: bold;}
</style>
</head>
<body>
<p>
I am a
<b>
bold tag
</b>
and I am an
<i>
italic tag
</i>.</p>
</body>
</html>
O
NLINE
http://htmlref.com/ch4/improperoverride.html
