3.4 Configuring Color with Embedded Styles^83The Style Element
Embedded styles are placed within a <style>elementlocated in the header section of a
Web page. The opening <style>tag begins the embedded style rules and the closing
</style>tag ends the area containing embedded style rules. When using the <style>
tag, you do not need the styleattribute. However, the <style>tag does use a type
attributethat should have the value of "text/css".Figure 3.5
Web page using
embedded styles
The following code is an example of a Web page (shown in Figure 3.5) that uses
embedded styles to set the text color and background color of the page.
<!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>Embedded Styles</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
body { background-color: #CCFFFF;
color: #000033;
}
</style>
</head>
<body>
<h1>Embedded Styles</h1>
<p>This page uses embedded styles.</p>
</body>
</html>
Notice the way the style rules were coded with each rule on its own line. The format-
ting is not required for the styles to work, but it makes the styles more readable and
easier to maintain than one long row of text. The styles are in effect for the entire Web
page document because they were applied to the <body>tag using the bodyselector.HANDS-ON PRACTICE 3.2
Now let’s see a working example. Launch Notepad and open the starter.html file from
the Chapter3 folder in the student files.
Save your page as embedded.html and test it in a browser. Your page should look simi-
lar to the one shown in Figure 3.6.