HTML and CSS Reference
In-Depth Information
HANDS-ON PRACTICE 3.1
By now you are aware that the best way to learn new coding technologies is to practice
them. In this Hands-On Practice you will configure a paragraph using inline styles. The
styles will specify a green background with white text. A sample is shown in Figure 3.4.
Figure 3.4
Web page using
inline styles
Launch Notepad and type in the following XHTML:
<!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>Inline Styles</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<p style="background-color:#00FF00;color:#FFFFFF">This paragraph is
using an inline style.</p>
<p>This paragraph is NOT using an inline style.</p>
</body>
</html>
Save your file as inline.html. Test your page in a browser and compare it with Figure
3.4. The student files contain a sample solution at Chapter3/inline.html. Note that the
paragraph that used a style has the green background and white text. The paragraph
that does not use a style is displayed using default browser settings.
In the previous Hands-On Practice you added inline styles for one of the paragraphs.
You needed to code a style attribute on the paragraph element. But what if you needed
to configure the styles for ten or twenty paragraphs instead of just one. Using inline
styles, you might be doing a lot of repetitive coding! While inline styles apply to one
XHTML element, embedded styles apply to an entire Web page.
Search WWH ::
Custom Search