| Previous | Table of Contents | Next |
In this lesson, you learn how to save time and effort by combining the values and selectors in your style rules.
In the previous lessons, you learned to use over a dozen different style properties to control the appearance of the text in your web pages. You’ve also seen the <STYLE> blocks of your sample files grow as you learned new properties and new techniques for applying them.
As you practice using style sheets to design web pages, you should begin to consider the ways in which you can make your styles more efficient. Writing HTML code in this way brings you a step closer to actual programming. There are many ways to accomplish the same end, but your goal is to find the most efficient one.
This lesson shows some coding shortcuts that can make the task of defining your styles much easier. In fact, if you’ve gone through all of the lessons up to this point, you may even be annoyed that they were not presented earlier. By concentrating first on the individual properties, you had a chance to learn their full capabilities and can now concentrate on their syntax.
Style rules are most efficient when they are fewer in number. One way of minimizing your style code is to carefully organize your selectors to avoid redundant properties. By grouping properties in the combinations that are most often used, you can apply them in more situations and leave other properties to be added by other means.
For example, suppose you have a document that contains five different sized headlines with various justifications. All of the headlines require boldface Arial text, colored red. Rather than use five separate rules which differ only in font size and justification, create a single rule containing the font-weight, font-family, and color properties and apply it to all five headline types. You can then apply the font-size, justification, and any other properties with a class selector, or some other technique.
If you find that you have to apply the same properties to several different selectors, you can specify the selectors in one rule, separating them with commas, as follows:
H1, H2, H3, H4, H5 {font-weight: bold;
font-family: Ariel;
color: red}
TIP:
Multiple Selectors When specifying multiple selectors in one rule, remember to separate them with commas or they will be interpreted as a contextual selector.
Another way to reduce code clutter is to group the values of related properties. You learned to use many different properties that affect fonts and their appearance. A rule that completely defines the look of a font may appear as follows:
P {font-weight: bold;
font-style: italic;
font-size: 18pt;
line-height: 22pt;
font-family: "Times New Roman"}
In place of these five separate properties, the CSS1 standard defines a font property that is used to specify all of the values shown. The same five declarations, grouped together as the value of a single property, would appear as follows:
P {font: bold italic 18pt/22pt "Times New Roman"}
The order of the values in a grouping of this type is critical. The font-weight and font-style values must precede the size measurements to prevent their keywords from being misinterpreted as part of a font-style name. Both of these properties are optional. The permitted keywords for the two are unique and allow the properties to be distinguished by their values alone.
The font-size and line-height values must appear in that order. If percentages are specified for these values, remember that the font-size value is relative to the size of the parent element, whereas the line-height value is relative to the font size of the current element.
Absolute measurements can use different scales. If only a single measurement value is specified, it is assumed to be a font size. A line-height value cannot be specified without an accompanying font size.
The font-family value must be enclosed in quotes if it contains one or more spaces, just as in the font-family property itself.
TIP:
Optional Values The values for any properties omitted from a font declaration retain the values inherited by their parent element. They are not nullified or overridden by the inclusion of the font property.
Using the font property, you can consolidate the following rules from your SAMPLE.HTML file:
<STYLE>
<!--
H1 {font-family: Impact;
font-size: 24pt;
color: red;
text-align: center}
H2.right {font-family: Impact;
font-size: 20pt;
font-style: italic;
color: blue;
margin-left: 50%}
H2.center {font-family: Impact;
font-size: 20pt;
font-style: italic;
color: blue;
margin-left: 25%;
margin-right: 25%}
OL LI {font-size: 110%;
font-weight: bold}
OL OL LI {font-size: 100%;
font-weight: medium}
OL OL OL LI {font-style: italic;
font-size: 90%;
font-weight: medium}
-->
</STYLE>
until they appear as follows:
<STYLE>
<!--
H1 {font: 24pt Impact;
color: red;
text-align: center}
H2.right {font: italic 20pt Impact;
color: blue;
margin-left: 50%}
H2.center {font: italic 20pt Impact;
color: blue;
margin-left: 25%;
margin-right: 25%}
OL LI {font: bold 110%}
OL OL LI {font: medium 100%}
OL OL OL LI {font: medium italic 90%}
-->
</STYLE>
The properties used to specify the margin sizes for the four sides of a text block can also be grouped into a single declaration. The margin property takes up to four values, representing the margin-top, margin-bottom, margin-left, and margin-right properties respectively, as shown:
P {margin: 1in 1in .5in .5in}
If you specify only one measurement for the value, the measurement is used for all four margins. If two or three measurements are specified, the missing values are taken from their opposite sides. This rule:
P {margin: 1in .5in}
is equivalent to the first example above. The 1-inch value is applied to the top and bottom, and .5 inches to the left and right sides. A declaration with three measurements, such as:
P {margin: 1in .5in 1in}
would again produce the same results. The first measurement would set the top margin; the second, the right; the third, the bottom; and the value for the left margin would be taken from the right.
Explorer Support Since Internet Explorer 3.0 does not support the margin-bottom property, a margin property with three measurements would represent the top, left, and right margin values, respectively.
In this lesson, you learned how to reduce code clutter by grouping font and margin values into single properties. In the next lesson, you learn how to specify colors for the text and backgrounds of your pages.
 |
 |
 |