Chapter 8. Cascading Style Sheets
8.1.2. Document-Level Style Sheets
<html>
<body>
<head>
<title>All True Blue</title>
<style type=”text/css”>
<!–
/* make all level-1 headers blue */
h1 {color: blue; font-style: italic}
–>
</style>
</head>
<body>
<h1>I’m so bluuuuoooo!</h1>

<h1>I am ba-loooooo, tooooo!<h1/>
</body>
</html>

812

8.1.3.1. Linked external style sheets
<html>
<body>
<head>
<title>Style linked</title>
<link rel=stylesheet type=”text/css”
href=”http://www.kumquats.com/styles/gen_styles.css&#8221;
title=”The blues”>
</head>
<body>
<h1>I’m so bluuuuoooo!</h1>

<h1> I am ba-loooooo, tooooo!<h1>
</body>
</html>

8131

8.1.3.2. Imported external style sheets
<html>
<body>
<head>
<title>Imported style sheet</title>
<style>
<!–
@import url(http://www.kumquats.com/styles/gen_styles.css);
@import “http://www.kumquats.com/styles/spec_styles.css&#8221;;
body {background: url(backgrounds/marble.gif)}
–>
</style>
</head>
</body>
</html>

8.1.5. Linked Versus Imported Style Sheets
<html>
<head>
<link rel=stylesheet href=sheet1.css type=text/css>
<link rel=stylesheet href=sheet2.css type=text/css>
<style>
<!–
@import url(sheet3.css);
@import url(sheet4.css);
–>
</style>
</head>
</html>

8.3.1. Regular Classes
<html>
<body>
<style>
<!–
p.abstract {font-style: italic;
margin-left: 0.5cm;
margin-right: 0.5cm}
p.equation {font-family: Symbol;
text-align: center}
h1, p.centered {text-align: center;
margin-left: 0.5cm;
margin-right: 0.5cm}
–>
</style>
</body>
</html>

<html>
<body>
<p class=abstract>
This is the abstract paragraph. See how the margins are indented?
</p>
<h3>The equation paragraph follows</h3>
<p class=equation>
a = b + 1
</p>
<p class=centered>
This paragraph’s text should be centered.
</p>
</body>
</html>

8311

8.3.4.3. Nesting and language pseudo-classes
<html>
<body>
div > p:first-child {font-style: italic}
<div>
<p>
I get to be in italics.
</p>
</div>
<div>
<h2> New Division</h2>
<p>
I’m in plain text because my paragraph is a second child of the division.
div:lang(it) {font-family: Roman}
</body>
</html>

8343

8.4.4.3. The background-image property
<html>
<body>
<table style=”background-image: url(backgrounds/woodgrain.gif)”>
li.marble {background-image: url(backgrounds/marble.gif)}
<h2>Here’s what’s for dinner tonight:</h2>
<ul>
<li class=”marble”>Liver with Onions</li>
<li class=”marble”>Mashed Potatoes and Gravy</li>
<li class=”marble”>Green Beans</li>
<li class=”marble”>Choice of Milk, Tea, or Coffee</li>
</ul>
<h2>And for dessert:</h2>
<ul>
<li>Creamed Quats in Milk (YUM! YUM!)</li>
</ul>
</body>
</html>

8475