f 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 eb site! "our writing is enough to pull a reader in and make them read more! Howe#er if you aren't one of these famous writers, then your writing probably isn't on par! $ut, don't feel bad%%& don't! &'m sure we know more H'() and *SS than they e#er will and we can use these technologies to help attract our reader's attention! Headers in eb pages%%marked up with h1, h2, h3, h4, h5, or h6 elements%%help the reader determine the purpose of sections in content! &t also does one other thing+ it helps the reader ,udge if the material is something they want to read! And if your header is #isually stimulating, the odds are better that the section will capture your reader's eye! So, with a dash of design, we can utili-e *SS to styli-e those eb page headers to catch the reader's eye and encourage them to read on!

Designing with CSS

.raphic headers aren't a new idea to spice up a page layout! &t's ,ust that now eb builders ha#e browsers that implement *SS specifications to such a degree that we can actually use *SS for what it was meant to+ presentation! e can now styli-e our headers and content without eb production hacks like font tags, single%pixel .&/s or spacer tags to mix content and presentation! So, if you properly mark up your content with H'() and style it with *SS, the content can remain untouched while you re#ise 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 *SS, we can now mo#e away from the generic styles that browsers apply to headlines! 'ext 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 si-e! 0n its own, that effect on headers has an almost lifeless appearance! Now with *SS, we can add more #isual flair to the page! &n the following examples, we will look at ways that *SS can help create more compelling headlines #isually! /irst, we will start with a simple example, a 1control,1 and then look at some of the possible ways to enhance it #ia *SS! $efore we begin, there's one note you should consider+ 'hese examples aren't geared for Netscape 2!x! &n my opinion, it's time for us to mo#e away from that browser and focus on the browsers that implement *SS better! ith that noted, let's continue!!!

The Control Page

'o start off creating headlines, let's look at an example of a generic headline and some text wrapped in a couple of H'() elements!
<h2><a name="results">Dewey defeats Truman</a></h2> <p> orem !psum dolor s!t amet" consetetur

sad!psc!n# el!tr" sed d!am nonumy e!rmod tempor !n$!dunt ut la%ore et dolore ma#na al!&uyam erat" sed d!am $oluptua' (t $ero eos et accusam et )usto duo dolores et ea re%um' *tet cl!ta +asd #u%er#ren" no sea ta+!mata sanctus est orem !psum dolor s!t amet' orem !psum dolor s!t amet" consetetur sad!psc!n# el!tr" sed d!am nonumy e!rmod tempor !n$!dunt ut la%ore et dolore ma#na al!&uyam erat" sed d!am $oluptua' (t $ero eos et accusam et )usto duo dolores et ea re%um' *tet cl!ta +asd #u%er#ren" no sea ta+!mata sanctus est orem !psum dolor s!t amet' orem !psum dolor s!t amet" consetetur sad!psc!n# el!tr" sed d!am nonumy e!rmod tempor !n$!dunt ut la%ore et dolore ma#na al!&uyam erat" sed d!am $oluptua' (t $ero eos et accusam et )usto duo dolores et ea re%um' *tet cl!ta +asd #u%er#ren" no sea ta+!mata sanctus est orem !psum dolor s!t amet'</p>

Now we will add some *SS declarations for the purpose of choosing some fonts, specifying some margins, and ensuring that text is black with a white background!
%ody , color- .///0 %ac+#round1color- .fff0 mar#!n- 5em 5em / 5em0 font1fam!ly- 2 uc!da 3rande2" 4erdana" 3ene$a" uc!da" (r!al" 5el$et!ca" sans1ser!f0 6

As you can see, there is nothing fancy in this example! Just straightforward H'() and *SS! &f you want to see how the control appears in your browser check here!

Making Headlines With Cascading Style Sheets

