Making Headlines With CSS (5/7)

[previous] [next]

Making Headlines With Cascading Style Sheets

Example #10

A common practice in Web production is to include an anchor around headline text. This, of course, allows for linking to specific areas of a Web page. But it also allows for the ability to stylize just the text portion of the headline.

So the markup of the headline might look like this:

<h2><a name="results">Dewey defeats Truman</a></h2>

And then the CSS.

h2	
{
	border-bottom: 1px solid #000;
	padding-bottom: 0;
	margin-bottom: 0;
	font-weight: bold;
	text-transform: capitalize;
	font-size: 1.5em;
	font-family: Verdana, sans-serif;
	text-indent: 50px;	
}
h2 a
{
	border-bottom: .33em solid #000;
}
p	
{
	padding-top: 0.5em;
	margin-top: 0;
	font-size: 1em;
	text-indent: 50px;
}

For a live example, take a look at Headline 10.

Example #11

for this example, we tweak the previous example a bit in order to create the appearance of a folder tab. Yes, that's right. The favorite metaphor preferred by Web developers all over the world for navigating Web pages is only a few CSS rules away.

h2	
{
	border: 1px solid #000;
	border-bottom: 1px solid #fff;
	padding: 1em;
	margin: 0 0 0 50px;
	width: 14em;
	text-align: center;
	font-weight: bold;
	text-transform: capitalize;
	font-size: 1.5em;
	position: relative;
	z-index: 2;
}
p	
{
	padding: 1em 2em 2em 2em;
	margin-top: -1px;
	border: 1px solid #000;
}

For a live example, take a look at Headline 11.

[previous] [next]

Created: December 11, 2002
Revised: December 11, 2002

URL: https://webreference.com/authoring/style/sheets/headlines/5.html