HTML and CSS Reference
In-Depth Information
Don't worry if CSS and rules of precedence seem a bit overwhelming at this point. CSS
definitely becomes easier with practice. You'll get a chance to practice with the “cas-
cade” as you complete the next Hands-On Practice.
HANDS-ON PRACTICE 7.5
You will experiment with the “cascade” in this Hands-On Practice as you work with a
Web page that uses external, embedded, and inline styles. Begin by creating an external
style sheet called site.css that sets the
background-color
of the Web page to a shade of
yellow (
#FFFFCC
) and the text color to black (
#000000
). The code follows:
body { background-color: #FFFFCC;
color: #000000;
}
Next, create a Web page called mypage1.html that is associated with the file site.css
and has an embedded style that sets the text color to blue. The file mypage1.html will
contain two paragraphs of text. The XHTML used to code the first paragraph will not
use any styles. The XHTML used to code the second paragraph will use inline styles to
set the text color to red. The code for mypage1.html follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>External Styles</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="site.css" type="text/css" />
<style type="text/css">
body { color: #0000FF;
}
</style>
</head>
<body>
<p>This paragraph applies the external and embedded styles —
note how the blue text color that is configured in the embedded
styles takes precedence over the black text color configured in the
external stylesheet.</p>
<p
style="color:#FF0000"
>Inline styles configure this paragraph to
have red text and take precedence over the embedded and external
styles.</p>
</body>
</html>
Search WWH ::
Custom Search