Developer News 3H3 (iddleware 4ebuts ith 5end Ser#er A'6' Apps $eta &ncludes *ustomer /eedback e$ay 4etails '0pen' App Store 3lans
MARKETPLACE
The new Intel Xeon Processor 5500 Series

When the Content is Fine by Itself

Smart. Its The New Speed. Server processors that automatically adapt to your workload. Thats the new IT intelligence.

Download Adobe Technical Communications Suite 2

Create content once. Publish to multiple channels. F !! "#$day trial % support. Try Now

Microsoft isual Studio Team S!stem " #ree Trial

Collaborate and &evelop 'pps Faster. (et the Tools ) Processes That *elp Teams +ork !,,ectively.

www.-icroso,t.com./isualStudio

The All"$ew Adobe Creati%e Suite &

Now Shipping0 'dobe CS10 tools to help students e2press their ideas in video3 on the web3 or print. www.tryit.adobe.com

IT 'el(Des) * Customer Su((ort Software

Internal IT *elp&esk So,tware with 'sset -gmt. Customer Support So,tware with 'ccount ) Contact -gmt &4+N54'& 647 F !! T I'5 T4&'68 www.servicedeskplus.com

Buy a Link Now

Next we will look at how to styli-e the text of ,ust the paragraph! &n this particular set of examples, we will hide the text of the headline using the property d!splay set to the #alue of none!
h2 , 6 d!splay- none0

Example #1

/or the first example, we will styli-e the first letter of the paragraph! 'he initial capital of the paragraph will be blown to gigantic proportions and mo#ed towards the center of the text!
p , mar#!n- /0 padd!n#- /0 te7t1!ndent- 3580

p-f!rst1letter , font1s!9e- 6//80 font1we!#ht- %old0 l!ne1he!#ht- /':em0 6

Now let's see how this works+ take a look at Headline 7! 'he browsers Netscape Na#igator 2, indows &nternet Exlorer 8%9 and (acintosh &nternet Explorer 2, howe#er, don't render the pseudo%element p-f!rst1letter! 'o make this effect work for those browsers you will need to replace the pseudo%element with a new class we will call '!n!t!alcap and modify the markup a bit like so+
p ,

mar#!n- /0 padd!n#- /0 te7t1!ndent- 3580

6 '!n!t!alcap

font1s!9e- 6//80 font1we!#ht- %old0 l!ne1he!#ht- /':em0

And the markup for the paragraph would be this+

<p><span class="!n!t!alcap"> </span>orem !psum dolor s!t amet" consetetur sad!psc!n# el!tr" sed d!am nonumy e!rmod tempor !n$!dunt ut la%ore et dolore ma#na al!&uyam erat" sed d!am $oluptua' (t $ero eos et accusam et )usto duo dolores et ea re%um' *tet cl!ta +asd #u%er#ren" no sea ta+!mata sanctus est orem !psum dolor s!t amet' orem !psum dolor s!t amet" consetetur sad!psc!n# el!tr" sed d!am nonumy e!rmod tempor !n$!dunt ut la%ore et dolore ma#na al!&uyam erat" sed d!am $oluptua' (t $ero eos et accusam et )usto duo dolores et ea re%um' *tet cl!ta +asd #u%er#ren" no sea ta+!mata sanctus est orem !psum dolor s!t amet' orem !psum dolor s!t amet" consetetur sad!psc!n# el!tr" sed d!am nonumy e!rmod tempor !n$!dunt ut la%ore et dolore ma#na al!&uyam erat" sed d!am $oluptua' (t $ero eos et accusam et )usto duo dolores et ea re%um' *tet cl!ta +asd #u%er#ren" no sea ta+!mata sanctus est orem !psum dolor s!t amet'</p>

Example #

