Making Headlines With CSS (4/7)

[previous] [next]

Making Headlines With Cascading Style Sheets

Back to the Headline

Example #7

Headline Example 7

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.

Example #8

Headline Example 8

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.

Example #9

Headline Example 9

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.