HTML and CSS Reference
In-Depth Information
The XHTML code follows:
<body>
<div id="wrapper">
... page content goes here
</div>
</body>
HANDS-ON PRACTICE 3.8
In this Hands-On Practice you will code CSS properties to configure a centered page
layout. We'll use the files from Hands-On Practice 3.7 as a starting point. Create a new
folder called trillium2. Locate the Chapter3/3.7 folder in the student files. Copy the
index.html, services.html, and trillium.css files to your trillium2 folder. Open the
trillium.css file in a text editor. Create an id named
container
. Add the
margin-left
,
margin-right
, and
width
style properties to the style rules as follows:
#container { margin-left: auto;
margin-right: auto;
width:80%;
}
Save the file.
Open the index.html file in a text editor. Add the XHTML code to configure a
<div>
assigned to the id
container
that “wraps” or contains the code within the body sec-
tion. Save the file. When you test your index.html file in a browser, it should look simi-
lar to the one shown in Figure 3.18. The student files contain a sample solution in the
Chapter3/3.8 folder.
The W3C has a free Markup Validation Service (
http://jigsaw.w3.org/css-validator/)
that
will validate your CSS code and check it for syntax errors.
CSS validation
provides stu-
dents with quick self-assessment—you can prove that your code uses correct syntax. In
the working world, CSS validation serves as a quality assurance tool. Invalid code may
cause browsers to render the pages slower than otherwise.
HANDS-ON PRACTICE 3.9
In this Hands-On Practice you will use the W3C CSS Validation Service to validate an
external CSS style sheet. This example uses the color.css file completed in Hands-On
Practice 3.6 (student files Chapter3/color.css). Locate color.css and open it in Notepad.
We will add an error to the color.css file. Find the
body
selector style rule and delete the
Search WWH ::
Custom Search