/or this example, we will keep the initial capital but now enlarge, bold and capitali-e all the letters of the first word! 'o achie#e this effect we will need to again modify the markup for the paragraph!
<p><span class="!n!t!alcap"> </span><span class="f!rstword">orem</span> !psum dolor s!t amet" consetetur sad!psc!n# el!tr" sed d!am nonumy e!rmod tempor !n$!dunt ut la%ore et dolore ma#na al!&uyam erat" sed d!am $oluptua' (t $ero eos et accusam et )usto duo dolores et ea re%um' *tet cl!ta +asd #u%er#ren" no sea ta+!mata sanctus est orem !psum dolor s!t amet' orem !psum dolor s!t amet" consetetur sad!psc!n# el!tr" sed d!am nonumy e!rmod tempor !n$!dunt ut la%ore et dolore ma#na al!&uyam erat" sed d!am $oluptua' (t $ero eos et

accusam et )usto duo dolores et ea re%um' *tet cl!ta +asd #u%er#ren" no sea ta+!mata sanctus est orem !psum dolor s!t amet' orem !psum dolor s!t amet" consetetur sad!psc!n# el!tr" sed d!am nonumy e!rmod tempor !n$!dunt ut la%ore et dolore ma#na al!&uyam erat" sed d!am $oluptua' (t $ero eos et accusam et )usto duo dolores et ea re%um' *tet cl!ta +asd #u%er#ren" no sea ta+!mata sanctus est orem !psum dolor s!t amet'</p>

Now that the paragraph is set, we need to set up the *SS like so+
p ,

padd!n#- /0 mar#!n- /0 te7t1!ndent- 3580

6 p-f!rst1letter , font1s!9e- 66680 font1we!#ht- %old0 l!ne1he!#ht- /':em0 6 'f!rstword , font1s!9e- 1'5em0 font1we!#ht- %old0 l!ne1he!#ht- /':em0 te7t1transform- cap!tal!9e0 6

Again, this example uses p-f!rst1letter! So, if you want to make it work in most of the browsers you will need to switch out the psuedo%element for a new class like the method described in Example 7! /or a li#e example, take a look at Headline :!

Making Headlines With Cascading Style Sheets

Developer News 3H3 (iddleware 4ebuts ith 5end Ser#er A'6' Apps $eta &ncludes *ustomer /eedback e$ay 4etails '0pen' App Store 3lans
MARKETPLACE
The new Intel Xeon Processor 5500 Series

Example #!

Smart. Its The New Speed. Server processors that automatically adapt to your workload. Thats the new IT intelligence.

Download Adobe Technical Communications Suite 2

Create content once. Publish to multiple channels. F !! "#$day trial % support. Try Now

Microsoft isual Studio Team S!stem " #ree Trial

Collaborate and &evelop 'pps Faster. (et the Tools ) Processes That *elp Teams +ork !,,ectively.

www.-icroso,t.com./isualStudio

The All"$ew Adobe Creati%e Suite &

Now Shipping0 'dobe CS10 tools to help students e2press their ideas in video3 on the web3 or print. www.tryit.adobe.com

IT 'el(Des) * Customer Su((ort Software

Internal IT *elp&esk So,tware with 'sset -gmt. Customer Support So,tware with 'ccount ) Contact -gmt &4+N54'& 647 F !! T I'5 T4&'68 www.servicedeskplus.com

Buy a Link Now

/or the next example, & want to capitali-e the first few words in the paragraph but at the same time shrink the text a bit! &n order to pull off this effect, we will need to modify the paragraph to include a leader class+
<p><span class="leader"> orem !psum dolor</span> s!t amet" consetetur sad!psc!n# el!tr" sed d!am nonumy e!rmod tempor !n$!dunt ut la%ore et dolore ma#na al!&uyam erat" sed d!am $oluptua' (t $ero eos et accusam et )usto duo dolores et ea re%um' *tet cl!ta +asd #u%er#ren" no sea ta+!mata sanctus est orem !psum dolor s!t amet' orem !psum dolor s!t amet" consetetur sad!psc!n# el!tr" sed d!am nonumy e!rmod tempor !n$!dunt ut la%ore et dolore ma#na al!&uyam erat" sed d!am $oluptua' (t $ero eos et accusam et )usto duo dolores et ea re%um' *tet cl!ta +asd #u%er#ren" no sea ta+!mata sanctus est orem !psum dolor s!t amet' orem !psum dolor s!t amet" consetetur sad!psc!n# el!tr" sed d!am nonumy e!rmod tempor !n$!dunt ut la%ore et dolore ma#na al!&uyam erat" sed d!am $oluptua' (t $ero eos et accusam et )usto duo dolores et ea re%um' *tet cl!ta +asd #u%er#ren" no sea ta+!mata sanctus est orem !psum dolor s!t amet'</p>

