HTML and CSS Reference
In-Depth Information
Adding style to the lounge
Now that you've got the
<style>
element in your HTML, 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>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
Head First Lounge
</title>
<style>
Here
's the
rule t
hat
is go
ing to
specif
y
Th
e property
to change t
he font col
or is
na
med “color”
(you might
think it wo
uld be
the
font
color o
f the
par
agraph
s.
“fo
nt-color” o
r “text-co
lor”, but it'
s not).
p {
color: maroon;
}
We
're sel
ecting
just
th
e <p>
elemen
t to
ap
ply th
is style
to.
</style>
</head>
<body>
<h1>
Welcome to the Head First Lounge
</h1>
<p>
<img src="images/drinks.gif" alt="Drinks">
</p>
<p>
Join us any evening for refreshing
<a href="beverages/elixir.html">
elixirs
</a>
,
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 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>
