| home / authoring / style / sheets / headlines |   [next] |
|
|
By Christopher Schmitt (schmitt@cssbook.com)
[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.
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...
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.
| home / authoring / style / sheets / headlines | [next] |
| ||||||||||||||||||||
Created: December 11, 2002
Revised: December 11, 2002
URL: http://webreference.com/authoring/style/sheets/headlines/
