Article
The CSS Anthology: 101 Essential Tips, Tricks and Hacks, Chapter 2 - Text Styling and Other Basics
How do I add a background color to a heading?
You can add a background color to any element, including a heading.
Solution
Below, we've created a CSS rule for all level one headings in a document. The result is shown in Figure 2.10.
Example 2.12. headingcolor.css (excerpt)
h1 {
background-color: #ADD8E6;
color: #256579;
font: 18px Verdana, Geneva, Arial, Helvetica, sans-serif;
padding: 2px;
}
Figure 2.10. Headings can display with a background color.
Make Way for Color
When adding a background to a heading, you may also want to adjust the padding so that there's space between the heading text and the edge of the colored area, as we did in the above example.
How do I style headings with underlines?
Solution
There are two ways in which you can add an underline to your text. The simplest way is to use the text-decoration property that we encountered when styling links above. This method will allow you to underline the text in the same color as the text itself, as shown in Figure 2.11.
Example 2.13. headingunderline.css (excerpt)
h1 {
font: 18px Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: underline;
}
Figure 2.11. Add an underline to a heading using text-decoration.
You can also create an underline effect by adding a bottom border to the heading. This solution is more flexible, in that you can separate the underline and the heading with the use of padding, and you can change the color of the underline to be different than the text. However, the effect may display slightly differently in different browsers, so you'll need to test it to make sure the effect looks reasonable on the browsers your visitors may use (see Figure 2.12).
Example 2.14. headingunderline2.css
h1 {
font: 18px Verdana, Geneva, Arial, Helvetica, sans-serif;
padding: 2px;
border-bottom: 1px solid #aaaaaa;
}
Figure 2.12. Add an underline effect using a bottom border.
How do I get rid of the large gap between an <h1> tag and the following paragraph?
Solution
By default, browsers render a gap between heading and paragraph tags. This is produced by a default top and bottom margin that browsers apply to these tags.
To remove all space between a heading and the paragraph that follows it, you must not only remove the bottom margin from the heading, but also the top margin from the paragraph. But since it can be inconvenient to target the first paragraph following a heading with a CSS selector, it's easier to simply assign a negative bottom margin to the heading. Margins can be set to negative values, though padding cannot.
The margin of the heading shown in Figure 2.13 has not been changed.
Figure 2.13. This heading and paragraph show the default spacing.
Figure 2.14 shows the same heading after the CSS below has been applied to the <h1> tag.
h1 {
font: 18px Verdana, Geneva, Arial, Helvetica, sans-serif;
margin-bottom: -12px;
}
Figure 2.14. The heading display changes when the margin-bottom is set to -15px.
How do I highlight text on the page without using font tags?
Before CSS, we might have used font tags to highlight an important term on the page, or to identify the search terms visitors had used to locate the document through a search engine.
Solution
CSS allows you to create a class for the highlighting style and apply it by wrapping the highlighted text with <span> tags that apply the class. For example, in the following paragraph, we've wrapped a phrase in span tags that apply the class, hilite.
Example 2.15. hilite.html (excerpt)
<p>These <span class="hilite">stuffed peppers</span> are lovely as
a starter, or as a side dish for a Chinese meal. They also go
down well as part of a buffet and even children seem to like
them.</p>
The hilite class is shown below; the section will display as in Figure 2.15:
Example 2.16. hilite.css (excerpt)
.hilite {
background-color: #FFFFCC;
color: #B22222;
}
Figure 2.15. Highlight text with CSS.
How do I alter the line-height (leading) on my text?
One of the great advantages of using CSS instead of font tags is that you have far more control over the look of the text on the page. In this solution, we'll see how to alter the leading of text in your document.
Solution
If the default spacing between lines of text looks a little narrow, change it with the line-height property.
Example 2.17. leading.css
p {
font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
line-height: 2.0;
}
The result is shown in Figure 2.16.
Figure 2.16. Alter the leading using the line-height property.
Be careful not to space the text out so much that it becomes difficult to read.
No Units?
You can also specify the line-height using standard CSS units of measurement, such as ems or even pixels. But doing so breaks the link between the line height and the font size for child elements.
For example, if the example above contained a <span> that set a large font-size, then the line height would scale up proportionally to maintain the same ratio because line-height of the paragraph was set to the numerical value 2.0. If, however, line-height was set to 2em or 200%, the <span> would inherit the actual line height, not the ratio, and the large font size would not affect the line height of the span. Depending on the effect you're going for, this may actually be desirable.
How do I justify text?
When you justify text, you alter the spacing between the words so that both the right and left margins are straight, as with the text in this book. You can create this effect using CSS.
Solution
You can justify paragraph text with the help of the text-align property.
Example 2.18. justify.css
p {
text-align: justify;
font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
line-height: 2.0;
}
Figure 2.17 shows the effect of this code.
Figure 2.17. Justify text using text-align.
Discussion
Other values for text-align are:
right- aligns the text to the right of the containerleft- aligns the text to the left of the containercenter- aligns the text center