Answer
|
In the style sheet, you specify a subclass of the <p>
(paragraph) command, for example with a statement like this in the style
sheet:
P.small {font-size: 12px}
You then refer to this in the body with a statement like
this:
<P class="small">This
is small text.</p>
Here is a complete example of a HTML document using style
sheets to get different paragraphs in different font sizes:
|
<HTML><HEAD>
<TITLE>CSS
Demo</TITLE>
<STYLE type="text/css">
P.small { font-family: Verdana, Arial, sans-serif,
Geneva,
Helvetica; font-size: 12px}
P.big { font-family: Verdana, Arial, sans-serif,
Geneva,
Helvetica; font-size: 20px}
P { font-family: Verdana, Arial, sans-serif,
Geneva,
Helvetica; font-size: 16px}
</STYLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<P class="big">This is big text.</p>
<P>This is normal text.</p>
<P class="small">This is small text.</p>
</BODY></HTML>
|
The following alternative notation will also work:
|
<HTML><HEAD>
<TITLE>CSS
Demo</TITLE>
<STYLE type="text/css">
P#small { font-family: Verdana, Arial, sans-serif,
Geneva,
Helvetica; font-size: 12px}
P#big { font-family: Verdana, Arial, sans-serif,
Geneva,
Helvetica; font-size: 20px}
P { font-family: Verdana, Arial, sans-serif,
Geneva,
Helvetica; font-size: 16px}
</STYLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<P id="big">This is big text.</p>
<P>This is normal text.</p>
<P id="small">This is small text.</p>
</BODY></HTML>
|
Both these alternatives will look something like this
on the screen:
|
This is big text.
This is normal text.
This is small text.
|
|