The borders have been dealt with already, so the next step is
to style the caption, which currently lacks impact. The caption is effectively a title,
and titles should stand out. Therefore, place some padding underneath it, set
font-weight to bold, font-size to 1.3em, and text-transform to uppercase.
Styling the playlist table
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
248
Note that, in the following code block, CSS shorthand is used for three values for
setting padding; as you may remember from Chapter 2, the three values set the
top, horizontal (left and right), and bottom values, respectively; meaning the caption
will have 0px padding everywhere except at the bottom, where the padding
will be 5px.
caption {
font-weight: bold;
font-size: 1.3em;
text-transform: uppercase;
padding: 0 0 5px;
}
4. Style the header cells. To make the header cells stand out more, apply the CSS rule
outlined in the following code block. The url value set in the background property
adds a background image to the table headers, which mimics the subtle metallic
image shown in the same portion of the iTunes interface; the 0 50% values vertically
center the graphic; and the repeat-x setting tiles the image horizontally. From a
design standpoint, the default centered table heading text looks iffy, hence the
addition of a text-align property set to left. These settings ensure that the table
header contents stand out from the standard data cell content.
Pages:
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346