Style Sheets | Customizing Other Tags
Customizing Other Tags
We've seen how to use css to create example customized versions of the
<h1>...<h6> tags, and we've seen the various ways to implement these
definitions on our HTML pages. Now let's look at some css rules for customizing a few other
tags.
Customizing the Body Tag
You can even use a css rule to customize the <body> tag. In this rule you can specify the face, size, style, and color of a page's main text font. You can also set a page background color and / or image as well as other features. Defining a rule for <body> is particularly useful if you want an easy way to impose a consistent look over a set of HTML pages. To get such consistency without css you'd have to make sure every page used the same body tag. In addition, you'd have to separately set the main font on each page. For example, every page to which you wanted to apply your "look" would need something like:
<body bgcolor="#339999" background="back1.gif" |
But if you're using cascading style sheets, you can create a css
rule to specify the desired properties of the body tag
and save this in an external file.
Then simply connect each HTML file that you want to have a consistent look
to this css file with a <link> tag (as we described above).
Once linked to the external file, the individual HTML files only need
the simplest possible
form for the body tag:
<body>.
In
Example 5
we link the HTML file to a style sheet
file named stylefile2.css. This external file is the same as our earlier
stylefile1.css except that we've now added the following rule for the body tag:
|
body {font-family: Arial, Helvetica, sans-serif; |
This rule has the same format as the ones we used to customize the <h1>,..., <h6> tags. We begin by giving the name of the tag that we want to reconfigure, in this case body. Then there's a left brace {. Then comes the list of definitions that we apply to customize the tag: each definition consists of a property name, followed by a colon, followed by the value that we want to assign to the property. Finally, we close the rule with a right brace }. (Don't forget to separate the individual definitions within the rule by semicolons!)
A body tag rule is a natural candiate for an external css file. (You wouldn't gain much by adding css inside the body tag itself or in a page's head.) As we've emphasized, using an external style sheet file for customizing the body tag helps make it easy to impose a uniform look to a set of pages. Such a rule also greatly simplifies the task of modifying that look for all of the pages if you ever need to redesign your site.
A note on font sizes: Let's take another quick look at the above rule for body. Note the value we've specified for the page's main font size: 10.5pt. What we want to emphasize here is that css gives you far more control over font sizes than HTML alone does. With HTML you can use the size attribute of the font tag to choose one of (only) seven different sizes. You can use something like <font size=5> to set a font at a specific size or you can use something like <font size="+2"> to specify a size relative to the surrounding text.
With css you can specify a font size in a number of ways.
You can use a keyword that chooses from a group of preset font sizes.
Or you can use percentages that specify font sizes relative to the size of the surrounding
text.
But probably the most useful option is that you can
set a font size with a numerical value, for example
10pt or 12pt
(here pt specifies points, a traditional size unit in typesetting).
As we see in the above example, you can even specify fractional numerical values
for font sizes.
Customizing the <B> Tag
The default behavior of the <B> tag is to make text bold. But you can use a css rule to give the tag additional features (which, if you wish, could even include not making text bold). For instance, you can create a rule that will cause the <B> tag to display text in a large font, in a particular face and color: Example 6. This example uses the following rule for the <B> tag:
B {font-size: 24pt; color: #32cd32; |
Note that the format for this rule is the same as for the rules for the <h1>,..., <h6> and <body> tags. Also note that we've redefined some of the same properties for B that we did for the headings and for body.
When reconfiguring <B>, you can even set a background color for text that's inside your customized bold tag: Example 6b. This example used the rule:
B {font-weight: bolder; font-size: 24pt; color: #32cd32; |
A note on background colors:
This is only one of many situations where css lets you set the
background color of an element. HTML lets
you set the background color of a page as a whole or of a table, but with
css you can define the background-color property
to give distinct colors to the backgrounds of
many types of page elements.
Customizing the <P> Tag
Now let's consider using a css rule to customize the <P> tag. Be careful with this tag: the customization should only take effect for material contained inside a <P>...</P> container.
We can, for example, arrange for text inside a <P> ... </P> container to have a different background color, font, and indentation than other elements on the page: Example 7. (These are only some of the properties we can redefine for the tag.) In this example we've given the <P> tag (actually the <P> ... </P> container) the rule:
P {background-color: #ffff00; font-size: 10pt; |
Warning: Some browsers can get confused when displaying pages that mix the use of <P>...</P> and just <P> alone: Example 7b. If you are going to customize the P tag, you should probably stick diligently to using <P>...</P>.
We may also give the P tag a different background image by specifying a value for the background-image property: Example 7c. This example uses the following rule for P:
P {background-image: url(orange_paper.gif); |
In this example some of the paragraphs now have an orange textured background.
For that matter, we can also have a css rule specify a background image for a B tag (and lots of other tags). In addition, we can use css to give background colors or images for I tags, blockquotes, and numerous other elements (including, of course, tables and the body). In each of these cases we just have to define the background-color or background-image property in the css rule for the corresponding tag, exactly as we have done in the examples for B and P.