HTML and CSS Reference
In-Depth Information
In Example 14.18, the paragraph style has been defined in a CSS. But later in the body
of the document, the
<span>
tag is used to override the font size and to add margins to
the text.
EXAMPLE
14.18
<html>
<head><title>Margins</title></head>
<style type="text/css">
1
body { margin:10%;
border-width: 10px; border-style:solid;
border-color: white; padding:5px;}
2
p { color=black;
font-size: 22pt;
margin-left:10;
margin-right:10;
padding:5px;
border-style:groove;
border-color:white;
background-color:cyan;}
</style>
<body bgcolor=blue>
<p>
3
<span style="margin-left:10%;font-size:26pt;">
The Three
Little Bears
</span>
4
</p>
<p>
Once upon a time there were three little bears,
Mama bear, Papa bear, and Baby bear.
They lived very happily in the deep woods.
</p>
<p>And then there was Goldilocks!</p>
</body>
</html>
EXPLANATION
1
The style rule for the
body
element is defined. It will have a margin distance in-
creased by 10% on all sides and a solid, white border with a padding of 5 pixels
between the margin and the border. Margin borders will differ in appearance de-
pending on your browser.
2
The style rule for the paragraph defines black text of a 22-point font, with both
right and left margins of 10 pixels, contained within a grooved, white border,
against a cyan background.
Continues