Now that the H'() is set up, let's take a look at the *SS+
p , mar#!n- /0 padd!n#- /0 l!ne1he!#ht- 1'25em0 6 'leader , font1s!9e- /':em0 font1we!#ht- %old0 te7t1transform- uppercase0

/or a li#e example, take a look at Headline 8!

Example #"

'he next formatting of the paragraph includes making a simple dotted line abo#e the paragraph! $ut, eb de#elopers beware+ in (acintosh and indows &nternet Explorer, the dots are circles, while in (o-illa and Netscape the dots are s;uare! <nlike the pre#ious two examples, there isn't a need to modify the H'() to achie#e the effect! So all you need are three simple declarations+
p ,

%order1top- /'66em dotted ./;/0 mar#!n- /0 padd!n#- 1em / / /0

/or a li#e example, take a look at Headline 2!

Example ## and #$

'he next examples place a line on top of the paragraph! 3retty simple= Sure is> $ut, the simple things are often the best things to implement in our designs! /or the fifth example, we will ha#e a 7 pixel line!
p

%order1top- 1p7 sol!d .///0 mar#!n- /0 padd!n#- /'5em / / /0

/or a li#e example, take a look at Headline 9! 'he next example has a thicker line set to ?!9em as well as ,ustifying the text!
p ,

%order1top- /'5em sol!d .///0 mar#!n- /0 padd!n#- 1em / / /0 te7t1al!#n- )ust!fy0

/or a li#e example, take a look at Headline @!

Making Headlines With Cascading Style Sheets

Developer News

Back to the Hea line

