Making Headlines With CSS (3/7)

[previous] [next]

Making Headlines With Cascading Style Sheets

Example #3

For the next example, I want to capitalize the first few words in the paragraph but at the same time shrink the text a bit. In order to pull off this effect, we will need to modify the paragraph to include a leader class:

<p><span class="leader">Lorem ipsum dolor</span> 
 sit amet, consetetur 
 sadipscing elitr, sed diam nonumy eirmod tempor 
 invidunt ut labore et dolore magna aliquyam erat, 
 sed diam voluptua. At vero eos et accusam et justo 
 duo dolores et ea rebum. Stet clita kasd gubergren, 
 no sea takimata sanctus est Lorem ipsum dolor sit 
 amet. Lorem ipsum dolor sit amet, consetetur 
 sadipscing elitr, sed diam nonumy eirmod tempor 
 invidunt ut labore et dolore magna aliquyam erat, 
 sed diam voluptua. At vero eos et accusam et justo 
 duo dolores et ea rebum. Stet clita kasd gubergren, 
 no sea takimata sanctus est Lorem ipsum dolor sit 
 amet. Lorem ipsum dolor sit amet, consetetur 
 sadipscing elitr, sed diam nonumy eirmod tempor 
 invidunt ut labore et dolore magna aliquyam erat, 
 sed diam voluptua. At vero eos et accusam et 
 justo duo dolores et ea rebum. Stet clita kasd 
 gubergren, no sea takimata sanctus est Lorem 
 ipsum dolor sit amet.</p>

Now that the HTML is set up, let's take a look at the CSS:

p
{
margin: 0;
	padding: 0;
	line-height: 1.25em;
}
.leader
{
	font-size: 0.8em;
	font-weight: bold;
	text-transform: uppercase;
}

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

Example #4

The next formatting of the paragraph includes making a simple dotted line above the paragraph. But, Web developers beware: in Macintosh and Windows Internet Explorer, the dots are circles, while in Mozilla and Netscape the dots are square.

Unlike the previous two examples, there isn't a need to modify the HTML to achieve the effect. So all you need are three simple declarations:

p
{
	border-top: 0.66em dotted #090;
	margin: 0;
	padding: 1em 0 0 0;
}

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

Example #5 and #6

The next examples place a line on top of the paragraph. Pretty simple? Sure is! But, the simple things are often the best things to implement in our designs.

For the fifth example, we will have a 1 pixel line.

p
{
	border-top: 1px solid #000;
	margin: 0;
	padding: 0.5em 0 0 0;
}

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

The next example has a thicker line set to 0.5em as well as justifying the text.

p
{
	border-top: 0.5em solid #000;
	margin: 0;
	padding: 1em 0 0 0;
	text-align: justify;
}

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

[previous] [next]

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

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