WebRef   Sitemap · Experts · Tools · Services · Newsletters · About

home / authoring / style / sheets / headlines

[previous] [next]

Making Headlines With Cascading Style Sheets

Developer News OpenOffice 3.2 Lands Amid Critical Changes Red Hat, IBM Firmly in KVM Virtualization Camp Red Hat Talks Up Open Source Cloud Plans

Back to the 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

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

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]

The latest from WebReference.com Browse > Site Contents - - - - - Experts * 3D Animation * Design * DHTML * Graphics * HTML * JavaScript * Perl * XML - - - - - Web Resources * Authoring * Design * Internet * Multimedia * Programming * Promotion - - - - - Services * Interviews * Newsletters * Reviews * Search * Tools Installing and Using Meeplace, the Business Review CMS · Sending an HTML and Plain Text E-newsletter with ASP.NET, Part 2 · Create Multilingual Web Sites with Windows Unicode Fonts Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters >   The latest from internet.com Top 10 Threats to Wireless Security · Poll: UC Uptake on the Rise · Review: Fluke AirCheck Wi-Fi Tester 1.0

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

URL: http://webreference.com/authoring/style/sheets/headlines/4.html