3H3 (iddleware 4ebuts ith 5end Ser#er A'6' Apps $eta &ncludes *ustomer /eedback e$ay 4etails '0pen' App Store 3lans
MARKETPLACE
The new Intel Xeon Processor 5500 Series

Smart. Its The New Speed. Server processors that automatically adapt to your workload. Thats the new IT intelligence.

Download Adobe Technical Communications Suite 2

F !! "# &ay Trial8 Create -75TIP5! deliverables ,rom 4N! source o, content. Try Now

Microsoft isual Studio Team S!stem " #ree Trial

Collaborate and &evelop 'pps Faster. (et the Tools ) Processes That *elp Teams +ork !,,ectively.

www.-icroso,t.com./isualStudio

The All"$ew Adobe Creati%e Suite &

Now Shipping0 'dobe CS10 tools to help students e2press their ideas in video3 on the web3 or print. www.tryit.adobe.com

+et an IT De,ree -nline

(et solid credentials. Take your hobby to the ne2t level. 'dult Programs. ',,ordable. !ducation9:#.com

Buy a Link Now

Example #%

'he first example using the headline isn't an outrageous example, but it ser#es two points! 'he first is to let you know that we are now dropping the d!splay property for the headline in order to bring back the headline text! 'he next point is that a simple touch of color can do wonders for catching people's eyes! 4one poorly, well, you can burn out retinas! 4one with taste, color will grab the reader and pull them through your next paragraph! Here's the *SS for this example+
h2 ,

mar#!n- /0 padd!n#- /0 color- ./;/0

6 p , mar#!n- /0 padd!n#- /0 6

/or a li#e example, take a look at Headline A!

Example #&

'his next example makes interesting use of the border properties found in *SS! 'he *SS snippets will do the rest+
h2

6 p , 6

te7t1al!#n- center0 w!dth- 14'6em0 padd!n#- '5em /0 mar#!n- 1em auto0 %order1%ottom- 5p7 dotted .///0 %order1top- 1'5em sol!d .///0 font1fam!ly- 3eor#!a" T!mes" 2T!mes <ew =oman2" ser!f0 font1s!9e- 1'2em0 te7t1transform- uppercase0 wh!te1space- nowrap0

padd!n#- 1em / / /0 mar#!n- /0

/or a li#e example, take a look at Headline B!

Example #'

&ndenting text is fairly common practice! $efore *SS ga#e us the te7t1!ndent property to use on paragraphs, we usually used single%pixel .&/s or non%breaking spaces to force an indent! &n this example, & not only indent the paragraph text, but the headline as well!
h2 ,

padd!n#1%ottom- /0 mar#!n1%ottom- /0 font1we!#ht- %old0 te7t1transform- uppercase0 font1s!9e- /':em0 font1fam!ly- 4erdana" sans1ser!f0 te7t1!ndent- 5/p70

6 p , padd!n#1top- /0 mar#!n1top- /0 font1s!9e- 1em0 te7t1!ndent- 5/p70 6

/or a li#e example, take a look at Headline C!

Making Headlines With Cascading Style Sheets

MARKETPLACE
The new Intel Xeon Processor 5500 Series

Smart. Its The New Speed. Server processors that automatically adapt to your workload. Thats the new IT intelligence.

Download Adobe Technical Communications Suite 2

F !! "# &ay Trial8 Create -75TIP5! deliverables ,rom 4N! source o, content. Try Now

Microsoft isual Studio Team S!stem " #ree Trial

Collaborate and &evelop 'pps Faster. (et the Tools ) Processes That *elp Teams +ork !,,ectively.

www.-icroso,t.com./isualStudio

The All"$ew Adobe Creati%e Suite &

Now Shipping0 'dobe CS10 tools to help students e2press their ideas in video3 on the web3 or print. www.tryit.adobe.com

'el(Des) or Customer Su((ort

+eb based IT *elp&esk with 'sset -gmt or Customer support So,tware with 'ccount ) Contact mgmt. &4+N54'& 647 F !! T I'5 T4&'68 www.servicedeskplus.com

Buy a Link Now

DS*E&3' languageF'Ja#aScript7!7' SE*F1http+GGad!doubleclick!netGad,GN9?2A!&nternetHcomG$82A829B!2IabrF> w!webreference!comGauthoringGstyleGsheetsGheadlinesG)77G7C:7:9C7@AG7:9xB??G ($randsG<ni#HofH3hoenixH*3*H.E(SH7 dsGintmGwebde#Gwww!webreference!comGauthoringGstyleGsheetsGheadlinesG)77G7C:7:9C7@AG7:9xB??G ($randsG<ni#HofH3hoe @??IordF7C:7:9C7@A=1K D&(. SE*F1http+GGad!doubleclick!netGadGN9?2A!&nternetHcomG$82A829B!2IabrF>ie2IabrF>ie9Is-F7@?x DGN0S*E&3'K

Example #1(

A common practice in eb production is to include an anchor around headline text! 'his, of course, allows for linking to specific areas of a eb page! $ut it also allows for the ability to styli-e ,ust 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 *SS!

h2 , %order1%ottom- 1p7 sol!d .///0 padd!n#1%ottom- /0 mar#!n1%ottom- /0 font1we!#ht- %old0 te7t1transform- cap!tal!9e0 font1s!9e- 1'5em0 font1fam!ly- 4erdana" sans1ser!f0 te7t1!ndent- 5/p70 6 h2 a , 6 p , %order1%ottom- '33em sol!d .///0

padd!n#1top- /'5em0 mar#!n1top- /0 font1s!9e- 1em0 te7t1!ndent- 5/p70

/or a li#e example, take a look at Headline 7?!

Example #11

for this example, we tweak the pre#ious example a bit in order to create the appearance of a folder tab! "es, that's right! 'he fa#orite metaphor preferred by eb de#elopers all o#er the world for na#igating eb pages is only a few *SS rules away!
h2 ,

%order- 1p7 sol!d .///0 %order1%ottom- 1p7 sol!d .fff0 padd!n#- 1em0 mar#!n- / / / 5/p70 w!dth- 14em0 te7t1al!#n- center0 font1we!#ht- %old0 te7t1transform- cap!tal!9e0 font1s!9e- 1'5em0 pos!t!on- relat!$e0 91!nde7- 20

6 p , padd!n#- 1em 2em 2em 2em0 mar#!n1top- 11p70 %order- 1p7 sol!d .///0 6

/or a li#e example, take a look at Headline 77!

Making Headlines With Cascading Style Sheets

Developer News 3H3 (iddleware 4ebuts ith 5end Ser#er A'6' Apps $eta &ncludes *ustomer /eedback e$ay 4etails '0pen' App Store 3lans
MARKETPLACE
The new Intel Xeon Processor 5500 Series

I!age is "verything

Smart. Its The New Speed. Server processors that automatically adapt to your workload. Thats the new IT intelligence.

Download Adobe Technical Communications Suite 2

Create content once. Publish to multiple channels. F !! "#$day trial % support. Try Now

Microsoft isual Studio Team S!stem " #ree Trial

Collaborate and &evelop 'pps Faster. (et the Tools ) Processes That *elp Teams +ork !,,ectively.

www.-icroso,t.com./isualStudio

The All"$ew Adobe Creati%e Suite &

Now Shipping0 'dobe CS10 tools to help students e2press their ideas in video3 on the web3 or print. www.tryit.adobe.com

$./ /.0CAST 1 +ettin, the most from D/ and 0I

F !! !(IST 'TI4N T4&'68 &ont be one o, the many who ,ail to convert their data into usable in,o.

egister *ere ,or this /aluable +ebcast.

Buy a Link Now

'hen there are times when you wish to incorporate an image into your designs! 'hanks to the %ac+#round property in *SS, you can include images in e#ery block le#el element> "ou don't ha#e to build a huge background image and tuck it into your pages through the %ody element! Either you think your page needs help in attracting the wandering eyeballs of your #isitors or the client wants that something special! &n the next few examples, we will co#er three headline examples that use a J3., a .&/, and a 3N.!

Example #1

'his first example ,ust makes use of an image! Since the image isn't cropped exactly how & want, &'ll be using %ac+#round1pos!t!on to mo#e it! Also, in order to get the first letter in the headline to standout, &'m going to use the pseudo%element, h2-f!rst1letter, in order to increase the si-e and change its color!
h2 , mar#!n1%ottom- /0 padd!n#- 2em '5em '5em '5em0 %ac+#round1!ma#e- url>e7amples')p#?0 %ac+#round1pos!t!on- 12/p7 1:/p70 %ac+#round1repeat- no1repeat0 color- .3330

6 h2-f!rst1letter , color- .fff0 font1s!9e- 2//80 6 p , mar#!n1top- /0 color- .3330 padd!n#- '25em / / '@5em0

/or a li#e example, take a look at Headline 7:!

Example #1!

$efore /lash took the eb by storm, eb builders actually used .&/s to create animations for the eb pages! L"es, it's shocking but true>M And thanks to *SS, you can put animated .&/s behind headlines like & do here! /irst, here's the animated .&/+

Next up is the *SS+

h2 ,

6 p ,

mar#!n1%ottom- /0 padd!n#- / '5em '5em '5em0 %ac+#round1!ma#e- url>an!m#!fheader'#!f?0 %ac+#round1pos!t!on- 12/p7 115p70 %ac+#round1repeat- no1repeat0 color- .3330

mar#!n1top- /0 color- .3330 padd!n#- '25em / / '@5em0

/or a li#e example, take a look at Headline 78! &n this example, & simply took a screen capture of the text and the blurred sections of the text to create the animation! Howe#er, you could create (onty 3ython%es;ue animations or ha#e simple, but annoying, rapid color changes! &t's all up to you! Now it's time for 3N.s! &n this example we are going to use 3N.'s alpha transparency feature! &nstead of ha#ing one color set to be transparent, like in a .&/, we ha#e :9@ le#els of opacity in a 3N.!

'here is a little warning though with this example! Since 3N.s aren't fully supported in &nternet Explorer 9!x, your mileage will #ary! /or example, in indows &nternet Explorer @, instead of a green background color showing through the 3N., you get a grayscale image! &f a browser doesn't understand the 3N. format, there's no accounting to what the reaction will be! Hopefully the browser will simply not display the image and then you are left with ,ust a tasteful background color as your 1graceful1 degradation! Howe#er, the browser manufacturer could program their browser to put a broken image icon or pop up a dialog box that states the image format is unrecogni-able! Howe#er, in my testing, this method works in (ac&E, (o-illa, and in&E @! "ou can take a look at the 3N. here+

And now for the *SS code+

h2 , mar#!n1%ottom- /0 padd!n#- 25p7 '5em 25p7 25/p70 %ac+#round1!ma#e- url>e7amples'pn#?0 %ac+#round1repeat- no1repeat0 color- .3330 %ac+#round1color- .cf/0 6 p , mar#!n1top- /0 color- .3330 padd!n#- '25em / / '@5em0

/or a li#e example, take a look at Headline 72! &f this background image was a .&/ or J3E. and we wanted to change the background color, we would ha#e to open up the image editor and re%process the image! Howe#er, since the image of the man is transparent, we can simply change the *SS #alue of %ac+#round1color from+
/A #ar!sh #reen A/ %ac+#round1color- .cf/0

to+
/A peach fu99 A/ %ac+#round1color- .fc;0

/or a li#e example of the new 1peach fu--1, take a look at Headline 72b!

Example 1#
Now we are going to take the 3N. example and do something that probably has no real function! &f anyone asks, we are ,ust doing this for fun! &n (o-illa and the latest generation of Netscape browsers, you can add ho#er to H: to create an easy rollo#er effect! 'his has been done many times o#er to create text rollo#er effects, but you can also include images as well! &n (ac&E and in&E, you ,ust get the style as specified in the h2 selector%%ignoring the h2-ho$er pseudo class! )et's take a look at the *SS code+
h2 , mar#!n1%ottom- /0 padd!n#- 25p7 '5em 25p7 25/p70 %ac+#round1!ma#e- url>e7amples'pn#?0 %ac+#round1repeat- no1repeat0 color- .3330 %ac+#round1color- .cf/0 6 h2-ho$er , %ac+#round1color- .fc;0 %ac+#round1!ma#e- url>e7amples')p#?0 %ac+#round1repeat- no1repeat0 6 p ,

mar#!n1top- /0 color- .3330 padd!n#- '25em / / '@5em0

hat can be done with this= )ike & mentioned before you can use this ,ust for fun! Howe#er, you could add an Easter egg, a surprise for #isitors who are using a browser with most of the *SS spec properly implemented! Just be sure not to lea#e any crucial information of you eb page in the 1ho#er state1 otherwise #isitors who don't ha#e the appropriate browser won't get it! /or a li#e example, take a look at Headline 79!

Concl#sion
'hat's all for now! & co#ered ways of styling text with and without a headline as well as incorporating images all in an effort to grab your reader's eye! $ut don't ,ust take these examples as%is! 3lay around with them and experiment! $uild off of these examples and push and prod them to make interesting effects on your own! 'hat is the power behind cascading style sheets! Each example presented here can go in a #ariety of design directions ,ust by simply editing a *SS declaration!

$bo#t the $#thor

*hristopher Schmitt is the principal of Heat#ision!com, &nc! He also co%moderates the eb design and de#elopment list, $abble! &n his latest book, Designing CSS Web Pages, Schmitt writes about contemporary new media design through *ascading Style Sheets, 4ynamic H'(), 3N. 6 SN.!