Click and drag to scroll left and right to view all 12 figures.
<!-- figure 8.8 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p { color:red; }
p { color:red; }
</style>
</head>
<body>
<h3>Last rule principle</h3>
<p>This text is styled by the last CSS rule.</p>
</body>
</html>
<!-- figure 8.9 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p { color:red; }
p.larger { color:green; }
div#largest p { color:blue; }
</style>
</head>
<body>
<h3>Specificity principle</h3>
<div id="larger">
<p class="largest">Example</p>
</div>
</body>
</html>
<!-- figure 8.10 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p { color:red !important }
p.larger { color:green; }
div#largest p { color:blue; }
</style>
</head>
<body>
<h3>!important exception</h3>
<div id="larger">
<p class="largest">Example</p>
</div>
</body>
</html>
<!-- figure 8.11 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
* { color:red }
p { color:blue }
div p { color:orange }
#green { color:green }
</style>
</head>
<body>
<h3>Specificity levels</h3>
<div>
<p id="green" class="yellow" style="color: purple">CSS Specificity Hierarchy</p>
</div>
</body>
</html>
<!-- figure 8.12 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p { color:blue; }
p { border-style:dotted; }
</style>
</head>
<body>
<h3>Property inheritance</h3>
<p>The color property is an inherited property,
so <em>the content of the em element </em> is blue
just like that of the parent p element...</p>
</body>
</html>
<!-- figure 8.14 & figure 8.15 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body {
font-family: Arial;
color: brown;
padding: 20px;
margin: 20px;
}
div.part1 {
border: 2px solid orange;
background-color: white;
}
div.part2 {
border: 2px solid orange;
background-color: white;
padding: inherit;
margin: inherit;
}
</style>
</head>
<body>
<h2>CSS Inheritance</h2>
<div class="part1">
<p>This element has been forced to inherit the padding and margin properties
of the body element</p>
</div>
<div class="part2">
<p>This element has not inherited the padding and margin properties of the
body element</p>
</div>
</body>
</html>
<!-- figure 8.17 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Inline style attribute</h3>
<p style="color: red">This paragraph element is styled with inline CSS, using the
style attribute.</p>
<p>This paragraph element is not styled.</p>
</body>
</html>
<!-- figure 8.19 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p.first_para { color: red;
}
</head>
<body>
<h3>Inline style element</h3>
<p class="first_para">This paragraph element is styled with inline CSS, using the
style attribute.</p>
<p>This paragraph element is not styled.</p>
</body>
</html>
<!-- figure 8.20 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p{ color: blue;}
</style>
</head>
<body>
<h3>The scoped attribute</h3>
<div>
<p>This text is blue because it is styled by the CSS rule in the head element.</p>
<div>
<style scoped>
p{ color: red;}
</style>
<p>This text is red because it is styled by the CSS rule in the direct parent
div element of this paragraph element.</p>
</div>
<div>
<p>This text is blue because it is also styled by the CSS rule in the head
element.</p>
</div>
</div>
</body>
</html>
<!-- figure 8.22 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<link href="figure 8.23.css" rel="stylesheet" type="text/css">
</head>
<body>
<h3>External CSS</h3>
<p>Using external CSS is the <em>recommended practice</em> for adding styles to a
website.</p>
</body>
</html>
/* figure 8.23 */
body { font-family: Arial; background-color: lightgrey; }
h3 { color: blue; }
em { color: red; }
<!-- figure 8.25 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<link href="default.css" rel="stylesheet" type="text/css" title="Default style">
<link href="basic.css" rel="alternate stylesheet" type="text/css" title="Basic">
<link href="classy.css" rel="alternate stylesheet" type="text/css" title="Classy">
</head>
<body>
<h3>Alternative stylesheets</h3>
<p>You have a choice of multiple styles to view this page via the View menu.</p>
</body>
</html>