Pro HTML5 and CSS3 Design Patterns

CHAPTER 10 ■ STYLING TEXT

Highlight

Problem You want to highlight text with a background color and a forecolor. You optionally want to
highlight text with a background image.

Solution A highlight is colored text superimposed on a contrasting background color or tiled image.
To create a highlight, apply the following styles:
color sets the foreground color of the text.

background-color sets the background color of the text.

padding-left:+VALUE sets the padding distance on the left side.

padding-right:+VALUE sets the padding distance on the right side.

padding-top:+VALUE sets the padding distance on the top.

padding-bottom:+VALUE sets the padding distance on the bottom.

background-image uses a tiled image as the highlight. This can be omitted or set to none if

you don’t want to use a background image.

background-position sets the location of the highlight. This can be omitted if the default

value of left top is what you want.

background-repeat:repeat tiles the image. This can be omitted because it’s the default

value.

Pattern INLINE-SELECTOR { color:COLOR; background-color:COLOR; padding-left:+VALUE;
padding-right:+VALUE; padding-top:+VALUE; padding-bottom:+VALUE; background-
image:url("FILE.EXT"); }
BLOCK-SELECTOR { line-height:+VALUE; }

Location This pattern applies to any type of element.

Tips You can use em measurements to scale the padding to match the size of the font. I find that
0.25em on the left and right, 0.05em on the top, and 0.13em on the bottom creates a well-
proportioned box around text of all sizes.
A browser doesn’t expand the height of a line to fit the vertical padding of its content. Thus,
vertical padding overlaps content in neighboring lines unless you increase the height of a
line using line-height.
Use contrasting colors for color and background-color to ensure the text is readable. When
using background images, be sure to assign contrasting background and foreground colors
in case the browser can’t load the background image.

Example In the example, I named classes descriptively to make it easier to match the code to the
screenshot. In a real document, I would name classes functionally because that makes it
easier to restyle the document later. For example, the class highlight white-on-firebrick
is better named highlight-alert. Functional classes enhance the meaning of a document
and don’t require changes to the HTML markup when you change style rules.

Related to Background (Chapter 6)