| home / authoring / style / sheets / headlines |    [previous] [next] |
|
|
The first example using the headline isn't an outrageous example, but it serves two
points. The first is to let you know that we are now dropping the display
property for the headline in order to bring back the headline text.
The next point is that a simple touch of color can do wonders for catching people's eyes. Done poorly, well, you can burn out retinas. Done with taste, color will grab the reader and pull them through your next paragraph.
Here's the CSS for this example:
h2
{
margin: 0;
padding: 0;
color: #090;
}
p
{
margin: 0;
padding: 0;
}For a live example, take a look at Headline 7.
This next example makes interesting use of the border properties found in CSS.
The CSS snippets will do the rest:
h2
{
text-align: center;
width: 14.6em;
padding: .5em 0;
margin: 1em auto;
border-bottom: 5px dotted #000;
border-top: 1.5em solid #000;
font-family: Georgia, Times, 'Times New Roman', serif;
font-size: 1.2em;
text-transform: uppercase;
white-space: nowrap;
}
p
{
padding: 1em 0 0 0;
margin: 0;
}For a live example, take a look at Headline 8.
Indenting text is fairly common practice. Before CSS gave us the text-indent
property to use on paragraphs, we usually used single-pixel GIFs or non-breaking spaces to
force an indent. In this example, I not only indent the paragraph text, but the headline
as well.
h2
{
padding-bottom: 0;
margin-bottom: 0;
font-weight: bold;
text-transform: uppercase;
font-size: 0.8em;
font-family: Verdana, sans-serif;
text-indent: 50px;
}
p
{
padding-top: 0;
margin-top: 0;
font-size: 1em;
text-indent: 50px;
}For a live example, take a look at Headline 9.
| home / authoring / style / sheets / headlines | [previous] [next] |
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
Created: December 11, 2002
Revised: December 11, 2002
URL: http://webreference.com/authoring/style/sheets/headlines/4.html
