Figuring the Percentages ............................................................................
I switch now from considering ways to specify text size, to the use of percent-
ages as a way of specifying the size or position of larger elements, such as
paragraphs. This next example illustrates how you can use percentages to
specify the width of a whole paragraph (not the font size of its text). In other
words, this percentage value will tell the browser when to break a line of text
into two lines (rather than how large to make the characters of text).
If you’re familiar with such classic HTML percentage specifications as
<p width=”80%”>, you’ll have no problems understanding how percentages
work in CSS. That HTML code in effect says, “Make this paragraph 80 percent
(or four-fifths) as wide as the user’s browser.” In other words, an element’s
percentage is in relation to its container or parent.
CSS percentages work the same way. Here’s an example that combines both
CSS and HTML percentage values.
<html>
<head>
<style>
p.csspercent {margin-right: 20%}
</style>
</head>
<body>
here’s some ordinary body text
<br>
<br>
<table width=”80%”>
text at eighty percent of the parent.
</table>
<p class=”csspercent”>
text at eighty percent of the parent.
</table>
</body>
</html>
First, this example displays unmodified, ordinary body text that fills the hori-
zontal space in the browser, and then a table defined as 80 percent breaks and
starts a new line when it reaches 80 percent across to the right side. Finally,
a paragraph behaves the same way as the table, breaking at the 80 percent
Chapter 6: Managing Details in Style Sheets 111
