8.5. Adding style to the lounge
Now that you've got the <style> element in your XHTML, you're going to add some style to the Lounge to get a feel for writing CSS. This design probably won't win you any "design awards," but you gotta start somewhere.
The first thing we're going to do is change the color
(something to match those red lounge couches) of the text in the paragraphs. To do that, we'll use the CSS color property like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1"/>
<title>Head First Lounge</title>
<style type="text/css">
p {
Here's the rule that is going to specify the font color of the
paragraphs.
We're selecting just the <p> element to apply this style to.
color: maroon;
The property to change the font color is named "color" (you might think
it would be "font-color" or "text-color", but it's not).
We're setting the text to a lovely maroon color that happens to match
the lounge couches.
}
</style>
</head>
<body>
<h1>Welcome to the Head First Lounge</h1>
<p>
<img src="images/drinks.gif" alt="Drinks"/>
The p selector selects all the paragraphs in the XHTML.
</p>
<p>
Join us any evening for refreshing
<a href="beverages/elixir.html">elixirs</a>,
The p selector selects all the paragraphs in the XHTML.
conversation and maybe a game or two
of <em>Dance Dance Revolution</em>.
Wireless access is always provided;
BYOWS (Bring your own web server).
</p>
<h2>Directions</h2>
<p>
You'll find us right in the center
The p selector selects all the paragraphs in the XHTML.
of downtown Webville. If you need
help finding us, check out our
<a href="about/directions.html">detailed directions</a>.
Come join us!
</p>
</body>
</html>
| 
No comments:
Post a Comment