Making Headlines With CSS (1/7)

[next]

Making Headlines With Cascading Style Sheets

By Christopher Schmitt ([email protected])

[Editor's note: all linked examples in this tutorial will open in a new window.]

If you're Shakespeare, James Joyce, Anais Nin, or Ernest Hemingway, you don't really need to worry about how you present your text on your Web site. Your writing is enough to pull a reader in and make them read more. However if you aren't one of these famous writers, then your writing probably isn't on par. But, don't feel bad--I don't. I'm sure we know more HTML and CSS than they ever will and we can use these technologies to help attract our reader's attention.

Headers in Web pages--marked up with h1, h2, h3, h4, h5, or h6 elements--help the reader determine the purpose of sections in content. It also does one other thing: it helps the reader judge if the material is something they want to read. And if your header is visually stimulating, the odds are better that the section will capture your reader's eye. So, with a dash of design, we can utilize CSS to stylize those Web page headers to catch the reader's eye and encourage them to read on.

Designing with CSS

Graphic headers aren't a new idea to spice up a page layout. It's just that now Web builders have browsers that implement CSS specifications to such a degree that we can actually use CSS for what it was meant to: presentation. We can now stylize our headers and content without Web production hacks like font tags, single-pixel GIFs or spacer tags to mix content and presentation. So, if you properly mark up your content with HTML and style it with CSS, the content can remain untouched while you revise and refine the layout to your heart's content simply by editing the rules in the style sheet.

Apart from the ease of designing with CSS, we can now move away from the generic styles that browsers apply to headlines. Text wrapped solely in header elements--the h1, h2, h3, etc.--will be rendered in bold, flushed left and, depending on which element and browser, larger than the default text size. On its own, that effect on headers has an almost lifeless appearance. Now with CSS, we can add more visual flair to the page.

In the following examples, we will look at ways that CSS can help create more compelling headlines visually. First, we will start with a simple example, a "control," and then look at some of the possible ways to enhance it via CSS.

Before we begin, there's one note you should consider: These examples aren't geared for Netscape 4.x. In my opinion, it's time for us to move away from that browser and focus on the browsers that implement CSS better. With that noted, let's continue...

The Control Page

To start off creating headlines, let's look at an example of a generic headline and some text wrapped in a couple of HTML elements.

<h2><a name="results">Dewey defeats Truman</a></h2>
<p>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. 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 we will add some CSS declarations for the purpose of choosing some fonts, specifying some margins, and ensuring that text is black with a white background.

body
{
	color: #000;
	background-color: #fff;
	margin: 5em 5em 0 5em;
	font-family: 'Lucida Grande', Verdana, 
                     Geneva, Lucida, Arial, 
                     Helvetica, sans-serif;
}

As you can see, there is nothing fancy in this example. Just straightforward HTML and CSS. If you want to see how the control appears in your browser check here.

[next]

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

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