| home / authoring / style / sheets / headlines |    [previous] [next] |
|
|
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.
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.
| home / authoring / style / sheets / headlines | [previous] [next] |
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
Created: December 11, 2002
Revised: December 11, 2002
URL: http://webreference.com/authoring/style/sheets/headlines/5.html
