CSS: The Missing Manual [1 ed.] 0596526873, 9780596526870

By Jean Graine de Pomme

tag. Toward the end of that

tag, you've also inserted a photo using the tag. If you float that photo to the right, say, then the tag and most of the content inside that

tag will still appear above the photo; only content that follows the tag will wrap around the left side of the image.

7.6.1. Backgrounds, Borders, and Floats To t he const ernat ion of m any Web designers, backgrounds and borders don't float t he sam e way as ot her page elem ent s. Say you float an elem ent a sidebar for exam plet o t he right . The cont ent below t he sidebar m oves up and wraps around it , j ust as it should. But if t hat cont ent has a background or border set on it , t hen t hat background or border act ually appears underneat h t he float ed sidebar ( Figure 7- 13, left ) . I n essence, a Web browser wraps t he t ext around t he float , but not t he border or background. Believe it or not , t his is absolut ely kosher, and how ( according t o t he rules) it 's supposed t o work. Of course, you m ay not want t o follow t hese rules; you m ight want t o have t he border or background st op when it reaches t he float ed elem ent ( Figure 7- 13, right ) . Wit h a lit t le CSS m agic, you can do it .

Section 7.6. Wrap Content with Floating Elements

First , you need t o add one rule t o t he st yle t hat has background or borders running underneat h t he float . Once you locat e t he st yle, add t his line: overflow: hidden; . The overflow propert y ( discussed in m ore det ail in Sect ion 7.5.2) m akes any background or border t hat ext ends underneat h t he float disappear. Anot her approach is t o add a borderline around t he float ed elem ent ; when you m ake t he borderline t hick enough and m at ch it s color t o t he background color of t he page, t he border looks j ust like em pt y spaceeven t hough it 's covering and hiding t he background color and borderlines t hat are ext ending below it .

Figu r e 7 - 1 3 . I n t h is e x a m ple , t h e r e 's a n < h 1 > t a g w it h a ba ck gr ou n d color a n d a n < h 2 > t a g w it h a bor de r ( le ft ) . Addin g ove r flow : h idde n ; t o t h e st yle for t h e < h 1 > t a g ( r igh t ) pr e ve n t s t h e h e a dlin e fr om a ppe a r in g u n de r t h e floa t in g e le m e n t ( side ba r ) .

7.6.2. Stopping the Float Som et im es you need a way t o t ell a t ag t o ignore a float ed elem ent . You m ay have a copyright not ice t hat should always appear at t he bot t om of t he browser window. I f you have a part icularly t all sidebar t hat 's float ed t o t he left side of t he page, t he copyright not ice m ight act ually be drawn up t he page and wrap around t he float . I nst ead of appearing at t he bot t om of t he page, t he copyright is sit t ing up t he page next t o t he sidebar. You want t he copyright not ice part of your page t o refuse t o wrap around t he float ed elem ent and inst ead drop below it . Ot her problem s occur when you have several float ed it em s close t oget her. I f t he float ed it em s aren't very wide, t hey float up and next t o each ot her, and if t hey're of varying height s t hey can get int o an unat t ract ive logj am ( see Figure 7- 14, t op) . I n t his case, t he float ed elem ent s shouldn't float next t o each ot her. CSS provides t he clear propert y for j ust t hese t ypes of problem s.

BROWSER BUG When overflow: hidden Fails

Section 7.6. Wrap Content with Floating Elements

The overflow: hidden propert y prevent s backgrounds and borders from awkwardly running under float ing elem ent s ( Figure 7- 13) . But not hing's ever t hat sim ple in t he world of Web browsers. While t his one line of code works for I nt ernet Explorer 7, Firefox, Cam ino, and Safari, it doesn't work reliably in Opera ( at least version 8.5) , and I nt ernet Explorer 5 and 6 for Windows j ust ignore it . Alas t here's no apparent fix for Opera, but t here's som et hing you can do for I E 5 and 6. For t hose browsers, you need t o add one addit ional rule: zoom : 1; . This is a Microsoft - only propert y t hat let s you enlarge an elem ent on a page. I n t his case, t hough, it 's j ust a weird way t o force I E 5 and 6 t o st op a border or background from ext ending underneat h t he float ed elem ent . ( For m ore det ail on why t his zoom t hing works, see " Got Layout ?" in Sect ion 11.1.) You m ay want t o put t he I E- specific zoom rule in an I E- only st yle ( see t he box in Sect ion 7.6) . You can even put it in a com plet ely separat e I E- only ext ernal st yle sheet ( Sect ion 14.5.2) . You'll also find an exam ple of t his problem and it s solut ion in t he t ut orial st art ing in Sect ion 7.7.5.

The clear propert y inst ruct s an elem ent t o not wrap around a float ed it em . By clearing an elem ent , you essent ially force it t o drop down below t he float ed it em . Also, you can cont rol which t ype of float ( left or right ) is cleared or force a st yle t o sim ply ignore bot h t ypes of float s. The clear propert y accept s t he following opt ions: ● ● ● ●

left . The st yle will drop below elem ent s t hat are float ed left but will st ill wrap around right - float ed obj ect s. right . Forces a drop below right - float ed obj ect s but st ill wraps around left - float ed obj ect s. bot h. Forces a drop below bot h left - and right - float ed elem ent s. none. Turns off clearing alt oget her. I n ot her words, it m akes an it em wrap around bot h left - and right - float ed obj ect s, which is how Web browsers norm ally work.

I n t he case of a copyright not ice t hat m ust appear at t he bot t om of t he page, you'd want it t o clear bot h left - and right - float ed obj ect sit should always be below ot her cont ent and should never wrap t o t he left or right of any ot her it em . Here's a class st yle t hat would do j ust t hat : .copyright { clear: both; }

Figure 7- 14 shows how t he clear propert y can prevent float ed it em s of varying height s from clum ping t oget her. All t hree phot os in t hat figure have a right float applied t o t hem . I n t he t op figure, t he phot o of t he t om at oes ( 1) is t he first im age on t he page and appears at t he far right edge. The second im age ( 2) obeys t he float set on t he first im age and wraps up t o t he left of it . The last phot o ( 3) isn't wide enough t o sit next t o t he second phot o ( 2) but st ill t ries t o wrap around bot h ( 1) and ( 2) . I t get s st uck in t he process. Using clear: right ; on t he im ages prevent s t he phot os from sit t ing next t o each ot her ( Figure 7- 14, bot t om ) . The clear applied t o t he second phot o prevent s it from wrapping up next t o t he first im age, while t he last im age's right clear propert y forces it t o appear below t he second im age.

Figu r e 7 - 1 4 . Top: Som e t im e s you don 't w a n t a n e le m e n t t o w r a p a r ou n d a floa t e d obj e ct . Bot t om : Applyin g t h e cle a r pr ope r t y ( in t h is ca se cle a r : r igh t ;) t o e a ch im a ge pr e ve n t s t h e m fr om sit t in g n e x t t o e a ch ot h e r . Th e cle a r a pplie d t o ph ot o ( 2 ) pr e ve n t s it fr om w r a ppin g u p n e x t t o im a ge ( 1 ) . Applyin g cle a r : r igh t t o ph ot o ( 3 ) for ce s it t o a ppe a r be low ph ot o ( 2 ) .

Section 7.6. Wrap Content with Floating Elements

Tip: This business of left floats, right floats, and how to clear them sounds complicatedand it is. This section gives you a basic introduction. You'll see the

Section 7.6. Wrap Content with Floating Elements

subject again in Chapter 11 and eventually learn how to use floats in more sophisticated ways.

Section 7.7. Tutorial: Margins, Backgrounds, and Borders

7.7. Tutorial: Margins, Backgrounds, and Borders I n t his t ut orial, you'll explore elem ent s of t he CSS box m odel, adj ust t he spacing around obj ect s on a page, add colorful borders t o it em s on a page, and cont rol t he size and flow of page elem ent s. To get st art ed, you need t o download t he t ut orial files locat ed on t his book's com panion Web sit e at www.sawm ac.com / css/ . Click t he t ut orial link and download t he files. ( All of t he files are enclosed in a ZI P archive. See det ailed inst ruct ions for unzipping t he files on t he Web sit e.) The files for t his t ut orial are cont ained inside t he chapt er_07 folder.

7.7.1. Controlling Page Margins As usual, you'll be working on a Web page from Cosm oFarm er.com . You'll st art by cont rolling t he m argin around t he edges of t he Web page.

Tip: For a sneak preview of the final result, check out Figure 7-18.

1. La u n ch a W e b br ow se r a n d ope n t h e file ch a pt e r _ 0 7

side ba r .h t m l.

I n t his case, t here's already an ext ernal st yle sheet at t ached t o t he page t hat adds som e basic t ext form at t ing, as you can see in Figure 7- 15. 2. I n you r fa vor it e t e x t e dit or , ope n ch a pt e r _ 0 7

side ba r .h t m l.

St art by adding an int ernal st yle sheet t o t his file. 3. Click dir e ct ly a ft e r t h e closin g < / lin k > t a g ( u se d t o a t t a ch t h e e x t e r n a l st yle sh e e t ) , h it En t e r ( Re t u r n ) , a n d t h e n t ype < st yle t ype = " t e x t / css" > . You've j ust creat ed t he opening st yle t ag. Next , you'll creat e a st yle t hat set s t he m argin around t he edges of t he page and adds a color t o t he background. 4. Pr e ss t h e En t e r ( Re t u r n ) k e y, a n d t h e n t ype t h e follow in g st yle : body { margin-top: 15px; margin-left: 0; margin-right: 0; padding: 0; background-color: #f8faf1; }

Section 7.7. Tutorial: Margins, Backgrounds, and Borders

This st yle m akes t he page's background a light gray- green. The m argin set t ings indent t he page cont ent 15 pixels from t he t op of t he window but rem ove all space from t he left and right edges. I n ot her words, cont ent but t s right up against t he left and right edges of t he browser window. You could have done t he sam e t hing wit h t he m argin short hand propert y ( Sect ion 7.2.1) like t his: m argin: 15px 0 0 0; .

Figu r e 7 - 1 5 . Th is W e b pa ge h a s som e ba sic t e x t st ylin g, bu t it 'll look a lot be t t e r w it h a box m ode l m a k e ove r .

Note: The padding property (padding: 0;) in this style accommodates the Opera browser, which uses padding instead of margin to define the space around the edges of the browser window.

Finally you'll add t he closing < st yle> t ag t o com plet e t he st yle sheet .

Section 7.7. Tutorial: Margins, Backgrounds, and Borders

H it En t e r ( Re t u r n ) t o cr e a t e a n e w , bla n k lin e , a n d t h e n t ype < / st yle > . Your st yle sheet 's com plet e and you're ready t o check t he page. 6. Sa ve t h e file a n d pr e vie w t h e pa ge in a W e b br ow se r . The t op line of t ext is placed a lit t le way down from t he t op of t he browser window, while t he left edge of each headline and paragraph t ouches t he left side of t he browser window. The t ype looks cram ped on t he left side like t hat , but you'll fix it lat er in t his t ut orial. Next , adj ust t he spacing around t he headlines and paragraphs.

7.7.2. Adjusting the Space Around Tags Web browsers aut om at ically insert a bit of space above and below headlines, paragraphs, list s, form s, and ot her blocklevel HTML elem ent s. The exact am ount varies from browser t o browser, so you get m ore predict able result s by set t ing t his value yourself, as described in t he following st eps. 1. Re t u r n t o you r t e x t e dit or a n d t h e side ba r .h t m l file . Click a t t h e e n d of t h e closin g br a ce of t h e body t a g se le ct or , pr e ss En t e r ( Re t u r n ) t o cr e a t e a n e w lin e , a n d t h e n a dd t h e se t w o st yle s: h1 { margin: 0; } h2 { margin-top: 10px; margin-bottom: 0; }

The first st yle rem oves all m argins from all < h1> t ags, and t he second rem oves t he bot t om m argin from all < h2> t ags and set s t heir t op m argins t o 10 pixels. I f you preview t he page now, you'll see t hat it act ually doesn't look any different . But you can det ect a gap above t he < h1> t ag at t he t op of t he page, as well as space above and below each < h2> t ag. That 's because t here are st ill m argins above and below t he paragraph t ags and t he < h3> t ag ( " I deas for Bet t er I ndoor Agricult ure" ) .

Note: The gap between the and

tags didn't change at all because the bottom margin of the tag and the top margin of the

tag were already collapsed. (See Section 7.2.2 to learn more about the mystery of collapsing margins.)

Next , rem ove t he space bet ween t he t ops of t he paragraphs and t he bot t om s of t he < h2> t ag. 2. Click a t t h e e n d of t h e closin g br a ce of t h e h 2 t a g se le ct or , pr e ss En t e r ( Re t u r n ) t o cr e a t e a n e w lin e , a n d t h e n a dd t h is st yle : p { margin-top: 0; margin-bottom: 10px;

Section 7.7. Tutorial: Margins, Backgrounds, and Borders

}

3. Sa ve t h e file a n d pr e vie w t h e pa ge in a W e b br ow se r . The gap bet ween t he headline and t he paragraphs below has gone away, but t here's st ill a 10- pixel space bet ween each paragraph t hanks t o t he m argin- bot t om set t ing ( Figure 7- 16) .

Figu r e 7 - 1 6 . W it h j u st a fe w sh or t st yle s, you ca n a dd ba ck gr ou n d color s, con t r ol m a r gin s t h r ou gh ou t t h e pa ge , a n d t igh t e n u p t h e spa ce be t w e e n h e a dlin e s a n d pa r a gr a ph s.

Section 7.7. Tutorial: Margins, Backgrounds, and Borders

7.7.3. Emphasizing Text with Backgrounds and Borders Backgrounds can colorize a page or highlight a sidebar, but you can use t hem for plent y of ot her purposeslike m aking headlines st and out . Borders, t oo, are m ore versat ile t han t hey get credit for. Sure, t hey're fine for fram ing im ages, adding lines around t ables, and drawing boxes on a Web page, but a single border can draw at t ent ion t o headlines, separat e paragraphs of t ext , and replace t he gray, clunky- looking HTML < hr> t ag. I n t his sect ion, you'll use backgrounds and borders t o em phasize t he page headings. 1. Re t u r n t o you r t e x t e dit or a n d t h e side ba r .h t m l file . I t 's t im e t o edit t he h1 st yle you already creat ed. 2. Add t w o pr ope r t ie s t o t h e h 1 st yle , so t h a t it look s lik e t h is: h1 { margin: 0; border-top: solid 2px #fbef99; border-bottom: solid 2px #fbef99; }

These t wo propert ies add a yellow line above and below t he headline. I f you preview t he page now, you'll see t he t wo lines are t oo close t o t he t ext . There could also st and t o be a lit t le m ore breat hing room bet ween t he left edge of t he page and t he t ext in t he headline. You'll m ake t hose t wo adj ust m ent s next . 3. Add som e pa ddin g t o t h e h 1 st yle : h1 { margin: 0; border-top: solid 2px #fbef99; border-bottom: solid 2px #fbef99; padding: 5px 0 5px 25px; }

Padding indent s t he t ext of t he headline from it s borders. This short hand m et hod of specifying t he padding propert ies ( Sect ion 7.2.1) indent s t he t ext 5 pixels from t he t op line, 0 from t he right edge, and 5 pixels from t he bot t om line while indent ing t he left edge 25 pixels. I f you preview t he page, you'll see t hat t he t wo lines ext end t he full lengt h of t he browser window, t ouching bot h t he left and right edges, while t he headline t ext is nicely indent ed. Now you can see t he reason for set t ing t he left and right m argins of t he body t o 0it allows t he heading's border lines t o ext end across t he browser window wit hout gaps on t he left or right side. I n a m om ent , you'll also indent t he h2 and p t ags, but first add a bit m ore punch t o t hat opening headline by adding a background color. 4. Add t w o m or e pr ope r t ie s t o t h e h 1 st yle a ba ck gr ou n d color a n d a t e x t color lik e so:

Section 7.7. Tutorial: Margins, Backgrounds, and Borders

h1 { margin: 0; border-top: 2px solid #FBEF99; border-bottom: 2px solid #FBEF99; padding: 5px 0 5px 25px; background-color: #294e56; color: #fff; }

Wit h t his adj ust m ent , t he whit e headline t ext j um ps out from a dark st ripe across t he page. Next , add a bot t om underline t o each < h2> t ag. 5. Edit t h e h 2 st yle by a ddin g a m a r gin a n d bot t om bor de r , a s follow s: h2 { margin-top: 10px; margin-bottom: 0px; margin-left: 25px; border-bottom: 1px solid #5f9794; }

The left m argin indent s t he headline, m oving it away from t he left edge of t he browser window and aligning it wit h t he t ext in t he < h1> t ag. You need t o m ake t he sam e change t o t he paragraph t ags, in order t o line t hem up as well. 6. Add a 2 5 px le ft m a r gin t o t h e p st yle : p { margin-top: 0; margin-bottom: 10px; margin-left: 25px; }

This st ep indent s t he paragraphs t o m at ch t he indent of t he ot her headlines. You can also rewrit e t hese t hree m argin set t ings using t he m argin short cut propert y: m argin: 0 0 10px 25px; . 7. Sa ve t h e file a n d pr e vie w t h e pa ge in a W e b br ow se r . The page should look like Figure 7- 17. The bullet ed list of it em s doesn't look very good yet . This sidebar elem ent needs t o look like a real sidebarplaced in it s own box and m oved t o t he side of t he page. You'll do t hat in t he next sect ion.

7.7.4. Building a Sidebar Sidebars are com m on elem ent s in m ost t ypes of print publicat ions like m agazines, books, and newspapers. They com part m ent alize and highlight sm all chunks of inform at ion like a resource list , cont act inform at ion, or a relat ed anecdot e. But t o be effect ive, sidebars shouldn't int errupt t he flow of t he m ain st ory. They should, like t he nam e says, sit unobt rusively off t o one side, which you can easily m ake happen wit h CSS.

Section 7.7. Tutorial: Margins, Backgrounds, and Borders

1. Re t u r n t o you r t e x t e dit or a n d t h e side ba r .h t m l file . First , you m ust isolat e t he region of t he page t hat m akes up t he sidebar. The < div> t ag ( Sect ion 3.1) is t he perfect t ool. You can enclose any am ount of HTML int o it s own self- cont ained chunk by wrapping it in a < div> t ag. 2. Click be for e t h e ope n in g < h 3 > t a g ( t h e on e w it h t h e " I de a s for Be t t e r I n door Agr icu lt u r e " h e a dlin e ) . Th e n t ype < div cla ss= " side ba r " > , a n d pr e ss En t e r ( Re t u r n ) . This CSS m arks t he beginning of t he sidebar and applies a class t o it . You'll creat e t he .sidebar class st yle in t he next st ep, but first you need t o indicat e t he end of t he sidebar by closing t he < div> . 3. Click a ft e r t h e closin g < / u l> t a g. ( Th is in dica t e s t h e e n d of a bu lle t e d list .) Pr e ss En t e r ( Re t u r n ) , a n d t h e n t ype < / div> . You've j ust wrapped a headline and bullet ed list inside a < div> t ag. Next , you'll creat e a st yle for it .

Figu r e 7 - 1 7 . A da r k ba ck gr ou n d color ca n m a k e a h e a dlin e pop, lik e t h e t op h e a dlin e on t h is pa ge . Th e pa ddin g pr ope r t y ope n s u p t h e h e a dlin e by m ovin g t h e t e x t a w a y fr om t h e e dge s of t h e bor de r a n d m or e st r on gly h igh ligh t in g t h e ba ck gr ou n d. A sin gle bor de r a dds su bt le e m ph a sis t o se con d le ve l h e a dlin e s.

Section 7.7. Tutorial: Margins, Backgrounds, and Borders

4. I n t h e pa ge 's st yle sh e e t , a dd t h e follow in g st yle be low t h e < p> st yle you cr e a t e d e a r lie r : .sidebar { width: 200px; float: right; margin: 10px; }

This st yle set s t he widt h of t he cont ent area ( where t he t ext appears) t o 200 pixels, float s it t o t he right side of t he browser window, and adds 10 pixels of space around t he box. I f you preview t he page in a browser, you'll see t hat t he basic shape and placem ent of t he sidebar's set , but t here's one problem : The < h2> t ags appear under- neat h t he box. Even t hough t he float ed sidebar m oves t he t ext of t he headlines out of t he way, float s don't displace border or backgrounds. Those j ust appear right under t he

Section 7.7. Tutorial: Margins, Backgrounds, and Borders

float ed sidebar ( see Sect ion 7.6.1) . You can easily adj ust for t his bit of CSS frailt y by edit ing t he < h2> t ag st yle you creat ed earlier.

Note: If your site's audience includes a lot of Opera fans (the Web browser, not the musical extravaganza), then skip step 5 and just live with the border extending underneath the floated sidebar. This fix is more like a break for that browser. 5. Loca t e t h e h 2 st yle a n d a dd t h e ove r flow pr ope r t y, lik e so: h2 { margin-top: 10px; margin-bottom: 0px; margin-left: 25px; border-bottom: 1px solid #5F9794; overflow: hidden; }

Set t ing t he overflow propert y t o hidden hides t he borders t hat pass beyond t he headline t ext and under t he float ing elem ent . ( Unfort unat ely, I nt ernet Explorer 6 and 5 don't get it and st ill display t he borders underneat h t he sidebar. But you'll fix t hat in t he next sect ion.) I n t he m eant im e, m ake t he sidebar st and out by adding a border and background color. 6. Add t h e follow in g t w o pr ope r t ie s t o t h e .side ba r st yle : border: solid 1px #fdd041; border-top-width: 5px;

The first propert y, border, is a short hand m et hod of set t ing t he st yle, widt h, and color of all four borders. I n t his, case, it creat es a 1- pixel, solid yellow line around t he sidebar. The second propert y, border- t op- widt h, overrides t he 1- pixel widt h set by t he border propert y, creat ing a t hicker t op border for som e visual int erest . Finally, you'll add a lit t le padding t o indent t he t ext from t he inside edges of t he box, as well as a background color. 7. Add t w o m or e pr ope r t ie s t o t h e side ba r st yle , lik e so: .sidebar { width: 200px; float: right; margin: 10px; border: solid 1px #fdd041; border-top-width: 5px; padding: 10px; background-color: #fbef99; }

The background- color propert y adds a light yellow color t o t he sidebar and covers t he borders of t he < h2> t ags.

Section 7.7. Tutorial: Margins, Backgrounds, and Borders

To finish up t he sidebar, you'll creat e a few descendent select ors t o cont rol t he form at t ing for t he t ags inside t he sidebar. First , you'll address t he < h3> t ag, which in som e browsers ( not ably Firefox) has unnecessary space above it . 8. Add t h is st yle t o you r st yle sh e e t : .sidebar h3 { margin: 0; text-align: center; }

This descendent select or st yle affect s only < h3> t ags t hat appear inside a t ag t hat has t he .sidebar class applied t o it . I t cent ers t he t ext and elim inat es any m argins around t he headline. Because Web browsers indent list s, you'll not ice t hat t he bullet ed list in t he narrow sidebar looks weird wit h such a large left indent . 9. Add on e m or e st yle t o t h e st yle sh e e t : .sidebar ul { padding: 0; margin: 10px 0 0 0; }

Because som e browsers use t he left padding propert y and ot hers use t he left m argin propert y t o indent list s, you need t o m ake sure bot h are set t o 0 in order t o reliably elim inat e a left m argin from list s. I n t his case, we've added 10 pixels of t op m argin space above t he list t o separat e it a bit from t he headline above. I f you preview t he page now, you'll not ice one big error. The bullet s appear eit her out side of t he sidebar box, or not at all ( in t he case of I nt ernet Explorer) . Sim ply adding a lit t le indent t o t he list it em s brings t he bullet s back int o view. 10. Add t h e follow in g st yle t o in de n t e a ch bu lle t e d it e m : .sidebar li { margin-left: 1.5em; }

This st yle adds enough space t o t he left of each list it em , m oving t he bullet s back int o view. Now it 's t im e t o preview your handiwork. 11. Sa ve t h e file a n d pr e vie w t h e W e b pa ge in a br ow se r . The page should look like Figure 7- 18. Unfort unat ely, t he page doesn't look like Figure 7- 18 in I nt ernet Explorer 6 or 5 for Windows. A couple of bugs in t hose

Section 7.7. Tutorial: Margins, Backgrounds, and Borders

browser versions affect t he page's appearance for t he worse. Read on for t he fixes.

7.7.5. Fixing the Browser Bugs While t he sidebar.ht m l file looks j ust fine in I nt ernet Explorer 7, earlier versions of t hat browser don't display t he page correct ly. I f you have access t o eit her of t hese browsers, check it out . You'll see t he problem s.

Figu r e 7 - 1 8 . A h a n dfu l of CSS st yle s a dds de sign e le ga n ce t o h o- h u m H TM L. N ot ice h ow t h e floa t e d side ba r bot h a t t r a ct s a t t e n t ion a n d m ove s it ou t of t h e w a y of t h e m a in body of t e x t .

For one t hing, t he border under t he t wo < h2> headlines t ravels underneat h t he sidebar. I n st ep 5 in Sect ion 7.7.4, you used t he overflow propert y t o fix t his problem in m ost browsers, but you need som et hing else t o get I E 5 and 6 st raight ened out . I n addit ion, t he m argin around t he sidebar is not iceably larger on t he right . And in I E 5, t he sidebar's m uch sm aller t han in ot her browsers.

Section 7.7. Tutorial: Margins, Backgrounds, and Borders

Tip: If you don't have access to check for yourself, just trust that problems are there and use this section to learn how to fix them for the sake of your visitors who are stuck with IE 5 or 6.

The first bug, t he overext ended borders, affect s bot h I E 5 and 6. You'll t ackle t his one first : 1. Re t u r n t o you r t e x t e dit or a n d t h e side ba r .h t m l file . You first need t o creat e a st yle t hat only I nt ernet Explorer 6 and earlier can read. 2. Add t h is n e w st yle t o t h e e n d of t h e side ba r .h t m l pa ge 's st yle sh e e t : * html h2 { }

The * ht m l part of t he st yle is in fact an incorrect CSS select or. However, I E 6 and earlier consider it legit im at e, so by adding h2 t o creat e a descendent select or, I nt ernet Explorer 6 and earlier t reat s t his as a valid st yle for form at t ing any < h2> t ag. ( See Sect ion 7.6 for m ore on t his t echnique.) So far, you've j ust got an em pt y st yle. Tim e t o add som e propert ies. 3. Add t h e follow in g pr ope r t y t o t h e n e w st yle : * html h2 { zoom: 1; }

Zoom isn't an official CSS propert y. I t 's a Microsoft - only propert y m eant t o enlarge an elem ent on a page. That 's not why you're using it here, t hough. I n t his case, t he zoom propert y prevent s t he border from ext ending under t he float in I E 5 and 6. I t fixes t he border bugalbeit in a com plet ely arcane way. ( See t he box in Sect ion 11.1 for m ore det ails on t his browser voodoo.) Next problem : The double- m argin bug t hat 's causing t hat ext ra space on t he right side of t he sidebar. Since t his bug affect s bot h I E 5 and 6, you'll creat e anot her * ht m l st yle for t he sidebar. ( Rem em ber, * ht m l hides t he rest of t his select or.sidebarfrom all browsers except I E 6 for Windows and earlier.) 4. Add t h is st yle t o you r st yle sh e e t : * html .sidebar { display: inline; }

Section 7.7. Tutorial: Margins, Backgrounds, and Borders

This use of t he display propert y is anot her nonsensical bit of CSS. But it does t he j ob: I t t ricks I E int o rem oving t he ext ra right - hand m argin. ( See Sect ion 11.1 for a full explanat ion.) Two down, one t o go. I nt ernet Explorer 5 on Windows incorrect ly calculat es t he widt h of t he sidebar, so it looks t hinner t han in ot her browsers. Blam e it on t he old I E 5 box m odel bug ( see Sect ion 7.5.3) . 5. To fa t t e n u p t h e sk in n y side ba r , a dd t h is pr ope r t y t o t h e * h t m l .side ba r st yle : width: 222px;

Why 222 pixels? The .sidebar st yle you creat ed in st ep 4 in Sect ion 7.7.4 has a widt h of 200 pixels. All ot her browsers dedicat e 200 pixels t o t he cont ent onlyt he headline and bullet ed list . I E 5, on t he ot her hand, includes t he widt hs of t he borders and padding as part of t his 200 pixels, m aking t he act ual area dedicat ed t o t he cont ent m uch sm aller in t hat browser. For I E 5 t o provide t he sam e room as ot her browsers for t he headline and bullet ed list , you need t o give a widt h value equal t o t he com bined widt h of t he cont ent , borders, and padding. So, 200 pixels ( t he widt h value for t he cont ent ) plus 2 pixels ( t he widt h of t he left and right borders) , plus 20 pixels ( t he widt hs of t he left and right padding) equals 222 pixels. At t his point , you've successfully t ricked I E 5 t o display t he sidebar at t he sam e widt h as all ot her browsers. But you're not off t he hook yet . Because I E 6 also get s t his widt h sent t o it , you m ust t ell I E 6 t o reset t he widt h propert y back t o 200 pixels. 6. Add on e fin a l pr ope r t y t o t h is st yle so t h a t it look s lik e t h is: * html .sidebar { display: inline; width: 222px; w\idth: 200px; }

No, t hat backslash isn't a t ypo, nor is it t eenage t ext - m essaging slang for " your j eans are t oo t ight ." The backslash in t he propert y nam e w\ idt h is j ust anot her exam ple of st range- but - t rue browser t rickery. I E 5 ignores t he m isspelled propert y, while I E 6 underst ands t hat it 's t he widt h propert y and t hat you're set t ing it s value back t o 200px. ( See Sect ion 7.5.3 for all t he gruesom e det ails.) 7. Sa ve t h e file a n d pr e vie w t h e pa ge in I n t e r n e t Ex plor e r 5 or 6 on W in dow s. The page should now look like Figure 7- 18 in t hose browsers as well. Dealing wit h t hese browser bugs is an unfort unat e realit y for every Web developer. You'll learn solut ions ( also known as hacks) t o part icular bugs t hroughout t his book. Also, in Chapt er 14, you'll learn even m ore st rat egies for dealing wit h hacks used t o fix I nt ernet Explorer browser bugs.

7.7.6. Going Further To t ry out your newfound skills, t ry t his exercise on your own: Creat e a class st yle for form at t ing t he copyright not ice t hat appears at t he bot t om of t he sidebar.ht m l page ( called, say, .copyright ) . I n t his st yle, add a border above t he copyright not ice, change it s t ext color, shrink it s font size, and change t he t ype t o uppercase. ( Hint : Use t he t ext - t ransform

Section 7.7. Tutorial: Margins, Backgrounds, and Borders

propert y discussed in Sect ion 6.3.2.) Aft er you've creat ed t he st yle, apply it t o t he paragraph wit h t he copyright not ice. The solut ion's in t he sidebar_finished.ht m l file inside t he ch07_finished folder.

Chapter 8. Adding Graphics to Web Pages

Chapter 8. Adding Graphics to Web Pages No m at t er how m uch you gussy up your t ext or fiddle wit h borders and m argins, not hing affect s t he appearance of your sit e m ore t han t he im ages you add t o it . And once again, CSS gives you m ore im age cont rol t han HTML ever dream ed of. You can work wit h graphics in CSS on t wo front s: t he < im g> t ag and t he background- im age propert y ( which you can at t ach t o any num ber of t ags) . This chapt er delves int o som e of t he creat ive ways you can deploy im ages wit h CSS. The best way t o learn how t o use graphics in CSS is t o see t hem in act ion, so t his chapt er has t wocount 'em , t wot ut orials. By creat ing a phot o gallery Web page and using im ages for overall page st yling, you'll be an im age- slinging pro in no t im e.

Section 8.1. CSS and the Tag

8.1. CSS and the Tag The venerable < im g> t ag has been t he workhorse of phot o- heavy Web sit es since t he beginning of t he World Wide Web. Even sit es wit hout phot os use it t o add logos, navigat ion but t ons, and illust rat ions. While CSS doesn't have any propert ies specifically aim ed at form at t ing im ages, you can t ake advant age of t he CSS propert ies you've already learned t o enhance your sit e's graphics. For exam ple, t he border propert y's a quick and sim ple way t o fram e an im age or unify t he look of a gallery of phot os. Here's a rundown of t he CSS propert ies m ost com m only used wit h im ages: ●

●

●

●

Bor de r s. Use one of t he m any border propert ies ( Sect ion 7.3) t o fram e an im age. You'll see an exam ple of t his in t he t ut orial in Sect ion 8.6.1. Since each border side can be a different color, st yle, and widt h, you've got lot s of creat ive opt ions here. Pa ddin g . The padding propert y ( Sect ion 7.2) adds space bet ween a border and an im age. By put t ing a lit t le breat hing room bet ween a phot o and it s fram e, padding sim ulat es t he fiberboard m at t hat 's used in t radit ional pict ure fram es t o surround and offset t he im age. And by set t ing a background color ( Sect ion 7.4) , you can even change t he color of t he " m at ." Floa t . Float ing an im age m oves it t o eit her t he left or right edge of t he page, orif t he im age is cont ained in anot her layout elem ent such as a sidebart he im age's cont aining elem ent ( Sect ion 7.2.1) . Text and ot her page elem ent s t hen wrap around t he im age. You can even float m ult iple im ages t o creat e a flexible, m ult i- row im age gallery. You'll see an exam ple of t his in t he t ut orial in Sect ion 8.6.3. M a r gin s. To add space bet ween an im age and ot her page cont ent , use t he m argin propert y ( Sect ion 7.2) . When you float an im age, t he t ext t hat wraps around it is usually uncom fort ably close t o t he im age. Adding a left m argin ( for right - float ed im ages) or right m argin ( for left - float ed im ages) adds space bet ween t ext and t he graphic.

I n m ost cases, you won't creat e a st yle for t he < im g> t ag it self. Form at t ing t his t ag's t oo broad a brush, since it form at s all im ages on your pageeven t hose wit h very different funct ions such as t he logo, navigat ion but t ons, phot os, and even graphic ads. You wouldn't , aft er all, want t he sam e black fram e around all of t hose im ages. I nst ead, you should use a class st yle, such as .galleryI m age, or .logo t o apply t he st yle select ively. Anot her approach is t o use a descendent select or ( Sect ion 3.1) t o t arget im ages grouped t oget her in one sect ion of a page. I f you have a gallery of phot os, you can place all of t he phot os inside a < div> t ag wit h an I D nam e of gallery, and t hen creat e a st yle for j ust t he im ages inside t hat < div> , like t his: # gallery im g.

Section 8.2. Background Images

8.2. Background Images The background- im age propert y is t he key t o m aking visually st unning Web sit es. Learn how t o use it and it s cousin propert ies, and you can m ake your sit e st and head and shoulders above t he rest . For an exam ple of t he power of background im ages, check out www.csszengarden.com ( Figure 8- 1) . The HTML for bot h t he pages shown here is exact ly t he sam e; t he visual differences are accom plished by using different background im ages. How's t hat for CSS power? I f you've built a few Web sit es, you've probably used an im age for t he background of a pageperhaps a sm all graphic t hat repeat s in t he background of t he browser window creat ing a ( hopefully) subt le pat t ern. That t im e- honored HTML m et hod used t he < body> t ag's background at t ribut e. But CSS does t he sam e j ob bet t er.

Note: In the next few pages, you'll meet three background image properties by learning the individual CSS code for each one. Later in the chapter you'll learn a shorthand method that'll save you a lot of typing.

Figu r e 8 - 1 . CSSze n ga r de n .com sh ow ca se s t h e pow e r of Ca sca din g St yle Sh e e t s by de m on st r a t in g h ow you ca n t r a n sfor m a sin gle H TM L file in t o t w o u t t e r ly diffe r e n t look in g pa ge s w it h t h e h e lp of CSS. Th e r e a l se cr e t t o m a k in g e a ch of t h e w on de r fu l de sign s look u n iqu e is t h e e x t e n sive u se of ba ck gr ou n d im a ge s. ( I n fa ct , w h e n you look a t t h e se pa ge s' H TM L code , you 'll se e t h e r e isn 't a sin gle < im g> t a g in it .)

Section 8.2. Background Images

Section 8.2. Background Images

The background- im age propert y adds a graphic t o t he background of an elem ent . To put an im age in t he background of a Web page, you can creat e a st yle for t he < body> t ag: body { background-image: url(images/bg.gif); }

The propert y t akes one value: t he keyword url, followed by a pat h t o t he graphic file enclosed in parent heses. You can use an absolut e URL like t hisurl( ht t p: / / www.cosm ofarm er.com / im age/ bg.gif) or a docum ent - or root - relat ive pat h like t hese: url(../ images/bg.gif) /* document-relative */ url(/images/bg.gif) /* root-relative */

As explained in t he box in Sect ion 8.3, docum ent - relat ive pat hs provide direct ions in relat ion t o t he st yle sheet file, not t he HTML page you're st yling. These will be one and t he sam e, of course, if you're using an int ernal st yle sheet , but you need t o keep t his point in m ind if you're using an ext ernal st yle sheet . Say you've got a folder nam ed st yles( cont aining t he sit e's st yle sheet s) and a folder nam ed im ages ( holding t he sit e's im ages) . Bot h t hese folders are locat ed in t he sit e's m ain folder along wit h t he hom e page ( Figure 82) . When a visit or views t he hom e page, t he ext ernal st yle sheet 's also loaded ( st ep 1 in Figure 8- 2) . Now, say t he ext ernal st yle sheet includes a st yle for t he < body> t ag wit h t he background im age propert y set t o use t he graphic file bg.gif in t he im ages folder. The docum ent - relat ive pat h would lead from t he st yle sheet t o t he graphic ( st ep 2 in Figure 8- 2) . I n ot her words, t he st yle would look like t his: body { background-image: url(../images/bg.gif);

This pat h breaks down like t his: ../ m eans " go up one level" ( t hat is, up t o t he folder cont aining t he st yles folder) ; im ages/ m eans " go t o t he im ages folder" ; and bg.gif specifies t hat file.

Figu r e 8 - 2 . D ocu m e n t - r e la t ive pa t h s a r e ca lcu la t e d in r e la t ion t o t h e st yle sh e e t ,

Section 8.2. Background Images

n ot t h e W e b pa ge be in g st yle d.

I n t he exam ples so far, t he pat h isn't enclosed in quot es as in HTML but quot es are fine, t oo. I n CSS, all t hree of t he following code lines are kosher:

background-image: url(images/bg.gif); background-image: url("images/bg.gif"); background-image: url('images/bg.gif');

Note: Internet Explorer 5 for Mac doesn't recognize URLs that are specified inside of single quotes like this: url(' images/ bg.gif').

Section 8.2. Background Images

UP TO SPEED URL Types I n CSS, you need t o specify an URL when you add a background im age or at t ach an ext ernal st yle sheet using t he @im port m et hod ( Sect ion 2.4.2) . An URL or Uniform Resource Locat or is a pat h t o a file locat ed on t he Web. There are t hree t ypes of pat hs: absolut e pat h, root relat ive pat h, and docum ent - relat ive pat h. All t hree sim ply indicat e where a Web browser can find a part icular file ( like anot her Web page, a graphic, or an ext ernal st yle sheet ) . An absolut e pat h is like a post al addressit cont ains all t he inform at ion needed for a Web browser locat ed anywhere in t he world t o find t he file. An absolut e pat h includes ht t p: / / , t he host nam e, and t he folder and nam e of t he file. For exam ple: ht t p: / / www.cosm ofarm er.com / im ages/ bluegrass.j pg. A root - relat ive pat h indicat es where a file's locat ed relat ive t o a sit e's t op- level foldert he sit e's root folder. A root - relat ive pat h doesn't include ht t p: / / or t he dom ain nam e. I t begins wit h a / ( slash) indicat ing t he root folder of t he sit e ( t he folder t he hom e page is in) . For exam ple / im ages/ bluegrass.j pg indicat es t hat t he file bluegrass.j pg is locat ed inside a folder nam ed im ages, which is it self locat ed in t he sit e's t op- level folder. An easy way t o creat e a root - relat ive pat h is t o t ake an absolut e pat h and st rip off t he ht t p: / / and t he host nam e. A docum ent - relat ive pat h specifies t he pat h from t he current docum ent t o t he file. When it com es t o a st yle sheet , t his m eans t he pat h from t he st yle sheet t o t he specified file, not t he pat h from t he current Web page t o t he file. Here are som e t ips on which t ype t o use: ●

●

●

I f you're point ing t o a file t hat 's not on t he sam e server as t he st yle sheet , you m ust use an absolut e pat h. I t 's t he only t ype t hat can point t o anot her Web sit e. Root - relat ive pat hs are good for im ages st ored on your own sit e. Since t hey always st art at t he root folder, you can m ove t he st yle sheet around wit hout affect ing t he pat h from t he root t o t he im age on t he sit e. However, t hey're difficult t o use when first building your designs: you can't preview root - relat ive pat hs unless you're viewing your Web pages t hrough a Web servereit her your Web server out on t he I nt ernet , or a Web server you've set up on your own com put er for t est ing purposes. I n ot her words, if you're j ust opening a Web page off your com put er using t he browser's File Open com m and, t hen you won't see any im ages placed using root - relat ive pat hs. Docum ent - relat ive pat hs are t he best when you're designing on your own com put er wit hout t he aid of a Web server. You can creat e your CSS files and t hen review t hem in a Web browser sim ply by opening a Web page st ored on your hard drive. These pages will work fine when you m ove t hem t o your act ual, living, breat hing Web sit e on t he I nt ernet , but you'll have t o re- writ e t he URLs t o t he im ages if you m ove t he st yle sheet t o anot her locat ion on t he server.

Section 8.3. Controlling Repetition

8.3. Controlling Repetition One problem wit h t he old HTML background at t ribut e is t hat t he graphic always t iles, filling up t he ent ire background of a Web page. ( Not only t hat , it 's being phased out from current HTML st andards.) Fort unat ely, CSS gives you far great er cont rol. Using t he background- repeat propert y you can specify how ( or if at all) an im age t iles:

background-repeat: no-repeat;

The propert y accept s four values: repeat , no- repeat , repeat - x, and repeat - y: ●

repeat is t he norm al set t ing for background im ages t hat you want t o display from left t o right and t op t o bot t om unt il t he ent ire space is filled wit h a graphic ( Figure 8- 3) .

Figu r e 8 - 3 . Be ca r e fu l w h e n t ilin g im a ge s in t h e ba ck gr ou n d of a W e b pa ge . Ch oose a n im a ge w it h ou t a lot of con t r a st t h a t t ile s se a m le ssly ( le ft ) . An im a ge w it h t oo m u ch con t r a st ( r igh t ) , m a k e s t e x t h a r d t o r e a d.

●

●

●

no- repeat displays t he im age a single t im e, wit hout t iling or repet it ion. I t 's a very com m on opt ion, and you'll frequent ly use it when placing im ages int o t he background of t ags ot her t han t he body. You can use it t o place a logo in t he upper corner of a page or for using cust om graphics for bullet s in list s, t o nam e a couple. ( You'll see t he bullet exam ple in act ion in t he t ut orial in Sect ion 8.7.3.) I n anot her exam ple, you'll use it at t he t op of a < div> t ag t o creat e a rounded edge at t he t op of a box ( Sect ion 8.7.4) . repeat - x repeat s an im age horizont ally along t he x- axis ( t he horizont al widt h of t he page, if your geom et ry's rust y) . I t 's perfect for adding a graphical banner t o t he t op of a Web page ( Figure 8- 4, left ) or a decorat ive border along t he t op or bot t om of a headline. ( See Sect ion 8.7.2 in t he t ut orial for an exam ple of t his effect .) repeat - y repeat s an im age vert ically along t he y- axis ( t he vert ical lengt h of t he page) . You can use t his set t ing t o add a graphic sidebar t o a page ( Figure 8- 4, right ) or t o add a repeat ing drop shadow t o eit her side of a page elem ent ( like a

Section 8.3. Controlling Repetition

sidebar) .

Section 8.4. Positioning a Background Image

8.4. Positioning a Background Image Placing and t iling a background im age is j ust half t he fun. Wit h t he background- posit ion propert y, CSS let s you cont rol t he exact placem ent of an im age in a num ber of ways. You can specify bot h t he horizont al and vert ical st art ing point s for a graphic in t hree wayskeywords, exact values, and percent ages.

Figu r e 8 - 4 . Add gr a ph ic ba ck gr ou n ds t o t h e ba n n e r s a n d side ba r s of a pa ge by t a k in g a dva n t a ge of t h e t ilin g con t r ol offe r e d by t h e r e pe a t - x ( le ft ) a n d r e pe a t - y ( r igh t ) opt ion s.

8.4.1. Keywords You get t wo set s of keywords t o work wit h. One cont rols t he t hree horizont al posit ionsleft , cent er, right and t he ot her cont rols t he t hree vert ical posit ionst op, cent er, bot t om ( Figure 8- 5) . Suppose you want t o place a graphic direct ly in t he m iddle of a Web page. You can creat e a st yle like t his: body { background-image: url(bg_page.jpg); background-repeat: no-repeat; background-position: center center; }

To m ove t hat graphic t o t he t op- right corner, j ust change t he background posit ion t o t his: background-position: right top;

Note: If you've decided to tile an image (by setting background-repeat to one of the values listed in the previous section), then the background-position property controls the starting point of the first tile. So, for example, if you use the repeat option, you'll still see the entire background filled by the image. It's just that the position of the first tile changes based on which background-position setting you used.

Section 8.4. Positioning a Background Image

Keywords are really useful when you want t o creat e vert ical or horizont al banners. I f you want ed a graphic t hat 's cent ered on a page and t iled downwards in order t o creat e a backdrop for cont ent ( Figure 8- 6, left ) , t hen you'd creat e a st yle like t his: body { background-image: url(background.jpg); background-repeat: repeat-y; background-position: center top; }

Figu r e 8 - 5 . You ca n u se k e yw or ds t o posit ion a n im a ge in t h e ba ck gr ou n d. Th e or de r in w h ich you spe cify t h e k e yw or ds doe sn 't m a t t e r t op ce n t e r a n d ce n t e r t op bot h h a ve t h e sa m e e ffe ct .

Likewise, using t he bot t om , cent er, or t op keywords you can posit ion a horizont ally repeat ing im age using repeat - x ( Sect ion 8.3) in a part icular place on t he page ( or wit hin a st yled elem ent ) . Use t he t echnique shown on t he right side of Figure 8- 6, t o posit ion a line under headlines in t he t ut orial in Sect ion 8.7.2.

Figu r e 8 - 6 . Use t h e ba ck gr ou n d- posit ion pr ope r t y w h e n t ilin g a n im a ge e it h e r ve r t ica lly ( le ft ) or h or izon t a lly ( r igh t ) . I n t h e le ft im a ge , t h e gr a ph ic is a w ide w h it e box w it h dr op sh a dow s on t h e le ft a n d r igh t e dge s. Th e pa ge 's ba ck gr ou n d color is gr a y, so t h e t e x t of t h e pa ge look s lik e it 's on a w h it e pie ce of pa pe r floa t in g a bove t h e scr e e n .

Section 8.4. Positioning a Background Image

BROWSER BUG Bottoming Out in Firefox When displaying an im age in t he background of a Web page, Firefox doesn't always vert ically posit ion t he im age in t he way you'd expect . For exam ple, if you set t he vert ical posit ion t o bot t om , t he im age doesn't always appear at t he bot t om of t he browser window. This happens when t he cont ent on a page is short er t han t he browser window is t all. I f t he Web page has only a couple of paragraphs of t ext and it 's displayed on a really large m onit or, Firefox t reat s t he " bot t om " as t he bot t om of t he last paragraph, not t he bot t om of t he browser window. I f you run int o t his annoyance, t hen j ust add t his st yle t o your st yle sheet : ht m l { height : 100% ; } .

8.4.2. Precise Values You can also posit ion background im ages using pixel values or em s. You use t wo values: one t o indicat e t he dist ance bet ween t he im age's left edge and t he cont ainer's left edge, and anot her t o specify t he dist ance bet ween t he im age's t op edge and t he st yle's t op edge. ( Put anot her way, t he first value cont rols t he horizont al posit ion, t he second value cont rols t he vert ical posit ion.) Say you want cust om bullet s for a list . I f you add a background im age t o t he < li> t ag, t he bullet s oft en don't line up exact ly ( see Figure 87, t op) . So you can j ust nudge t he bullet s int o place using t he background- posit ion propert y ( Figure 8- 7, bot t om ) . I f t he list would look bet t er wit h, say, t he bullet s five pixels fart her t o t he right and eight pixels fart her down, t hen add t his declarat ion t o t he st yle defining t he background im age: background-position:5px 8px;

Figu r e 8 - 7 . Usin g cu st om im a ge s for bu lle t s som e t im e s r e qu ir e s ca r e fu l posit ion in g, so t h a t t h e bu lle t gr a ph ic a ppe a r s t h e cor r e ct dist a n ce fr om , a n d pe r fe ct ly ce n t e r e d on , t h e list it e m 's t e x t .

Section 8.4. Positioning a Background Image

You can't specify dist ances from t he bot t om or right using pixel or em m easurem ent s, so if you want t o m ake sure an im age is placed in t he exact bot t om right corner of t he page or a st yled elem ent , t hen use keywords ( bot t om right ) or percent ages, as discussed next . However, you can use negat ive values t o m ove an im age off t he right edge or above t he t op edge, hiding t hat port ion of t he im age from view. You m ay want t o use negat ive values t o crop out part of a pict ure. Or, if t he background im age has lot s of ext ra whit e space at t he t op or left edge, you can use negat ive values t o elim inat e t hat ext ra space.

8.4.3. Percentage Values Finally, you can use percent age values t o posit ion a background im age. Using percent ages in t his m anner is t ricky, and if you can achieve t he effect you're aft er wit h t he keyword or precise values discussed previously, t hen use t hem . But you have t o use percent ages t o posit ion an elem ent in a spot t hat 's proport ional t o t he widt h of an elem ent . For exam ple, if you want t o place a graphic t hree- quart ers of t he way across a headline, and you don't know t he widt h of t he elem ent .

Note: Percentage values are also useful for a little trick often used with float-based layouts to give left and right sidebars background colors or graphics that span the entire height of a Web page (see the Note in Section 11.1.1).

As wit h pixel or em values, you supply t wo percent ages: one t o indicat e t he horizont al posit ion and t he second t o indicat e t he vert ical posit ion. What t he percent age is m easuring is a lit t le t ricky. I n a nut shell, a percent age value aligns t he specified percent age of t he im age wit h t he sam e percent age of t he st yled elem ent . What ? The best way t o underst and how percent age values work is t o look at a few exam ples. To posit ion an im age in t he m iddle of a page ( like t he one shown in t he cent er of Figure 8- 8) you'd writ e t his:

background-position:50% 50%;

This declarat ion places t he point on t he im age t hat 's 50 percent from it s left edge direct ly on t op of t he point t hat 's 50 percent from t he left edge of t he page ( or what ever elem ent you've st yled wit h t he background im age) . The declarat ion also aligns t he point on t he im age t hat 's 50 percent from it s t op wit h t he point t hat 's 50 percent from t he t op edge of t he page or st yled elem ent . I n ot her words, t he cent er of t he im age is aligned wit h t he cent er of t he elem ent . This m eans t hat , when using percent ages, t he exact point on t he im age t hat 's being aligned can be a m oving t arget . ( That 's because your st yled elem ent 's posit ioning percent ages can change if your visit ors resize t heir browsers.) As wit h pixel and em values, you can specify negat ive percent age values, t hough t he result s can be hard t o predict . You can also m ix and m at ch pixel/ em values wit h percent age values. For exam ple, t o place an im age t hat 's 5 pixels from t he elem ent 's left edge, but placed in t he m iddle of t he elem ent 's height , you could use t his: background-position: 5px 50%;

Section 8.4. Positioning a Background Image

Due t o poor browser support , don't m ix and m at ch percent ages or pixels/ em s wit h keywords: t op 50px, for exam ple. Som e browsers can handle t his com binat ion, but som e can't .

Note: Although background images can raise the visual quality of your Web pages, they usually don't show up if your visitor prints the page. Most browsers can print out the backgrounds, but it usually requires extra work on your visitor's part. If you plan to have your visitors print pages from your site, then you may want to keep using the tag to insert mission-critical images like your site logo, or a map to your store.

Figu r e 8 - 8 . Ea ch of t h e fou r im a ge s pict u r e d h e r e h a ve be e n posit ion e d on t h is W e b pa ge ( r e pr e se n t e d by t h e la r ge bla ck box ) u sin g pe r ce n t a ge va lu e s. W h e n u sin g pe r ce n t a ge va lu e s, fir st ide n t ify t h e " a n ch or poin t " on t h e im a ge : 5 0 pe r ce n t 5 0 pe r ce n t , for e x a m ple , is t h e ce n t e r of t h e m iddle im a ge . N e x t , ide n t ify t h e 5 0 / 5 0 poin t on t h e pa ge it se lf: a ga in , t h a t w ou ld be dir e ct ly in t h e ce n t e r of t h e pa ge . Th a t spot 's w h e r e t h e im a ge 's a n ch or poin t ge t s pla ce d. Th e t h r e e ot h e r im a ge s a r e a ll posit ion e d in t h e sa m e w a y.

8.4.4. Fixing an Image in Place Norm ally, if t here's a background im age on a Web page and t he visit or has t o scroll down t o see m ore of t he page, t he background im age scrolls as well. As a result , any pat t ern in t he background of t he page appears t o m ove along wit h t he t ext . Furt herm ore, when you have a non- repeat ing im age in t he background, it can pot ent ially scroll off t he t op of t he page out of view. I f you've placed t he sit e's logo or a wat erm ark graphic in t he background of t he page, t hen you m ay not want it t o disappear when visit ors scroll.

Section 8.4. Positioning a Background Image

The CSS solut ion t o such dilem m as is t he background- at t achm ent propert y. I t has t wo opt ionsscroll and fixed. Scroll is t he norm al Web browser behavior; t hat is, it scrolls t he background im age along wit h t he t ext and ot her page cont ent . Fixed, however, keeps t he im age in place in t he background ( see Figure 8- 9) . So if you want t o place your com pany's logo in t he upper left corner of t he Web page, and keep it t here even if t he viewer scrolls, t hen you can creat e a st yle like t his: body { background-image: url(images/logo.gif); background-repeat: no-repeat; background-attachment: fixed; }

The fixed opt ion's also very nice when using a repeat ing, t iled background. When you have t o scroll, t he page's t ext disappears off t he t op, but t he background doesn't m ove: t he page cont ent appears t o float gracefully above t he background.

Figu r e 8 - 9 . Look in g for a w a y t o n a il dow n a sit e logo ( lik e t h e Cosm oFa r m e r 2 .0 im a ge ) so t h a t w h e n vie w e r s scr oll dow n t h e pa ge t h e logo st a ys in pla ce ? Usin g t h e fix e d opt ion for t h e ba ck gr ou n da t t a ch m e n t pr ope r t y, you ca n lock a ba ck gr ou n d im a ge in pla ce . Th a t w a y, e ve n if t h e pa ge is ve r y lon g a n d t h e visit or h a s t o scr oll dow n , t h e im a ge r e m a in s visible on t h e W e b pa ge ( bot t om ) .

Section 8.4. Positioning a Background Image

Note: CSS lets you "fix" the background image for a style applied to any element, not just the tag. However, the Windows versions of Internet Explorer 6 and earlier only understand the background-attachment property when used with a style applied to the tag.

Section 8.5. Using Background Property Shorthand

8.5. Using Background Property Shorthand As you can see from t he exam ples above, t o really t ake cont rol of background im ages you need t o harness t he power of several different background propert ies. But t yping out background- im age, backgroundat t achm ent , and so on again and again can really t ake it s t oll on your hands. But t here's an easier wayt he background short hand propert y. You can act ually bundle all t he background propert ies ( including t he background- color propert y you learned about last chapt er) int o a single line of st ream lined CSS. Sim ply t ype background followed by t he values for background- color, background- im age, background- at t achm ent , and background- posit ion. The following st yle set s t he background t o whit e, and adds a non- repeat ing fixed background im age sm ack dab in t he m iddle of t he page:

FREQUENTLY ASKED QUESTION Finding Free Imagery I 'm not an art ist . I can't draw, can't paint , don't even own a digit al cam era. Where can I find art work for m y sit e? Thank goodness for t he Web. I t 's t he one- st op shop for creat ive geniuses who couldn't paint t hem selves int o a corner if t hey t ried. There are plent y of pay- t o- download sit es for st ock phot os and illust rat ions, but t here are also quit e a few com plet ely free opt ions. For phot os, check out Morgue File ( www.m orguefile.com ) , which despit e t he grisly nam e has m any wonderful phot os supplied free of charge by people who love t o t ake pict ures. The Creat ive Com m ons sit e provides opt ions as well: ht t p: / / creat ivecom m ons.org/ im age/ . Open Phot o ( ht t p: / / openphot o.net / gallery/ browse.ht m l) also supplies im ages based on Creat ive Com m ons licenses. ( Alt hough t hey don't cost m oney, not all phot os on t hese sit es can be used in com m ercial proj ect s. Make sure you read t he fine print for any phot o you wish t o use.) I f you're looking for bullet s t o add t o list s, icons t o supercharge your navigat ion bar, or pat t erns t o fill t he screen, t here are plent y of sit es t o choose from . Bullet Madness ( www. st ylegala.com / feat ures/ bullet m adness/ ) offers 200 bullet s including variat ions on t he com m on arrow, circle and square as well as m ore det ailed bullet s represent ing soft ware icons, iPods, folders, and m ore. Som e Random Dude ( no, really; t hat 's t he nam e of t he Web sit e) offers a set of 121 icons free of charge: www.som erandom dude.net / srdproj ect s/ sanscons. And if you're looking for int erest ing t iling pat t erns, check out t he pat t erns on t hese sit es: Kaliber10000 ( www.k10k.net / fram es.aspx?sect ion= pat t erns) , Pat t ern4u ( www. kollerm edia.at / index.php/ pat t ern4u/ ) , and Squidfingers ( ht t p: / / squidfingers.com / pat t erns/ ) .

body { background: #FFF url(bullseye.gif) scroll center center no-repeat; }

You don't need t o specify all of t he propert y values eit her. You can use one or any com binat ion of t hem . For

Section 8.5. Using Background Property Shorthand

exam ple: background: yellow is t he equivalent of background- color: yellow. Any propert y value you leave out sim ply revert s t o it s norm al behavior, so say you specified only an im age: background: url(image/bullseye.gif)

That 's t he equivalent of t his: background: url(image/bullseye.gif) fixed left top repeat;

Because t he background propert y is so m uch fast er t o t ype, and it achieves all t he sam e ends as it s longwinded siblings, use it liberally when adding background im ages ( and colors) t o your st yles.

Section 8.6. Tutorial: Creating a Photo Gallery

8.6. Tutorial: Creating a Photo Gallery A phot o gallery's a perfect exam ple of an eye- cat ching Web page. This t ut orial brings t oget her a variet y of im age st yling t echniques. You'll form at im ages wit h fram es and capt ions, creat e a phot o gallery t hat 's flexible enough t o look great in a variet y of window sizes, and use background im ages t o creat e professional- looking drop shadows. To get st art ed, you need t o download t he t ut orial files locat ed on t his book's com panion Web sit e at www.sawm ac.com / css/ . Click t he t ut orial link and download t he files. All of t he files are enclosed in a ZI P archive, so you need t o unzip t hem first . ( There are det ailed inst ruct ions on t he Web sit e.) The files for t his t ut orial are in t he chapt er_08 folder.

8.6.1. Framing an Image 1. La u n ch a W e b br ow se r a n d ope n t h e file ch a pt e r _ 0 8

im a ge _ e x

im a ge .h t m l.

As usual, you'll be working on a Web page from Cosm oFarm er.com ( Figure 8- 10) . I n t his case, t here's already an ext ernal st yle sheet at t ached t o t he page, adding som e basic t ext form at t ing.

Figu r e 8 - 1 0 . Be for e a n d a ft e r CSS, t h a t is. I f you r e ly j u st on H TM L, im a ge s t a k e u p lot s of spa ce ( le ft ) . W it h a lit t le CSS ( r igh t ) you ca n n ice ly fr a m e a n im a ge a n d m ove it ou t of t h e w a y.

2. Ope n t h e file im a ge .h t m l in you r fa vor it e t e x t e dit or . St art by adding an int ernal st yle sheet and an em pt y class st yle.

Section 8.6. Tutorial: Creating a Photo Gallery

Note: The same caveat that you've read in previous tutorials about creating internal style sheets applies here. (See the box in Section 3.1.) In the final tutorial in this chapter, you'll go through the process of converting an internal style sheet into an external style sheet. 3. Click dir e ct ly a ft e r t h e < lin k > t a g ( u se d t o a t t a ch t h e e x t e r n a l st yle sh e e t ) , h it Re t u r n , a n d t h e n t ype t h e follow in g:

This CSS adds a new int ernal st yle sheet j ust above t he closing < / head> t ag. The select or im g.figure t arget s any < im g> t ag wit h t he figure class applied t o it . You'll use t his t o select ively form at only t he im ages you want . 4. Add floa t a n d m a r gin pr ope r t ie s t o t h e st yle you j u st cr e a t e d, lik e so: float: right; margin-left: 10px; margin-bottom: 10px;

The right float m oves t he im age t o t he right side of t he page, let t ing t he t ext m ove up and wrap around t he phot o's left edge. The left and bot t om m argins give t he phot o a lit t le breat hing room and m ove it away from t he t ext . Next , you'll add a border and som e padding t o m ake t he im age look m ore like a real snapshot . 5. Add bor de r a n d pa ddin g, so t h a t t h e fin ish e d st yle look s lik e t h is: img.figure { float: right; margin-left: 10px; margin-bottom: 10px; border: 1px solid #666; padding: 10px; }

I f you preview t he page right now, you won't see a change, since t he class st yle has no effect unt il you've added t he class t o a t ag. 6. Loca t e t h e < im g> t a g a n d a dd cla ss= " figu r e " so t h a t t h e t a g look s lik e t h is:

Now t hat im age t akes on all of t he form at t ing propert ies you defined for t he .figure class st yle. 7. Pr e vie w t h e pa ge in a W e b br ow se r . I t sh ou ld look lik e t h e r igh t im a ge in Figu r e 8 - 1 0 . You can find t he com plet ed version of t his exercise, im age_finished.ht m l in t he chapt er_08_finishe

im age_ex folder.

A pict ure m ay be wort h a t housand words, but som et im es you st ill need a few words t o explain a pict ure. So in t he next part of t his t ut orial, you'll add a capt ion below t he phot o.

Note: Internet Explorer 5 for Windows doesn't display the padding between the photo and its border. D'oh!

Section 8.6. Tutorial: Creating a Photo Gallery

8.6.2. Adding a Caption You'll frequent ly want t o add a capt ion t o an im age or phot o t o provide m ore inform at ion about t he subj ect , where t he phot o was t aken, and so on. I nst ead of j ust float ing t he im age, as you did in t he previous exercise, you want t he capt ion t ext t o float as well. The best way t o float bot h is t o wrap t he im age and t he t ext in a cont ainera < div> t agt hat 's float ed as a single unit . This m et hod keeps t he phot o and it s relat ed t ext t oget her. I f you decide lat er t hat you want t o change t heir layout perhaps float t hem t o t he left no problem : You sim ply change t he form at t ing for t he ent ire cont ainer. 1. I n a t e x t e dit or , ope n t h e file ch a pt e r _ 0 8

ca pt ion _ e x

ca pt ion .h t m l folde r .

Begin by adding a lit t le HTML t o creat e t he cont ainer. 2. Loca t e t h e < im g> t a g in t h e code , a n d a dd < div cla ss= " figu r e " > be for e t h a t t a g. This m arks t he beginning of t he cont ainer. Now close t he < div> t o indicat e t he end of t he cont ainer. 3. Fin d t h e closin g < / p> t a g of t h e pa r a gr a ph dir e ct ly a ft e r t h e im a ge a n d t ype < / div> . Th e code sh ou ld n ow look lik e t h is:

Figure 1: Creeping Bentgrass is best suited for outdoor use and should be avoided by the indoor farmer.

Figure 6: The dandelion: scourge of the apartment farmer.

or tags to remove bullets from each list item. 3. Add t h e follow in g t w o pr ope r t ie s t o t h e .side ba r li st yle : background-image: url(images/flower_bullet.gif); background-repeat: no-repeat;

You've seen t hese t wo propert ies before. They add an im age t o t he background and t urn off repeat ing so t hat t he graphic appears only once. I f you preview t he page, you'll see t hat t he bullet s current ly overlap t he list t ext and t he list it em s are a lit t le j am m ed t oget her ( Figure 8- 16, left ) . A lit t le padding and m argin will fix t his. 4. Add t w o m or e pr ope r t ie s t o t h e .side ba r li st yle :

padding-left: 18px; margin-bottom: 6px;

Section 8.7. Tutorial: Using Background Images

The left padding adds em pt y space, effect ively m oving t he t ext out of t he way in order t o display t he new bullet icon. The bot t om m argin adds j ust a bit of breat hing room bet ween each list it em ( Figure 8- 16, m iddle) . There's j ust one final flaw. The bullet im age is a t ad t oo high on t he line, causing t he t ip of t he icon t o st ick out t oo far above t he t ext . But you can easily fix t hat wit h t he background- posit ion propert y. 5. Fin ish t h is st yle by a ddin g ba ck gr ou n d- posit ion : 0 px 2 px ; Th e com ple t e d st yle sh ou ld look lik e t h is: .sidebar li { list-style: none; background-image: url( images/flower_bullet.gif); background-repeat: no-repeat; background-position: 0px 2px; padding-left: 18px; margin-bottom: 6px; }

This last st yle declarat ion posit ions t he bullet icon t o t he far left , t wo pixels from t he t op of t he list it em . I t m oves t he icon down j ust a sm idgen, enough t o m ake t he bullet look perfect .

Note: As discussed in Section 6.6, this kind of exact positioning is precisely why you should use the background property instead of the liststyle-image property for adding graphic bullets to your lists. 6. Sa ve t h e file a n d pr e vie w t h e pa ge in you r br ow se r . The list should now have fanciful flower icons inst ead of dreary black circles ( Figure 8- 16, right ) .

Figu r e 8 - 1 6 . Re pla cin g r e gu la r bla ck bu lle t s w it h you r ow n gr a ph ics is e a sy. Ju st a fe w e x t r a st e ps e n su r e t h e bu lle t s a n d t e x t a r e pla ce d in t h e cor r e ct loca t ion .

8.7.4. Adding Rounded Corners to the Sidebar

Section 8.7. Tutorial: Using Background Images

At t his point , t he sidebar, like m uch of t he page, is rat her boxy. To add visual variet y, soft en t he sidebar's appearance wit h som e rounded corners. I n a nut shell, you'll first add a background im age wit h rounded corners t o t he bot t om of t he sidebar. Then, for t he rounded corners at t he t op of t he box, you'll add a background im age t o t he first t ag in t he sidebar ( t he < h3> t ag) . 1. Re t u r n t o you r t e x t e dit or a n d t h e side ba r .h t m l file t h a t you 've be e n w or k in g on . The graphic you'll place in t he bot t om of t he sidebar has a decorat ive phot o and t wo rounded lower corners. 2. Loca t e t h e .side ba r st yle in t h e file 's in t e r n a l st yle sh e e t . Re pla ce t h e ba ck gr ou n d- color de cla r a t ion ba ck gr ou n dcolor : # CBF6 2 2 ;w it h t h is: background: #CBF622 url( images/bg_bottom.gif) center bottom no-repeat;

This short hand propert y includes t he sam e background color you j ust replaced plus inst ruct ions for adding a graphic t o t he cent er and bot t om of t he sidebar. Preview t he page now, and you'll see t he graphic, but a few t hings aren't quit e right , as shown at left in Figure 8- 17. There's space on bot h t he left and right side of t he im age, so it doesn't look like it 's act ually t he bot t om of t he sidebarit j ust looks like a phot o inside t he sidebar. Also, you can't read all of t he t ext since som e of it overlaps t he im age. Finally, t he border around t he sidebar appears out side of t he graphic, m aking t he sidebar appear t o st ill have a square bot t om . You'll t ackle t hese problem s one by one. 3. I n t h e .side ba r st yle , r e m ove t h e follow in g pr ope r t y de cla r a t ion : pa ddin g: 1 0 px ; The graphic is 220 pixels wide, and t he widt h of t he sidebar is also set t o 220 pixels. However, t he 10 pixels of padding adds 10 pixels of space around t he sidebar, and 20 pixels ( left and right ) t o t he overall widt h of t he sidebar. Rem oving t he padding propert y m akes t he sidebar shrink down t o t he widt h of t he graphic.

Note: The rounded corners technique used here is for a fixed-width box. That means if you change the width of the sidebar, you'll need to recreate the graphics at the same width to match. For a few techniques that let you create rounded corners with more flexibilityand require more CSS and HTML codevisit these pages:

To add som e room at t he bot t om of t he sidebar, so t hat t he pict ure doesn't int erfere wit h t he t ext , t urn t o t he padding- bot t om propert y. 4. Add t h e st yle de cla r a t ion pa ddin g- bot t om : 7 5 px ; t o t h e .side ba r st yle . Padding is t he space bet ween t he borders of an elem ent and t he cont ent . By adding 75 pixels of bot t om padding, you ensure t hat t here's plent y of room for t he background im age, so t hat t ext can never overlap it . There's one final problem t o fix: The border around t he sidebar appears around t he background graphic ( Figure 8- 17, m iddle) . Sim ply rem oving t he border does t he t rick.

Figu r e 8 - 1 7 . I t t a k e s a fe w st e ps t o pla ce t h e im a ge a n d t w e a k t h e displa y of t h e side ba r t o

Section 8.7. Tutorial: Using Background Images

a ch ie ve con vin cin g r ou n de d bot t om cor n e r s.

5. Re m ove t h e bor de r pr ope r t y fr om .side ba r , so t h a t t h e fin a l ve r sion of t h e st yle look s lik e t h is: .sidebar { width: 220px; float: right; margin: 10px; background: #CBF622 url( images/bg_bottom.gif) center bottom no-repeat; padding-bottom: 75px; }

6. Sa ve t h e file a n d pr e vie w it in a W e b br ow se r . The sidebar should look like Figure 8- 17, right . Not ice t hat even t hough you elim inat ed t he border, t here's st ill a borderline around t he bot t om , curved corners, and sides of t he base of t he sidebar. That line isn't creat ed wit h CSS; it 's j ust a line drawn direct ly on t he graphic. You'll next insert a graphic t o m ake t he t op of t he sidebar box rounded as well. I t would be really cool if you could add a background im age t o t he t op of t he sidebar and a different background im age t o t he bot t om of t he sidebar. This way you'd have rounded corners on bot h t he t op and bot t om , but t he sidebar it self could expand t o fit what ever cont ent was added t o it . Unfort unat ely, CSS 2.1 let s you add only one background im age per st yle, so you m ust find som et hing else t o " hook" t he second background im age on, like a t ag som ewhere in t he sidebar. I n t his case, since t he im age adds rounded corners t o t he t op of t he sidebar box, you can apply t he st yle t o t he first t ag inside t he sidebar. You'll use a descendent select or t o do t hat .

Note: Future versions of CSS will allow multiple background images for a single style. So far, only one browserSafarirecognizes them. 7.

Section 8.7. Tutorial: Using Background Images

Loca t e t h e .side ba r h 3 st yle in t h e e x t e r n a l st yle sh e e t . ( I t 's dir e ct ly be low t h e .side ba r st yle you j u st m odifie d.) Th e n a dd t h e follow in g lin e of code t o t h e st yle : background: url(images/top_bg.gif) center top no-repeat;

By now, t his kind of short cut st yle should look fam iliar. I t adds a graphic t o t he t op and cent er of t he st yle. I n t his case, it 'll appear in t he background of t he < h3> t ag inside t he sidebar. At t his point , t he rounded corners are in place, and t he box is, well, a lit t le less boxy. You'll j ust add a few final t ouches t o t he headline by m aking t he t ext whit e so it st ands out from t he newly added graphic and adding a lit t le padding above and below t he headline so it isn't so cram ped. 8. Add t w o a ddit ion a l pr ope r t ie s t o t h e .side ba r h 3 st yle so t h a t it look s lik e t h is: .sidebar h3 { font-size: 1.4em; margin: 0; text-align: center; text-transform: uppercase; background: url(images/top_bg.gif) center top no-repeat; color: #FFF; padding: 5px; }

I f you preview t he page now, t he sidebar looks finished…alm ost . Look closely at t he left and right edges and you'll not ice t hat while t here's an out line around t he bot t om graphic, t hat line doesn't appear on eit her side of t he sidebar where t he bullet ed list appears ( Figure 8- 18, left ) . One solut ion would be t o sim ply m ake t he bot t om graphic a solid background color wit hout an out line, but t hat wouldn't be m uch fun. I nst ead, you'll add left and right borders t o t he bullet ed list . The lines from t he border overlap t he out line on t he graphic, giving t he appearance of one unified line running around t he ent ire sidebar. 9. Fin d t h e .side ba r u l st yle . Th e n a dd t w o bor de r de cla r a t ion s so t h e fin a l st yle look s lik e t h is: .sidebar ul { color: #666; font-size: 1.2em; margin: 0; padding: 10px 5px 0 5px; border-left: 1px solid #E73A10; border-right: 1px solid #E73A10; }

Now t he unordered list has t wo borders on eit her side. Because t here's no padding on t he sidebar it self, t hose borders ext end t o t he very edges, m aking t hem appear t o act ually be bordering t he sidebar ( Figure 8- 18, right ) . 10. Sa ve t h e file a n d pr e vie w t h e pa ge in a W e b br ow se r . The final page m akes use of background im ages in ways t hat m ay not feel im m ediat ely like im ages at allt o creat e t he curved sidebar corners and com plet e it s borders. Creat ive use of background im ages adds dept h t o your Web page designs, and m akes your Web sit e look richer and m ore professional.

Figu r e 8 - 1 8 . Alt h ou gh t h e gr a ph ic a t t h e bot t om of t h e side ba r h a s a lin e dr a w n a r ou n d it s e dge , t h e u n or de r e d list doe sn 't ( le ft ) . By a ddin g bor de r s t o t h e list , it a ppe a r s t h a t on e u n ifie d bor de r is dr a w n a r ou n d t h e cu r ve d side ba r ( r igh t .)

Section 8.7. Tutorial: Using Background Images

8.7.5. Creating an External Style Sheet There's one final t ask t o perform . I t 's one t hat you'll probably do t im e and t im e again in your CSS career. Aft er you've finalized your design using an int ernal st yle sheet , it 's t im e t o t ake t hose st yles and place t hem in an ext ernal st yle sheet for use by all of t he pages of your sit e. 1. I n you r t e x t e dit or , cr e a t e a n e w file . Sa ve it a s st yle s.css in t h e sa m e folde r a s t h e side ba r .h t m l file . This docum ent is your ext ernal st yle sheet . You'll copy t he st yles you em bedded in t he sidebar.ht m l file and past e t hem int o t his file. 2. Re t u r n t o t h e side ba r .h t m l file , a n d se le ct a ll of t h e code be t w e e n t h e ope n in g < st yle > a n d closin g < / st yle > t a gs. Don't select t he st yle t ags t hem selves. Those are HTML code, and an ext ernal st yle sheet m ust cont ain only CSS code. 3. Cu t t h e code fr om t h e file by ch oosin g Edit

Cu t .

You're rem oving t he code from t his page, since you'll link t o t he ext ernal st yle sheet in a m om ent . 4. Re t u r n t o t h e e m pt y st yle s.css file , a n d pa st e t h e code by ch oosin g Edit

Pa st e . Sa ve t h e file .

Now all of t he CSS code is in it s own file. You can link any page in your sit e t o t his file and your pages can share t he sam e form at t ing inst ruct ions.

Section 8.7. Tutorial: Using Background Images

Now you j ust need t o at t ach t he st yle sheet t o t he HTML page. 5. Re t u r n t o t h e side ba r .h t m l file . M a k e su r e t h e < st yle > t a gs a r e st ill in pla ce , a n d t h e n a dd on e lin e of code be t w e e n t h e se t a gs:

Note: The other way to attach an external style sheet is with a link tag (Section 2.4.2). To use this tag, first remove the opening and closing

This descendent select or changes t he color of all < a> t ags t hat are inside t ags t hat have an I D of # m ain. The m ain body t ext on t he page is wrapped in a < div> t ag wit h an I D of # m ain. Adding and nam ing a < div> like t his m akes it easy t o creat e st yles t hat t arget j ust t he HTML cont aining t he page's m ain t ext . This st yle changes t he color of t he t ext for links, but only t hose inside t his m ain body < div> . I f you preview t he page now, you'll see t hat t he color of t he link at t he bot t om of t he pagewhich is cont ained in a separat e < div> wit h a different I Disn't affect ed. Now, t im e t o rem ove t hat boring old underline beneat h t he link. 4. Add t e x t - de cor a t ion : n on e ; t o t h e # m a in a st yle you j u st cr e a t e d. This rem oves t he underline, but also m akes t he link less visible on t he page. Rem em ber you should always do som et hing t o m ake links st and out and seem clickable t o your sit e's visit ors.

Figu r e 9 - 1 1 . H e r e 's a ba sic W e b pa ge w it h lin k s in t h e ir st a n da r d br ow se r con figu r a t ion u n de r lin e d a n d blu e . I n t h is ca se , som e lin k s poin t t o ot h e r pa ge s on t h e sit e , som e poin t t o ot h e r sit e s, a n d on e is a n e m a il a ddr e ss. I n t h is t u t or ia l, you 'll st yle e a ch of t h e se lin k s diffe r e n t ly.

Section 9.5. Tutorial: Styling Links

5. Add fon t - w e igh t : bold; t o t h e # m a in a st yle . Now links appear in bold ( ot her t ext m ay appear bold, t oo) . Next you'll replace t he underline, but you'll do it a bit m ore creat ively, using a border inst ead of t he t ext - decorat ion propert y. 6. Add a bor de r de cla r a t ion t o t h e st yle , so it look s lik e t h is: #main a { color: #8C1919; text-decoration: none; font-weight: bold; border-bottom: 2px dotted #A5E410; }

The links really st and out , and using a border inst ead of t he norm al underline applied t o links let s you change t he line's color, size, and st yle ( Figure 9- 12, left ) . Tim e t o t ake it a st ep furt her by adding a rollover effect , so t he link's background changes color when t he m ouse

Section 9.5. Tutorial: Styling Links

m oves over it . 7. Add a :h ove r pse u do- cla ss st yle t o t h e st yle sh e e t : #main a:hover { background-color: #FCC423; }

This pseudo- class applies only when t he m ouse is over t he link. The int eract ive qualit y of rollovers let s visit ors know t he link does som et hing ( Figure 9- 12, right ) .

Figu r e 9 - 1 2 . W it h a cou ple of st yle s, you ca n ch a n ge t h e look of a n y lin k . W it h t h e :h ove r pse u do- cla ss, you ca n e ve n sw it ch t o a diffe r e n t st yle w h e n t h e m ou se m ove s ove r t h e lin k ( r igh t ) .

9.5.2. Adding a Background Image to a Link The em ail link at t he bot t om of t he page rem ains unaffect ed by t he st yles you've creat ed so far ( Figure 9- 13, t op) . That 's fineyou have ot her plans for t hat m ailt o link. Since it point s t o an em ail address, clicking it doesn't t ake a visit or t o anot her page, but inst ead launches an em ail program . To provide a visual cue em phasizing t his point , you'll add a cut e lit t le em ail icon. 1. Add a n ot h e r de sce n de n t se le ct or t o t h e in t e r n a l st yle sh e e t of t h e ba t h t u b.h t m l file : #legal a { color: #666666; background: url(images/email.gif) no-repeat left center; }

The em ail link's inside a < div> t ag wit h an I D of legal, so t his st yle affect s only t his link, and t he color declarat ion m akes it gray. The background propert y adds an im age on t he left edge of t he link. Finally, t he no- repeat value forces t he graphic t o appear j ust a single t im e. Trouble is, t he graphic lies direct ly underneat h t he link, so it 's hard t o read t he t ext ( Figure 9- 13, m iddle) . 2.

Section 9.5. Tutorial: Styling Links

Add 2 0 pix e ls of le ft pa ddin g t o t h e # le ga l a st yle you j u st cr e a t e d: padding-left: 20px;

Rem em ber t hat padding adj ust s t he space bet ween cont ent and it s border. So adding som e left padding m oves t he t ext over 20 pixels but leaves t he background in place. One last t ouch: m ove t he ent ire link a lit t le away from t he copyright not ice. 3. Add 1 0 pix e ls of le ft m a r gin t o t h e st yle , so it fin a lly e n ds u p lik e t h is: #legal a { color: #666666; background: url(images/email.gif) no-repeat left center; padding-left: 20px; margin-left: 10px; }

This sm all visual adj ust m ent m akes it clear t hat t he icon's relat ed t o t he link and not part of t he copyright not ice ( Figure 9- 13, bot t om ) .

Figu r e 9 - 1 3 . Ju st a fe w su bt le t ou ch e s ca n h e lp m a k e a lin k 's pu r pose obviou s. I n t h is ca se , a pla in lin k ( t op) be com e s cle a r ly ide n t ifia ble a s a n e m a il lin k ( bot t om ) .

9.5.3. Highlighting External Links

Section 9.5. Tutorial: Styling Links

At t im es you m ay want t o indicat e t hat a link point s t o anot her Web sit e. I n t his way, you can give your visit ors a visual clue t hat t here's addit ional inform at ion elsewhere on t he I nt ernet , or warn t hem t hat t hey'll exit your sit e if t hey click t he link. I n t he next few st eps, you'll creat e a special st yle for ext ernal links. 1. Add t h is st yle t o t h e ba t h t u b.h t m l in t e r n a l st yle sh e e t : #main a.external { background-image: url(images/globe.png); background-repeat: no-repeat; background-position: right top; padding-right: 18px; border-bottom: none; }

As wit h t he em ail link st yle you j ust creat ed, t his st yle adds a background im age. I t places t he im age at t he right side of t he link. Set t ing t he border- bot t om propert y t o none elim inat es t he green, dashed border t hat appears under links point ing t o ot her pages on t he Cosm oFarm er sit e. None of t he ext ernal links on t he page have changed yet . Now t hat you've got your new class st yle.ext ernalyou should apply it t o any ext ernal links you want t o form at . 2. I n t h e pa ge 's H TM L code , loca t e t h e t h r e e e x t e r n a l lin k s. ( H in t : Th e y'r e in a n u n or de r e d list a bou t t w o- t h ir ds of t h e w a y dow n t h e pa ge .) Add cla ss= " e x t e r n a l" t o e a ch of t h e < a > t a gs:
• American Standard Bathtubs
• Cast-iron tub buying guide
• Vintage Tubs


I f you preview t he page in a Web browser, you'll see t hose t hree links have a sm all globe icon at t heir right ( Figure 9- 14, t op) . The links higher up on t he page are globe- free. They point t o ot her Cosm oFarm er pages, so you didn't apply t he ext ernal class t o t hem .

Tip: You've been learning about the rules for CSS 2.1 (the most widely supported version of CSS). But you can use a CSS 3 selector to automatically target any link beginning with http://. Just change the name of the selector in step 1 above from #main a.external to #main a[href^='http://']. When you use this selector, you don't have to apply classes to individual links as in step 2. The downside: Only Internet Explorer 7, Safari, Firefox, and Opera 9 recognize the selector. IE 6 folks won't see the style at all.

Next , give t hese links a rollover effect using t he Pixy m et hod described in Sect ion 9.1.1. As a m at t er of fact , t he background graphic you added in st ep 1globe.pngact ually cont ains t wo im ages. Current ly, only t he t op im age is visible, and you want t he graphic's posit ion t o shift when a visit or m ouses over t he link. 3. I m m e dia t e ly a ft e r t h e st yle you cr e a t e d in st e p 1 , a dd t h e follow in g st yle : #main a.external:hover { background-position: right -24px; color: #152D6A; }

This st yle bot h changes t he color of t he t ext and adj ust s t he posit ion of t he background im age. I t m oves t he graphic up - 24 pixels, essent ially m oving t he globe im age out of view and exposing a new rollover im age. There's one problem , however. The background color from t he # m ain a: hover st yle ( creat ed in st ep 7 in Sect ion 9.1.1) also appears. As you can see Figure 9- 14, m iddle, t he graphic obscures part of t he background. I t 'll look bet t er when you rem ove t hat background color.

Section 9.5. Tutorial: Styling Links

4. Edit t h e st yle you j u st cr e a t e d by a ddin g a ba ck gr ou n d- color pr ope r t y: #main a.external:hover { background-position: right -24px; color: #152D6A; background-image: url(images/globe_highlight.png); background-color: #FFF; }

This declarat ion set s t he background color t o whit e, m at ching t he whit e background of t he page ( Figure 9- 14, bot t om ) .

Figu r e 9 - 1 4 . Usin g a cla ss st yle , you ca n for m a t e x t e r n a l lin k s diffe r e n t ly t h a n ot h e r lin k s on t h e pa ge . A globe icon is on e w a y t o in dica t e t h a t a lin k le a ds ou t in t o t h e gr e a t e r W e b ( t op) . You m a y h a ve t o t w e a k a st yle t o ove r com e pr ope r t ie s in h e r it e d fr om ot h e r st yle s, lik e t h e ba ck gr ou n d color in h e r it e d fr om a m or e ge n e r ic st yle ( m iddle ) . H e r e , t h e fix is r e m ovin g a ba ck gr ou n d color fr om t h e lin k 's :h ove r st yle ( bot t om ) .

9.5.4. Marking Visited Pages To round out t he look of t he links on t his page, you'll add one m ore st yle. This one applies only in one cert ain casewhen a link's been visit ed. Using t he : visit ed pseudo- class, it 's easy t o add a graphic m arker indicat ing pages som eone has already been t o. 1. Add on e la st st yle t o t h e st yle sh e e t : #main a:visited { color: #999; }

Now, when t he Web browser has already visit ed one of t he pages linked t o from t his page, it m akes t hat link gray. By m aking t he color duller and light er t han ot her links, you m ake t he link visually recede from t he page ( Figure 9- 15, t op) . But j ust in case t hat 's not enough inform at ion t o let people know t hey've been t o t he linked page before, you'll m ake it even m ore obvious wit h a checkm ark. 2. Edit t h e st yle you j u st cr e a t e d by a ddin g a ba ck gr ou n d pr ope r t y a n d som e pa ddin g: #main a:visited {

Section 9.5. Tutorial: Styling Links

color: #999; background: url(images/check.gif) no-repeat right center; padding-right: 18px; }

Preview t he page, click one of t he links, and t hen hit your browser's back but t on t o see how t he link changes appearance once visit ed ( Figure 9- 15, bot t om ) .

A finished version of t his t ut orial is in t he chapt er_09_finished

links folder.

9.5.5. Creating a Vertical Navigation Bar I n t his exercise you'll t urn a plain old list of links int o a spect acular navigat ion bar com plet e wit h rollover effect s and a " You are here" but t on effect . 1. I n a t e x t e dit or , ope n ch a pt e r _ 0 9

n a v_ ba r

n a v_ ba r .h t m l.

As you can see, t here's not m uch t o t his file yet . There's an int ernal st yle sheet wit h one rule set t ing up som e basic propert ies for t he < body> t ag, and an unordered list consist ing of six links. I t looks like exam ple one in Figure 9- 16. Your first st ep is t o add som e HTML so you can t arget your CSS t o form at t he links in t his list . 2. Loca t e t h e ope n in g < u l> t a g a n d a dd id= " m a in N a v" t o it , so it look s lik e t h is:


The I D at t ribut e ident ifies t his list as t he m ain navigat ion area. Use t his I D t o build descendent select ors t o form at only t hese links ( and not j ust any old link on t he page) . ( See Sect ion 3.1 for t he st ory on descendent select ors.)

Figu r e 9 - 1 5 . Le t folk s k n ow t h e y've click e d a lin k by e m ployin g t h e :visit e d pse u do- cla ss. You ca n su bt ly ide n t ify visit e d lin k s by m a k in g t h e ir color r e ce de in t o t h e ba ck gr ou n d ( t op) , or give t h e m a se n se of com ple t ion by a ddin g a ch e ck m a r k gr a ph ic ( bot t om ) .

Section 9.5. Tutorial: Styling Links

Figu r e 9 - 1 6 . W h ile it m a y fe e l lik e a lot of st e ps, t r a n sfor m in g a pla in u n or de r e d list of lin k s in t o a soph ist ica t e d n a viga t ion ba r r e qu ir e s on ly a fe w st yle s.

Section 9.5. Tutorial: Styling Links

3. Be low t h e body st yle in t h e in t e r n a l st yle sh e e t , a dd a n e w st yle : ul#mainNav { margin: 0; padding: 0; list-style: none; }

This st yle applies only t o a < ul> t ag wit h an I D of m ainNav. I t rem oves t he indent and bullet s t hat browsers apply t o unordered list s, as shown in # 2 in Figure 9- 16. Next , you'll st art form at t ing t he links. 4. Add a de sce n de n t se le ct or t o for m a t t h e lin k s in t h e list : #mainNav a { color: #000; font-size: 1.1em; text-transform: uppercase; text-decoration: none; }

This st yle defines t he basic t ext form at t ing for t he links. I t set s t he color and font size, m akes all let t ers uppercase, and rem oves t he line usually found underneat h links ( # 3 in Figure 9- 16) . Now st art m aking t he links look like but t ons. 5. To t h e # m a in N a v a st yle , a dd t h e follow in g bor de r a n d pa ddin g pr ope r t ie s: border: 1px dashed #999; padding: 7px 5px;

Section 9.5. Tutorial: Styling Links

I f you preview t he file now, you'll see a few problem s ( # 4 in Figure 9- 16) : The borders overlap and t he boxes aren't t he sam e widt h. That 's because t he < a> t ag is an inline elem ent , so t he widt h of t he box is j ust as wide as t he t ext in t he link. I n addit ion, t op and bot t om padding don't add any height t o inline boxes, so t he borders overlap. ( See Sect ion 7.2.4 for a discussion of inline boxes.) You can fix t hese problem s by changing how a browser displays t hese links. 6. To t h e # m a in N a v a st yle , a dd displa y: block ;. You've changed t he basic display of t he < a> t ag so t hat it act s like a paragraph or ot her block- level elem ent , wit h t he links neat ly st acked one on t op of t he ot her. The only problem now is t hat t hey also ext end t he full lengt h of t he browser windowa lit t le t oo wide for a but t on. You can fix t his by const raining t he widt h of t he < ul> t ag's st yle.

Note: If you preview the page in Internet Explorer 6 or earlier, you'll notice a gap between each nav button. Remain calm. You'll fix this bug in step 1 in Section 9.1.1. 7. I n t h e in t e r n a l st yle sh e e t , loca t e t h e u l# m a in N a v st yle a n d a dd w idt h : 1 7 5 px ; t o it . Wit h t he list 's widt h now set t o 175 pixels, t he links st ill expand, but t hey're lim it ed t o t he widt h of t heir cont ainer ( t he < ul> t ag) . I n m any cases, you'll have a list of links inside som e layout elem ent ( like a sidebar) t hat already has a set widt h, so you'll be able t o skip t his st ep. ( You'll learn how t o add sidebars in Part 3.) Now for t he fun part . 8. Add ba ck gr ou n d pr ope r t ie s t o t h e # m a in N a v a st yle , lik e so: #mainNav a { color: #000; font-size: 1.1em; text-transform: uppercase; text-decoration: none; border: 1px dashed #999; padding: 7px 5px; display: block; background-color: #E7E7E7; background-image: url(images/link.png); background-repeat: no-repeat; background-position: left center; }

These lines add a gray background color t o t he links and a non- repeat ing im age at t he left edge of each but t on ( # 5 in Figure 9- 16) . You st ill have a couple of t hings t o fix: The link t ext overlaps t he icon, and t he border bet ween each but t on is 2 pixels t hick. ( Technically, t he borders are st ill j ust 1 pixel t hick, but t he bot t om and t op borders of adj oining links are creat ing a 2- pixel line.)

Note: Using the background shorthand property you can write the code in step 8 like this: background: #E7E7E7 url(images/link.png) no-repeat left center;. See Chapter 8 (Section 8.5) for the details. 9. Re m ove t h e t op bor de r a n d a dj u st t h e pa ddin g for t h e # m a in N a v a st yle , so it look s lik e t h is: #mainNav a { text-decoration: none; color: #000000; font-size: 1.1em; text-transform: uppercase; border: 1px dashed #999999; border-bottom: none; padding: 7px 5px 7px 30px; display: block;

Section 9.5. Tutorial: Styling Links

background-color: #E7E7E7; background-image: url(images/link.png); background-repeat: no-repeat; background-position: left center; }

The t ext of each link sit s clear of t he icon and t he borders look great …except for one t hing. The last link's bot t om border is now gone. ( Som et im es CSS feels like t wo st eps forward, one st ep back! ) But you have a few ways t o fix t his snafu. One way is t o creat e a class st yle wit h t he proper border- bot t om set t ing, and t hen apply it t o j ust t hat first link. But it would be easier t o apply a bot t om border t o t he < ul> t ag cont aining t he list of links. ( Since t here's no padding on t hat t ag, t here's no space separat ing t he t op of t he < ul> from t he t op of t hat first link.) 10. Add a t op bor de r t o t h e u l# m a in N a v st yle so t h a t it look s lik e t h is: ul#mainNav { margin: 0; padding: 0; list-style: none; width: 175px; border-bottom: 1px dashed #999; }

There you have it : A basic navigat ion bar using borders, padding, background color and im ages ( # 6 in Figure 9- 16) .

9.5.6. Adding Rollovers and Creating "You Are Here" Links Now it 's t im e t o add som e int eract ive and advanced feat ures t o t his nav bar. First , you'll add a rollover effect t o t he but t ons in your m ain navigat ion bar. That way, t he but t ons change t o show your visit or which but t on she's about t o click. I t 's also considerat e t o let your visit or know which page of your sit e she's on. Using t he sam e HTML nav bar you already have, you can m ake t his bit of int eract ivit y happen aut om at ically. You sim ply m ake t he but t on's form at change t o m at ch t he page's sect ion. Sounds sim ple, but it does require a lit t le planning and set up, as you'll see in t he following st eps. The rollover effect is easy, so get t hat out of t he way first : 1. I n t h e n a v_ ba r .h t m l file , a dd t h e follow in g st yle t o t h e e n d of t h e st yle sh e e t : #mainNav a:hover { font-weight: bold; background: #B2F511 url(images/go.png) no-repeat 5px 50%; }

This st yle set s t he but t on's hover st at e. I t m akes t he t ext inside t he but t on bold, and ( using t he background short hand propert y) changes t he background color and im age ( Figure 9- 17) . Now, m oving t he m ouse over any of t he but t ons inst ant ly changes it s look. ( Open t he page in your Web browser and t ry it yourself.)

Figu r e 9 - 1 7 . W it h som e ba sic CSS, it 's e a sy t o cr e a t e in t e r a ct ive r ollove r e ffe ct s for n a viga t ion bu t t on s. You ca n e ve n a u t om a t ica lly h igh ligh t t h e se ct ion of t h e sit e in w h ich t h e cu r r e n t pa ge is loca t e d.

Section 9.5. Tutorial: Styling Links

Note: You can also use the Pixy method, as in step 3 in Section 9.1.1, to create the same rollover effect using just one graphics file. That approach has the added benefit of avoiding the slight delay that appears when a visitor first rolls over one of the links.

Next , m ake your navigat ion bar m ore inform at ive by highlight ing t he but t on t hat m at ches t he sect ion in which t he page is locat ed. To do so, you need t o ident ify t wo t hings in t he nav bar's HTML: 1) t he sect ion a page belongs t o, and 2) t he sect ion each link point s t o. For t his exam ple, assum e t hat t he page you're working on belongs t o t he Feat ures sect ion.

Note: Alternatively, you can create a class style that changes the appearance of a link, and apply it to the link representing the page's section. For a horoscope page, you'd apply the class to the Horoscope link in the nav bar: Horoscopes. 2. Loca t e t h e < body> t a g, a n d t h e n a dd id= " fe a t u r e " , lik e so:

Now t hat you know what sect ion t his page belongs t o, you can use a descendent select or t o creat e special CSS rules t hat apply only t o t ags on pages wit hin t he Feat ures sect ion. Next , you need t o ident ify t he sect ion each link applies t o, which you accom plish by adding som e I Ds t o t hose links. 3. I n t h e n a v ba r 's H TM L code , loca t e t h e Fe a t u r e s lin k , a n d t h e n a dd id= " fe a - t u r e Lin k " so t h e t a g look s lik e t h is: Features

This I D uniquely ident ifies t his link, providing t he inform at ion you need t o creat e a st yle t hat applies only t o t hat link. You need t o I D t he ot her links in t he navigat ion bar as well. 4. Re pe a t st e p 4 for e a ch of t h e ot h e r lin k s u sin g t h e follow in g I D s: h om e Lin k , e x pe r t Lin k , qu izLin k , pr oj e ct Lin k , a n d h or oscope Lin k . You're done wit h t he HTML part of t his exercise. Now it 's t im e t o creat e som e CSS. Because you've I D'd t he page and t he link, it 's easy t o creat e a descendent select or t o highlight t he Feat ures link. 5. Add a n ot h e r st yle t o t h e pa ge 's st yle sh e e t : body#feature a#featureLink { background: #FFFFFF url(images/bg_here.png) no-repeat 95% 50%; padding-right: 15px; padding-left: 30px; font-weight: bold; }

You've seen all t hese propert ies before. The int erest ing part 's t he select orbody# feat ure a# feat urelink. This is a very specific select or t hat applies only t o a link wit h an I D of feat ureLink t hat 's also inside a < body> t ag wit h an I D of feat ure. I f you change t he I D of t he page t o hom e, for exam ple, t he link t o t he Feat ures sect ion's no longer highlight ed. Preview t he page in a browser t o see t he effect : The Feat ures link now has a whit e background and a paperclip icon. To m ake t his work for t he ot her links, you need t o expand t his select or a lit t le…OK, m ake t hat a lot . 6.

Section 9.5. Tutorial: Styling Links

Edit t h e se le ct or for t h e st yle you j u st a dde d, lik e so: body#home a#homeLink, body#feature a#featureLink, body#expert a#experLink, body#quiz a#quizLink, body#project a#projectLink, body#horoscope a#horoscopeLink { background: #FFFFFF url(images/bg_here.png) no-repeat 95% 50%; padding-right: 15px; padding-left: 30px; font-weight: bold; }

Yes, t hat 's a lot of CSS. But your set - up work here has a big payoff. This st yle now applies t o every link in t he nav bar, but only under cert ain condit ions, which is exact ly how you want it t o behave. When you change t he id at t ribut e of t he < body> t ag t o quiz, t he link t o t he Quiz get s highlight ed inst ead of t he link t o t he Feat ures sect ion. Tim e t o t ake your work for a t est drive. 7. Ch a n ge t h e id a t t r ibu t e of t h e < body> t a g t o qu iz lik e t h is:

Preview t he page, and wham ! The Quiz link's now highlight ed wit h a whit e background and a paperclip icon ( Figure 9- 17) . The secret at t his point is t o j ust change t he I D in t he < body> t ag t o indicat e which sect ion of t he sit e a page belongs t o. For a horoscope page, change t he id t o id= " horoscope" in t he < body> t ag.

Note: Ready to take this design further? Try adding a rollover effect to complement the style you created in step 6. (Hint: Use the :hover pseudo-class as part of the selector like this: body#quiz a #quizLink:hover.) Also try adding a different graphic for the Home link. (You have a home.png file in the images folder to use.)

9.5.7. Fixing the IE Bugs What would a CSS t ut orial be if t here weren't any I nt ernet Explorer bugs t o fix? Unfort unat ely, t he navigat ion bar doesn't work quit e right in t hat browser. First , an annoying gap appears bet ween each but t on ( even in I E 7, as of t his writ ing) . I n addit ion, I E 6 and earlier t reat only t he t ext not t he ent ire area of t he but t onas clickable ( Figure 9- 18) . I n ot her browsers, m oving t he m ouse over any part of t he background ( including t he em pt y space t o t he right of t he link t ext ) highlight s t he link.

Figu r e 9 - 1 8 . I n t e r n e t Ex plor e r h a s som e pr oble m s w it h t h e n a viga t ion ba r a t t h is poin t . I t a dds spa ce be t w e e n e a ch lin k a n d w ill h igh ligh t a lin k on ly if t h e cu r sor ( cir cle d) is dir e ct ly ove r t h e t e x t lin k ..

Section 9.5. Tutorial: Styling Links

1. At t h e bot t om of t h e st yle sh e e t , a dd t h e follow in g: #mainNav li { display: inline; }

This bit of CSS changes t he nat ural behavior of list it em s from block- level elem ent s t o inline elem ent s. This workaround doesn't m ake m uch sense t heoret ically, but it at least rem oves t he space bet ween each link in t he navigat ion bar wit hout negat ively affect ing ot her browsers. The next st yle m akes I E 6 and earlier t reat t he ent ire area of t he but t on as clickable. 2. Aft e r t h e st yle you j u st a dde d, in se r t t h is I E- on ly st yle : * html #mainNav a { height: 1px; }

This st yle uses t he * ht m l hack t o apply CSS propert ies t o j ust I E 6 and earlier. I E 7 com plet ely ignores t his rule, as do all ot her browsers. The st yle declarat ion it self is nonsense: I t at t em pt s t o set t he height of t he link t o 1 pixel, som et hing t hat I E ignores, but which forces t hat browser t o see t he background of t he but t on as part of t he link. ( See t he box in Sect ion 11.1 for t he geeky det ails.) 3. Pr e vie w t h e pa ge in I n t e r n e t Ex plor e r on W in dow s. The navigat ion bar should now work as well in t hat browser as it does in m ore savvy browsers like Firefox, Opera, and Safari. To see t he com plet ed version of t his navigat ion bar, see t he file chapt er_09_finished

nav_bar

nav_bar_vert ical_finished.ht m l.

Section 9.5. Tutorial: Styling Links

Note: When creating specific styles targeted to just Internet Explorer, it's a good idea to isolate them from your other styles. Not that they're contagious, but they usually include nonsense CSS that for weird reasons smoothes out IE kinks. You don't want to read your style sheet later and get confused about why you included some bizarre CSS. In fact, the preferred method is to put IE-only styles in external style sheets and attach them using Microsoft's conditional comments feature. Get the full story in Section 14.5.2.

9.5.8. From Vertical to Horizontal Suppose you want a horizont al navigat ion bar t hat sit s at t he t op of t he page. No problem you did m ost of t he hard work in t he last part of t his t ut orial. Just m odify t hat page a lit t le t o spread t he but t ons along a single line. ( You'll use t he nav_bar.ht m l file you j ust com plet ed, so if you want t o keep t he vert ical nav bar, t hen save a copy of t he file before proceeding.) 1. M a k e su r e you 've com ple t e d a ll t h e st e ps a bove t o cr e a t e t h e ve r t ica l n a viga t ion ba r , a n d h a ve t h e file n a v_ ba r .h t m l ope n in you r t e x t e dit or . Now you'll see how easy it is t o change t he orient at ion of a navigat ion bar. St art by cleaning up som e of t he work you already did. 2. I n t h e n a v_ ba r .h t m l file 's st yle sh e e t , r e m ove t h e # m a in N a v li st yle you cr e a t e d in st e p 1 in Se ct ion 9 .1 .1 . That st yle was necessary only t o rem ove t he gap I E insert s bet ween links when but t ons are st acked one on t op of t he ot her, and t hat 's no longer an issue when t he but t ons appear side by side.

Tip: Cleaning up a style sheet by removing unnecessary styles is a good habit to get into. If you don't, you can end up with unused styles in your style sheets, causing unnecessary file size and potential confusion down the line. And here's another reason to put IE-specific styles either together at the bottom of a style sheet or in their own external style sheets: When you no longer have to support a particular version of IE, you can clean up your CSS by simply removing those styles.

You also need t o rem ove t he widt h you set for t he < ul> t ag in st ep 7 in Sect ion 9.5.5. That widt h prevent ed t he nav but t ons from spanning t he ent ire lengt h of t he page. But since t he < ul> needs t o spread out m uch wider t o cont ain t he side- by- side but t ons, t his widt h has t o go. 3. Fin d t h e u l# m a in N a v st yle , a n d t h e n r e m ove t h e w idt h : 1 7 5 px ; de cla r a t ion . And now it 's t im e for t he big secret of vert ical nav barsplacing t he but t ons side by side. 4. Add a n e w st yle t o you r st yle sh e e t ( dir e ct ly be low t h e u l# m a in N a v st yle is a good spot ) : #mainNav li { float: left; width: 12em; }

This st yle applies t o t he < li> t ag ( t he list it em s t hat hold each link) . The first declarat ion float s t he t ag t o t he left . I n t his way, each < li> t ag at t em pt s t o wrap around t o t he right side of t he previous < li> t ag. ( You saw t he sam e effect in t he phot o gallery t ut orial in Sect ion 8.6.3.) Also, set t ing t he widt h of t he < li> t ag defines t he widt h of each but t on. Here, a value of 12em s provides enough space t o cont ain t he longest link nam eHoroscopes. When you're working wit h longer links, you need t o increase t his value.

Tip: Using an em value instead of a pixel value for the width of the buttons makes the width adjust to the visitor's browser. If the buttons' widths were set to pixels, and a visitor increased the browser's font size, then the text in the button might get wider than the button itself. When you use ems, the button simply gets wider as the font gets larger.

Section 9.5. Tutorial: Styling Links

I f you preview t he page now, you'll see t he basics are com plet e. All t hat 's left are som e cosm et ic enhancem ent s ( see t he circled areas of # 1 in Figure 9- 19) . First , t he bot t om border you creat ed in st ep 10 in Sect ion 9.1.1 runs t he ent ire lengt h of t he < ul> t agwider t han t he navigat ion but t ons t hem selves. Even st ranger, t hat bot t om border's no longer on t he bot t om it 's on t op of t he navigat ion but t ons! I n addit ion, since t he but t ons sit side by side, t heir left and right borders com bine t o m ake a 2- pixel border bet ween each but t on. You'll fix t hat problem now.

Figu r e 9 - 1 9 . Ch a n gin g a ve r t ica l st a ck of n a viga t ion bu t t on s in t o t h e m u ch sh or t e r , side - by- side for m a t of a h or izon t a l n a viga t ion ba r on ly t a k e s a cou ple of st e ps. M ost of you r e ffor t in volve s t w e a k in g st yle s for cosm e t ic con side r a t ion s su ch a s bor de r s a n d ba ck gr ou n d im a ge pla ce m e n t .

5. I n t h e # m a in N a v a st yle ch a n ge bor de r - bot t om : n on e ; t o bor de r - le ft : n on e ;. This change rem oves t he left border so t hat t he borders don't double up bet ween but t ons, and at t he sam e t im e adds a border t o t he bot t om of each but t on. But t hat < ul> t ag's bot t om border is st ill on t op of t he but t ons, and now t he nav bar is m issing a border on t he far left but t on ( see circled areas of # 2 in Figure 9- 19) . No problem j ust change t he border on t he < ul> t ag. 6. Loca t e t h e u l# m a in N a v st yle a n d ch a n ge bor de r - bot t om : 1 px da sh e d # 9 9 9 9 9 9 ; t o bor de r - le ft : 1 px da sh e d # 9 9 9 9 9 9 ;. I f you preview t he page now, you'll see t hat t he border above t he but t ons is gone, but t here's st ill no left border ( # 3 in Figure 9- 19) . You're wit nessing one of t he com plicat ions of using float s. That is, float ing t he list it em s rem oves t hem from t he norm al flow of t he docum ent , so Web browsers no longer see t hem as part of t he < ul> t ag, and t he < ul> t ag shrinks down t o nearly no height t hat 's t he reason t he ul's bot t om border appeared on t op as well. ( I f t his whole scenario sounds confusing, it is. That 's why t here's an ent ire sect ion of Chapt er 11 dedicat ed t o dealing wit h t he issuesee Sect ion 11.1.1 for t he det ails.) Fort unat ely, while t he problem is com plex, t he solut ion is sim ple. Just float t he < ul> t ag as well. 7. Add floa t : le ft ; t o t h e u l# m a in N a v st yle . Th e com ple t e d st yle sh ou ld look lik e t h is: ul#mainNav { margin: 0; padding: 0; list-style: none; border-left: 1px dashed #999999; float: left; }

Section 9.5. Tutorial: Styling Links

Finally, t hat paperclip aligned t o t he right edge of t he " You are here" but t on looks funny ( # 4 in Figure 9- 19) . You'll swit ch it s posit ion t o t he left edge of t he but t on.

Note: Since the
tag is floated, other page elements try to wrap around it. It's a good idea to set the clear property on the next element immediately after the navigation bar as described in Section 7.6.2. That property forces whatever's following the navigation bar to sit below it rather than try to wrap to the nav bar's right side. 8. Loca t e t h e " You a r e h e r e " st yle you cr e a t e d in st e p 6 in Se ct ion 9 .5 .6 . ( I t 's t h e on e w it h t h e cr a zy, lon g- w in de d se le ct or .) Ch a n ge it s ba ck gr ou n d posit ion fr om 9 5 % 5 0 % t o 5 px 5 0 % . Th e st yle sh ou ld n ow look lik e t h is: body#home a#homeLink, body#feature a#featureLink, body#expert a#experLink, body#quiz a#quizLink, body#project a#projectLink, body#horoscope a#horoscopeLink { background: #FFFFFF url(images/bg_here.png) no-repeat 5px 50%; padding-right: 15px; padding-left: 30px; font-weight: bold; }

Preview t he page, and you'll find a fully funct ional horizont al navigat ion bar ( # 5 in Figure 9- 19) . And guess what ? I t works perfect ly even in I nt ernet Explorer. To see t he finished version, open t he file chapt er_09_finished

nav_bar

nav_ bar_horizont al_finished.ht m l.

Note: You may want to center the text inside each button. If so, you need to do two things: Add text-align: center; to the #mainNav a style, and adjust that style's leftpadding until the text looks absolutely centered.

Chapter 10. Formatting Tables and Forms

Chapter 10. Formatting Tables and Forms The form at t ing powers of CSS go way beyond t ext , im ages, and links. You can m ake t ables of inform at ion like schedules, sport s scores, and m usic playlist s easier t o read by adding borders, backgrounds, and ot her visual enhancem ent s. Sim ilarly, you can use CSS t o organize t he elem ent s of a form t o help your visit ors t hrough t he process of ordering it em s, signing up for your newslet t er, or using your lat est Web applicat ion. This chapt er shows you how t o display t ables and form s wit h HTML and how t o lay out and st yle t hem using CSS. I n t wo t ut orials at t he end of t he chapt er, you'll creat e a t able and a form , using t he t ricks you've learned along t he way.

Section 10.1. Using Tables the Right Way

10.1. Using Tables the Right Way HTML t ables have seen a lot of use in t he short hist ory of t he Web. Originally creat ed t o display dat a in a spreadsheet - like form at , t ables becam e a popular layout t ool. Faced wit h HTML's lim it at ions, designers got creat ive and used t able rows and colum ns t o posit ion page elem ent s like banner headlines and sidebars. As you'll see in Part I I I of t his book, CSS does a m uch bet t er j ob of laying out Web pages. You can concent rat e on using ( and form at t ing) t ables for t heir original purposedisplaying dat a ( Figure 10- 1) .

Figu r e 1 0 - 1 . You ca n do a ll of you r pa ge la you t a n d de sign w it h CSS, a n d u se t a ble s for w h a t t h e y w e r e in t e n de ddispla yin g r ow s a n d colu m n s of in for m a t ion . CSS cr e a t e d t h e a t t r a ct ive fon t s, bor de r s, a n d ba ck gr ou n d color s in t h is t a ble a bou t in door la w n m ow e r s, bu t t h e u n de r lyin g st r u ct u r e is a ll t h a n k s t o H TM L.

HTML ( and XHTML) has a surprising num ber of t ags dedicat ed t o t able building. This chunk of HTML creat es t he very sim ple t able pict ured in Figure 10- 2.

Section 10.1. Using Tables the Right Way



Table 1: CosmoFarmer.com's Indoor Mower Roundup











Brand	Price	Power Source
Chinook Push-o-matic Indoor Mower	$247.00	Mechanical
Sampson Deluxe Apartment Mower	$370.00	Mechanical



Even wit h only t hree rows and t hree colum ns, t he t able uses nine unique HTML t ags: < t able> , < capt ion> , < colgroup> , < col> , < t head> , < t body> < t r> , < t h> , and < t d> . I n general, m ore HTML isn't a good t hing, but a t able's various t ags give you lot s of useful hooks t o hang CSS st yles on. The headers of each colum nt he < t h> t agscan look different from ot her t able cells if you creat e a < t h> t ag st yle. This saves you t he hassle of having t o creat e lot s of classeslike .t ableHeaderand applying t hem by hand t o individual t able cells. I n t he next sect ion, you'll see exam ples of how you can use t hese different t ags t o your advant age.

Figu r e 1 0 - 2 . D a t a t a ble s, lik e t h is on e , u su a lly h a ve h e a de r s cr e a t e d w it h t h e < t h > t a g. H e a de r ce lls a n n ou n ce w h a t t ype of in for m a t ion a ppe a r s in a r ow or colu m n . Pr ice t e lls you t h a t you 'll fin d t h e cost of e a ch la w n m ow e r list e d in t h e ce lls be low . Th e a ct u a l da t a pr e se n t e d in a t a ble is e n close d in < t d> t a gs.

Note: For an in-depth article on the HTML used to create tables, visit www.456bereastreet.com/archive/200410/bring_on_the_tables/.

Section 10.1. Using Tables the Right Way

Section 10.2. Styling Tables

10.2. Styling Tables You can use m any of t he CSS propert ies you've read about t o dress up t he appearance of a t able and it s cont ent s. The color propert y, for exam ple, set s a t able's t ext color, j ust like anywhere else. You'll find a few propert ies, however, t hat are part icularly useful wit h t ables, as well as a couple aim ed specifically at form at t ing t ables. Because t ables are com posed of several HTML t ags, it helps t o know which t ag t o apply a part icular CSS propert y t o. Applying padding t o a < t able> t ag has no effect . The next few sect ions cover CSS propert ies for form at t ing t ables and which HTML t ags t hey get along wit h.

10.2.1. Adding Padding As you read in Sect ion 7.2, padding is t he space bet ween an elem ent 's border and it s cont ent . You can use padding t o provide a lit t le space bet ween t he edges of a paragraph's t ext and it s border. When it com es t o t ables, t he borders are t he edges of a cell, so padding adds space around any cont ent you've placed inside of a t able cell ( see Figure 10- 2) . I t works a lot like t he < t able> t ag's cellpadding at t ribut e, wit h t he added benefit t hat you can individually cont rol space bet ween a cell's cont ent and each of it s four edges. You apply padding t o eit her a t able header or a t able cell t ag, but not t o t he < t able> t ag it self. So, t o add 10 pixels of space t o t he inside of all t able cells, you'd use t his st yle: td, th { padding: 10px; }

You can also cont rol t he spacing separat ely for each edge. To add 10 pixels of space t o t he t op of each t able dat a cell, 3 pixels t o t he bot t om of t hat cell, and 5 pixels on bot h t he left and right sides, creat e t his st yle: td { padding-top: 10px; padding-right: 5px; padding-bottom: 3px; padding-left: 5px; }

Tip: If you place an image into a table cell using the tag, and notice that there's unwanted space below the image, then set its display property to block (see Section 7.2.4). For more information, see http://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps .

10.2.2. Adjusting Vertical and Horizontal Alignment To cont rol where cont ent is posit ioned wit hin a t able cell, use t he t ext - align and vert ical- align propert ies. Text - align cont rols horizont al posit ioning, and can be set t o left , right , cent er, and j ust ify ( see Figure 10- 3) . I t 's an inherit ed propert y. ( See Chapt er 4 for m ore on inherit ance.) When you want t o right align t he cont ent s of all t able cells, creat e a st yle like t his: table { text-align: right; }

This propert y com es in handy wit h < t h> t ags, since browsers usually cent er align t hem . A sim ple st yle like t h { t ext - align: left ; } m akes t able headers align wit h t able cells.

Figu r e 1 0 - 3 . W h e n a pplie d t o t a ble ce lls, t h e CSS t e x t - a lign pr ope r t y w or k s lik e t h e < t d> t a g's a lign a t t r ibu t e . Use t h e CSS a ppr oa ch , h ow e ve r , sin ce it le t s you st or e t h e st yle in for m a t ion in a n e x t e r n a l st yle sh e e t . Th a t w a y, if you de cide you n e e d t o ch a n ge a lign m e n t in you r t a ble ce lls fr om r igh t t o le ft , t h e n you n e e d t o u pda t e on ly t h e e x t e r n a l st yle sh e e t , n ot 1 0 ,0 0 0 in dividu a l < t d> t a gs.

Section 10.2. Styling Tables

Table cells have a height as well. Web browsers norm ally align cont ent vert ically in t he m iddle of a t able cell ( see " m iddle" exam ple in Figure 10- 4) . You can cont rol t his behavior using t he vert ical- align propert y. Use one of t hese four values: t op, baseline, m iddle, or bot t om . Top pushes cont ent t o t he t op of t he cell, m iddle cent ers cont ent , and bot t om pushes t he bot t om of t he cont ent t o t he bot t om of t he cell. Baseline works j ust like t op, except t he browser aligns t he baseline of t he first line of t ext in each cell in a row ( Figure 10- 4) . ( Unless you're a real perfect ionist , you won't even not ice t he subt let y of t he baseline opt ion. More im port ant ly, neit her will your visit ors.) Unlike t ext - align, t he vert ical- align propert y isn't inherit ed, so you can use it only on st yles t hat apply direct ly t o < t h> and < t d> t ags.

Figu r e 1 0 - 4 . Th e ve r t ica l- a lign pr ope r t y is t h e CSS e qu iva le n t of t h e < t d> t a g's a lign a t t r ibu t e . W h e n pa ddin g is a pplie d t o a ce ll, t h e con t e n t n e ve r a ct u a lly a lign s t o t h e bot t om or t op bor de r lin e s: Th e r e 's a lw a ys a ga p e qu a l t o t h e pa ddin g se t t in g. You ca n con t r ol t h e size of t h e pa ddin g ( se e Se ct ion 1 0 .2 .1 ) .

Section 10.2. Styling Tables

Tip: So far, the table formatting you've learned applies to all your tables. When you want to style individual tables (or table cells), change the selector you use. To apply a special design to a certain table, give it a class nameand create descendent selectors like .stocks td, or stocks th to uniquely format individual cells. If you want to style a particular cell differently than other cells in a table, then apply a class to the tag

You'll need t o do t his wit h every second row aft er t his one as well. ( Manually t agging each alt ernat ing row can be t edious, especially if you frequent ly add or reorder t able rows. For an aut om at ed approach t o st riping t able rows using a lit t le JavaScript program m ing, see t he Tip in Sect ion 10.2.1.) 12. Re pe a t st e p 1 1 for t h e < t r > t a gs t h a t pr e ce de t a ble ce lls w it h t h e follow in g t e x t : Ur ba n M ow - m a ch in e , Th e Lor e m I psu m D olor 3 0 0 , a n d Gr a ss M a st e r V9 . Preview t he page in a Web browser t o see t he result s. Your page should look like t he bot t om im age in Figure 10- 9. You'll also find t he com plet ed exercise in t he chapt er_10_finished

t able folder.

Section 10.5. Tutorial: Styling a Form

10.5. Tutorial: Styling a Form This t ut orial gives you som e pract ice using CSS t o organize a form and m ake it m ore at t ract ive. I f you open form form .ht m l in a Web browser, t hen you'll see it cont ains a sim ple form for chapt er_10 subscribing t o Cosm oFarm er.com ( Figure 10- 11) . The form asks several quest ions and uses a variet y of form elem ent s for input , including t ext boxes, radio but t ons, and pull- down m enus. As subscript ion form s go, it looks fine, but a lit t le bland. I n t he st eps on t he following pages, you'll Cosm oFarm er- ize t he font s, line up t he quest ions and boxes bet t er, and add a few ot her im provem ent s. 1. Ope n t h e file for m .h t m l in a t e x t e dit or . There's already an ext ernal st yle sheet at t ached t o t his page, but you'll add your new st yles t o an int ernal st yle sheet . St art by bringing down t he size of t he t ype in t he form . 2. Click be t w e e n t h e ope n in g a n d closin g < st yle > t a gs, a n d t h e n a dd t h e follow in g st yle : #subForm { font-size: .8em; }

The subscript ion form has an I D of subForm applied t o it , so t his st yle set s t he t ext size for all t ext bet ween t he < form > t ags.

Figu r e 1 0 - 1 1 . H TM L's < t a ble > t a g is a com m on w a y t o or ga n ize t h e qu e st ion s of a for m . Bu t you ca n a lso u se CSS ( a n d a lot le ss H TM L) t o m a k e t h e for m 's la you t cle a r e r a n d m or e a t t r a ct ive .

Section 10.5. Tutorial: Styling a Form

Tim e t o work on t he layout . To bet t er align t he form elem ent s, you'll creat e t he appearance of t wo colum ns, one for t he quest ions ( labels) and anot her for t he answers ( form fields) . 3. Add a n ot h e r st yle t o t h e in t e r n a l st yle sh e e t : #subForm .label { float: left; width: 230px; }

This descendent select or ident ifies any elem ent wit h a class of .label wit hin t his form . The st yle set s a widt h of 230 pixels and float s t he elem ent t o t he left . Rem em ber t he float propert y let s you m ove elem ent s t o one side or t he ot her of a cont aining block. I t has t he added benefit of let t ing you set a

Section 10.5. Tutorial: Styling a Form

widt h and force elem ent s t hat follow t he st yle t o wrap around it . As a result , when you apply t his st yle t o each of t he quest ions in t he form , you creat e an even- widt h colum n. But in order t o see t he effect , you m ust first apply t he class t o t he appropriat e page elem ent s. 4. I n t h e pa ge 's H TM L, loca t e t h is code < la be l for = " n a m e " > a n d a dd cla ss= " la be l" , so t h e t a g look s lik e t h is:

You m ust do t he sam e for each quest ion in t he form , so… 5. Re pe a t st e p 5 for t h e follow in g pie ce s of H TM L code : < la be l for = " e m a il" > , < la be l for = " r e fe r " > , < la be l for = " com m e n t s" > . There's one addit ional quest ion on t he form " Rat e your apart m ent farm ing skills." I t isn't inside a label t ag, since it s purpose is t o int roduce a series of radio but t ons, each of which has it s own label. You need t o add a < span> t ag t o t his t ext so you can apply t he label st yle t o it . 6. Fin d t h e t e x t Ra t e you r a pa r t m e n t fa r m in g sk ills, a n d t h e n w r a p it in a < spa n > t a g w it h a cla ss of la be l, lik e so: Rate your apartment farming skills

Now t he quest ions appear t o be in a single colum n ( Figure 10- 12, t op) . But t hey'd look bet t er if t hey st ood out m ore and lined up wit h t he corresponding form fields. 7. Edit t h e # su bFor m .la be l st yle you cr e a t e d in st e p 4 , so it look s lik e t h is: #subForm .label { float: left; width: 230px; margin-right: 10px; text-align: right; font-weight: bold; }

Preview t he page in a Web browser. The form should look like t he bot t om im age in Figure 10- 12. There's one last st ep for t hese labels. Because t hey're float ed t o t he left , if t he t ext runs m ore t han one line, t he quest ion t hat follows will also t ry t o wrap around t o t he right . Fix t hat by applying t he clear

Section 10.5. Tutorial: Styling a Form

propert y.

Note: You can see a similar problem illustrated in Figure 7-12. See "Stopping the Float" in Section 7.6.2 for more detail on clearing floats. 8. Add a cle a r pr ope r t y t o t h e # su bFor m .la be l st yle : #subForm .label { float: left; width: 230px; margin-right: 10px; text-align: right; font-weight: bold; clear: left; }

The form 's shaping up, but t hat Subscribe but t on looks out of place over at t he left edge. You'll align it wit h t he ot her form elem ent s next .

Figu r e 1 0 - 1 2 . Som e t im e s sm a ll a n d su bt le ch a n ge s ca n m a k e a for m m or e r e a da ble . M a k in g t h e qu e st ion s on t h e for m bold, a n d a lign in g t h e m w it h t h e ir cor r e spon din g for m e le m e n t s ( bot t om figu r e ) im m e dia t e ly im pr ove s t h e look of t h e for m .

Section 10.5. Tutorial: Styling a Form

9. Add a n ot h e r st yle t o t h e in t e r n a l st yle sh e e t . input#subscribe { margin-left: 240px; }

Section 10.5. Tutorial: Styling a Form

The < input > t ag t hat creat es t his Subscribe but t on has an I D of subscribe already applied t o it , so t his st yle indent s t he but t on 240 pixels t o m at ch t he widt h and right m argin of t he # subForm .label st yle. Most browsers let you st yle but t ons in ot her ways, t oo, so… 10. Edit t h e Su bscr ibe bu t t on st yle by a ddin g a ba ck gr ou n d color a n d fon t t o t h e st yle you j u st cr e a t e d: input#subscribe { margin-left: 240px; background-color: #CBD893; font-family: "Century Gothic", "Gill Sans", Arial, sans-serif; }

You can even change t he font used in a pull- down m enu. 11. Add a st yle for t h e for m 's se le ct m e n u : select#refer { font-family: "Century Gothic", "Gill Sans", Arial, sans-serif; }

Note: You can style submit buttons and pull-down menus in Internet Explorer, Firefox, and Opera. Safari 2.0, as of this writing, doesn't let you change these basic form elements.

There! You've got t he t ext labels and Subscribe but t on looking great , but why st op t here? Tim e t o j azz up t he form fields. Begin by changing t heir font and background colors. 12. Cr e a t e a n e w gr ou p se le ct or for st ylin g t h e t h r e e t e x t box e s in t h e for m : input#name, input#email, textarea#comments { background-color: #FBEF99; font-family: "Lucida Console", Monaco, monospace; font-size: .9em; }

This st yle gives t he t ext boxes a light yellow background color and set s a new size and font for t ext visit ors t o t ype int o t hem . The boxes look a lit t le narrow, and t hey also appear a lit t le low com pared t o t heir labels at right . Fixing t hese t wo problem s wit h CSS is a snap:

Section 10.5. Tutorial: Styling a Form

Edit t h e st yle you j u st cr e a t e d by se t t in g a w idt h , a n d a lt e r in g t h e t op m a r gin : input#name, input#email, textarea#comments { background-color: #FBEF99; font-family: "Lucida Console", Monaco, monospace; font-size: .9em; width: 300px; margin-top: -2px; }

You can m ake your form easier for your visit ors t o fill out by highlight ing t he act ive form elem ent wit h t he special : focus pseudo- class ( Sect ion 9.1) . You'll add t hat in t he next st ep. 14. At t h e e n d of t h e in t e r n a l st yle sh e e t , a dd on e la st st yle for t h e pu ll- dow n m e n u a n d t h e t h r e e t e x t fie lds: input#name:focus, input#email:focus, textarea#comments:focus, select#refer:focus { background-color: #FDD041; }

The : focus pseudo- class works only in Firefox, Safari, and Opera at t his writ ing, but since it doesn't do I E people any harm , adding a : focus st yle is a fun enhancem ent . Preview t he page in a Web browser. I t should now look like Figure 10- 13. You can find a com plet ed version of t his t ut orial in t he chapt er_10_finished

form folder.

Figu r e 1 0 - 1 3 . Usin g t h e :focu s pse u do- cla ss, you ca n m a k e you r for m s m or e in t e r a ct ive by h igh ligh t in g for m fie lds t h e visit or u se s. H e r e , you ca n se e you 'r e a bou t t o t ype in t o t h e Com m e n t s fie ld be ca u se of it s da r k e r ba ck gr ou n d color .

Section 10.5. Tutorial: Styling a Form

Part III: CSS Page Layout

Part III: CSS Page Layout Ch a pt e r 1 1 : Bu ildin g Floa t - Ba se d La you t s Ch a pt e r 1 2 : Posit ion in g Ele m e n t s on a W e b Pa ge

Chapter 11. Building Float-Based Layouts

Chapter 11. Building Float-Based Layouts CSS leads a double life. As great as it is for form at t ing t ext , navigat ion bars, im ages, and ot her bit s of a Web page, it s t ruly awesom e power com es when you're ready t o lay out ent ire Web pages. CSS layout com es in t wo flavors absolut e posit ioning and float s. Absolut e posit ioning let s you posit ion an elem ent anywhere on t he page wit h pixel- level accuracyor so t he t heory goes. This kind of t ot al cont rol is excit ing, as you'll see in t he next chapt er, but act ually very difficult t o achieve. That 's why t he vast m aj orit y of Web pages use float - based layout s, which are t he subj ect of t his chapt er.

Section 11.1. How CSS Layout Works

11.1. How CSS Layout Works As discussed in Chapt er 1, t he lim it at ions of HTML forced designers t o develop clever ways t o m ake t heir Web sit es look good. The m ost com m on t ool was t he < t able> t ag, which was originally supposed t o be used t o creat e a spreadsheet - like display of inform at ion com posed of rows and colum ns of dat a. I nst ead, designers used HTML t ables t o build a kind of scaffolding for organizing a page's cont ent s ( see Figure 11- 1) . But because t he < t able> t ag wasn't m eant for layout , designers oft en had t o m anipulat e t he t ag in unusual wayslike placing a t able inside t he cell of anot her t ablej ust t o get t he effect t hey want ed. This m et hod was a lot of work, added a bunch of ext ra HTML code, and m ade it very difficult t o m odify t he design lat er. But before CSS, t hat 's all Web designers had. I f you're a longt im e < t able> t ag j ockey, you need t o develop a new m indset when you begin t o use CSS for layout . First , forget about rows and colum ns ( a not ion t hat 's im port ant when working wit h t ables) . There are no colum n spans or row spans, and t he grid- like st ruct ure of a t able is nowhere t o be found in CSS. You can, however, t hink of a < div> t ag as a t able cell. As wit h t able cells, a < div> t ag is t he logical place t o put cont ent t hat you want t o posit ion in one area of t he page. I n addit ion, as you'll see, CSS designs oft en nest a div inside anot her div, m uch like you'd nest t ables wit hin t ables t o get cert ain effect sbut , fort unat ely, t he CSS m et hod uses a lot less HTML code.

Figu r e 1 1 - 1 . Bu ildin g a com ple x pa ge de sign ( le ft ) u sin g t h e < t a ble > t a g in volve s t r ick s lik e n e st in g t a ble s w it h in t a ble s, m e r gin g a dj a ce n t ce lls, a n d pr oppin g ope n ce lls w it h in visible spa ce r im a ge s. I t 's lik e bu ildin g a r igid sca ffoldin g ( r igh t ) , a n d ch a n gin g t h e de sign of a pa ge r e qu ir e s t e a r in g dow n t h e sca ffoldin g a n d bu ildin g a n e w on e .

11.1.1. The Mighty Tag Whet her you're using t ables or CSS, Web page layout involves put t ing chunks of cont ent int o different regions of t he page. Wit h CSS, t he elem ent m ost com m only used for organizing cont ent is t he < div> t ag. As you read in Sect ion 1.2.1, t he < div> t ag is an HTML elem ent t hat has no inherent form at t ing propert ies ( besides t he fact t hat browsers t reat t he t ag as a block wit h a line break before and aft er it ) ; inst ead, it 's used t o m ark a logical grouping of elem ent s or a division on t he page. You'll t ypically wrap a < div> t ag around a chunk of HTML t hat belongs t oget her. The elem ent s com prising t he logo and navigat ion bar in Figure 11- 1 occupy t he t op of t he page, so it m akes sense t o wrap a < div> t ag around t hem . At t he very least , you would include < div> t ags for all t he m aj or regions of your page, such as t he banner, m ain cont ent area, sidebar, foot er, and so on. But it 's also possible t o wrap a < div> t ag around one or m ore addit ional divs. One com m on t echnique is t o wrap t he HTML inside t he < body> t ag in a < div> . Then you can set som e basic page propert ies by applying CSS t o t hat wrapper < div> . You can set an overall widt h for t he page's cont ent , set left and

Section 11.1. How CSS Layout Works

right m argins, or cent er all of t he page's cont ent in t he m iddle of t he screen. ( You'll get a chance t o work wit h a wrapper < div> in t he t ut orial in Sect ion 11.1.1.) Once you've got your < div> t ags in place, add eit her a class or I D t o each one, which becom es your handle for st yling each < div> separat ely. For part s of t he page t hat appear only once and form t he basic building blocks of t he page, designers usually use an I D. The < div> t ag for a page's banner area m ight look like t his: < div id= " banner" > . You can use an I D only once per page, so when you have an elem ent t hat appears m ult iple t im es, use a class inst ead. I f you have several divs t hat posit ion phot os and t heir capt ions, t hen you can creat e a st yle like t his: < div class= " phot o" > . Wit h st yles like t hese, you can posit ion t he various page elem ent s. Using t he CSS float propert y, you can posit ion different blocks of cont ent t o t he left or right of a page ( or left or right edge of a cont aining block like anot her < div> ) .

WORD TO THE WISE When More Isn't Better Alt hough divs are crit ical t o CSS layout , don't go crazy pelt ing your page wit h divs. A com m on t rap is t o believe you m ust wrap everyt hing on a Web page in a < div> t ag. Say your m ain navigat ion bar is an unordered list of links ( like t he one described in Sect ion 9.1.1) . Because it 's an im port ant elem ent , you m ay be t em pt ed t o wrap a < div> around it : < div id= " m ainNav" > < ul> …< / ul> < / div> . But t here's no reason t o add a < div> when t he < ul> t ag's j ust as handy. As long as t he < ul> cont ains t he m ain navigat ion bar links, you can sim ply add your I D st yle t o t hat t ag: < ul id= " m ainNav" > . An addit ional < div> is j ust unnecessary code.

Section 11.2. Types of Web Page Layouts

11.2. Types of Web Page Layouts Being a Web designer m eans dealing wit h t he unknown. What kind of browsers do your visit ors use? Do t hey have t he lat est Flash Player plug- in inst alled? Perhaps t he biggest issue designers face is creat ing at t ract ive designs for different display sizes. Monit ors vary in size and resolut ion: from pet it e 15- inch 640 x 480 pixel displays t o 30- inch m onst rosit ies displaying, oh, about 5,000,000 x 4,300,000 pixels. Float - based layout s offer t hree basic approaches t o t his problem . Nearly every page design you see falls int o one of t wo t ypesfixed widt h, or liquid. A fixed widt h gives you t he m ost cont rol over how your design looks, but can inconvenience som e of your visit ors. Folks wit h really sm all m onit ors have t o scroll t o t he right t o see everyt hing, and t hose wit h large m onit ors have wast ed space t hat could be showing m ore of your excellent cont ent . Liquid designs m ake cont rolling t he design of t he page m ore challenging, but m ake t he m ost effect ive use of t he browser window. An elast ic design com bines som e advant ages of bot h. ●

Fix e d W idt h . Many designers prefer t he consist ency of a set widt h, like t he page in Figure 11- 2, t op. Regardless of t he browser window's widt h, t he page con- t ent 's widt h rem ains t he sam e. I n som e cases, t he design clings t o t he left edge of t he browser window, or, m ore com m only, it 's cent ered in t he m iddle. Wit h t he fixed- widt h approach, you don't have t o worry about what happens t o your design on a very wide ( or sm all) m onit or. Many fixed- widt h designs are about 760 pixels widea good size for 800 x 600 screens ( since you need t o leave a lit t le room for scrollbars and ot her part s of t he browsers " chrom e" ) . However, m ore and m ore sit es ( especially ones aim ed at a m ore t ech- savvy crowd) are about 950 pixels wide, on t he assum pt ion t hat visit ors have at least 1024 x 768 m onit ors.

Note: For examples of fixed-width designs aimed at larger monitors, visit www.alistapart.com, www.espn.com, or www.nytimes.com. ●

Liqu id. Som et im es it 's easier t o roll wit h t he t ide inst ead of fight ing it . A liquid design adj ust s t o fit t he browser's widt hwhat ever it m ay be. Your page get s wider or narrower as your visit or resizes t he window ( Figure 11- 2, m iddle) . While t his t ype of design m akes t he best use of t he available browser window real est at e, it 's m ore work t o m ake sure your design looks good at different window sizes. On very large m onit ors, t hese t ypes of designs can look ridiculously wide.

Note: The max-width and min-width properties offer a compromise between fixed and liquid designs. See Section 11.4.3. ●

Ela st ic. An elast ic design is really j ust a fixed- widt h design wit h a t wist t ype size flexibilit y. Wit h t his kind of design, you define t he page's widt h using em values. An em changes size when t he browser's font size changes, so t he design's widt h is ult im at ely based on t he browser's base font size ( see Sect ion 6.2.2) . I f a visit or increases t he size of t he browser's display font ( by pressing Ct rl+ in Firefox, for exam ple) , t hen t he page's widt h grows as well. Figure 11- 2, bot t om , shows an elast ic page wit h t he browser's norm al font size ( left ) and several font sizes larger ( right ) . I ncreasing t he font size m akes all page elem ent s wider as well. Elast ic

Section 11.2. Types of Web Page Layouts

designs keep everyt hing on your page in t he sam e relat ive proport ions, and m ake sure t hat when som eone wit h poor vision has t o pum p up t he t ext size, t he colum ns holding t he t ext grow as well. I n t he t ut orials at t he end of t his chapt er, you'll creat e a fixed- widt h design and a liquid design.

Section 11.3. Float Layout Basics

11.3. Float Layout Basics Float - based layout s t ake advant age of t he float propert y t o posit ion elem ent s side by side and creat e colum ns on a Web page. As described in Chapt er 7 ( Sect ion 7.6) , you can use t his propert y t o creat e a wrap- around effect for, say, a phot ograph, but when you apply it t o a < div> t ag, float becom es a powerful page- layout t ool. The float propert y m oves a page elem ent t o one side of t he page ( or ot her cont aining block) . Any HTML t hat appears below t he float ed elem ent m oves up on t he page and wraps around t he float .

Figu r e 1 1 - 2 . You h a ve se ve r a l w a ys t o de a l w it h t h e u n ce r t a in w idt h s of W e b br ow se r w in dow s a n d br ow se r fon t size s. You ca n sim ply ign or e t h e fa ct t h a t you r sit e 's visit or s h a ve diffe r e n t r e solu t ion m on it or s a n d for ce a sin gle , u n ch a n gin g w idt h for you r pa ge ( t op) , or cr e a t e a liqu id de sign t h a t flow s t o fill w h a t e ve r w idt h w in dow it e n cou n t e r s ( m iddle ) . An e la st ic de sign ( bot t om ) ch a n ge s w idt h on ly w h e n t h e fon t size n ot t h e w in dow w idt h ch a n ge s.

Section 11.3. Float Layout Basics

The float propert y accept s one of t hree different valuesleft , right , and none. To m ove an im age t o t he right side of t he page, you could creat e t his class st yle and apply it t o t he < im g> t ag: . floatRight { float: right; }

The sam e propert y applied t o a < div> t ag full of cont ent can also creat e a sidebar: #sidebar { float: left; width: 170px; }

Figure 11- 3 shows t hese t wo st yles in act ion.

Note: The none value turns off any floating and positions the element like a normal, unfloated element. It's useful only for overriding a float that's already applied to an element. You may have an element with a particular class such as "sidebar" applied to it and that element floats to the right. But on one page you may want an element with that class to not float, but to be placed within the flow of the page, like this Note box. By creating a more specific CSS selector (see Section 5.3) with float: none, you can prevent that element from floating.

Figu r e 1 1 - 3 . You ca n u se t h e floa t pr ope r t y t o la y ou t a W e b pa ge w it h m u lt iple colu m n s. On t h is pa ge , a block of con t e n t is floa t e d t o t h e le ft e dge . Th e side ba r h a s a se t w idt h , bu t t h e m a in con t e n t doe sn 't , w h ich m a k e s t h is de sign a liqu id la you t ( Se ct ion 1 1 .1 ) . Th e m a in se ct ion of t h e pa ge sim ply e x pa n ds t o fill t h e w idt h of t h e br ow se r w in dow . I n t h e u ppe r r igh t , t h e ba t h t u b ph ot o is floa t e d t o t h e r igh t .

Section 11.3. Float Layout Basics

A sim ple t wo- colum n design like Figure 11- 3 requires j ust a few st eps: 1.

Section 11.3. Float Layout Basics

W r a p e a ch colu m n in a < div> t a g w it h a n I D or cla ss a t t r ibu t e . I n Figure 11- 3, t he news it em s list ed in t he left sidebar are wrapped in one < div> < div id= " news" > and t he m ain cont ent in anot her div< div id= " m ain" > . 2. Floa t t h e side ba r < div> e it h e r r igh t or le ft . When you work wit h float s, t he source order ( t he order in which you add HTML t o a file) is im port ant . The HTML for t he float ed elem ent m ust appear before t he HTML for t he elem ent t hat wraps around it . Figure 11- 4 shows t hree t wo- colum n layout s. The diagram s on t he left side show t he page's HTML source order: A < div> for t he banner, followed by a < div> for t he sidebar and, last ly, a < div> for t he m ain cont ent . On t he right side, you see t he act ual page layout . The sidebar com es before t he m ain cont ent in t he HTML so it can float eit her left ( t op, bot t om ) or right ( m iddle) .

Figu r e 1 1 - 4 . Cr e a t in g a t w o- colu m n la you t 's a sim ple m a t t e r of floa t in g a < div> t a g t o t h e le ft ( t op) . To m a k e a side ba r m ove fr om t h e le ft t o r igh t side of t h e pa ge ( m iddle ) , j u st ch a n ge t h e side ba r 's CSS st ylin g t o floa t : r igh t . You don 't n e e d t o m a k e a n y ot h e r ch a n ge s t o you r CSS or H TM L.

Section 11.3. Float Layout Basics

3. Se t a w idt h for t h e floa t e d side ba r . Unless you're float ing an im age wit h a predefined widt h, you should always give your float s a widt h. I n t his way, you creat e a set size for t he float ed elem ent , let t ing t he browser m ake room for ot her cont ent t o wrap int o posit ion. The widt h could be a fixed size like 170px or 10em . You can also use percent ages for a flexible design t hat 's based on t he widt h of t he browser window. ( See Sect ion 11.1 for m ore about t he pros and cons of t he different m easurem ent unit s.) I f t he sidebar is 20 percent wide and t he browser window is 700 pixels wide, t hen t he sidebar will be 140 pixels wide. But if your visit or resizes t he window t o 1000 pixels, t hen t he sidebar grows t o 200 pixels. Fixed- widt h sidebars are easier t o design for, since you don't have t o consider all t he different widt hs t he sidebar m ight st ret ch t o. However, percent ages let you m aint ain t he sam e proport ions bet ween t he t wo colum ns, which can

Section 11.3. Float Layout Basics

be m ore visually pleasing.

Note: When the overall page design is a fixed width (as described in Section 11.1), percentage width values for the sidebar are based on the fixed-width containing element. The width isn't based on the window size and won't change when the browser window changes size. 4. Add a le ft m a r gin t o t h e m a in con t e n t . I f t he sidebar's short er t han t he ot her cont ent on t he page, t he t ext from t he m ain colum n wraps underneat h t he sidebar, ruining t he look of t wo side- by- side colum ns ( see Figure 11- 18 for an exam ple) . Adding a left m argin t hat 's equal t o or great er t han t he widt h of t he sidebar indent s t he m ain cont ent of t he page, creat ing t he illusion of a second colum n: #main { margin-left: 180px ; }

By t he way, it 's usually a good idea t o m ake t he left m argin a lit t le bigger t han t he widt h of t he sidebar: This creat es som e em pt y spacea whit e gut t erbet ween t he t wo elem ent s. So, when you use percent ages t o set t he widt h of t he sidebar, use a slight ly larger percent age value for t he left m argin. Avoid set t ing a widt h for t he m ain cont ent div. I t 's not necessary, since browsers sim ply expand it t o fit t he available space. Even if you want a fixed- widt h design, you don't need t o set a widt h for t he m ain cont ent div, as you'll see in t he next sect ion.

Section 11.4. Applying Floats to Your Layouts

11.4. Applying Floats to Your Layouts Now t hat you've learned a basic t wo- colum n liquid layout , you can adapt it in count less ways. Convert ing it int o a fixed- widt h layout is a snap. Sim ply wrap all t he t ags wit hin t he page's body inside anot her < div> ( like < div id= " wrapper" > ) . Then, creat e a st yle for t hat new cont ainer elem ent t hat has a set widt h such as 760 pixels ( see Figure 11- 4, bot t om ) . That widt h set t ing const rains everyt hing inside t he cont ainer box. Expanding it int o a t hree- colum n design isn't difficult , eit her ( Figure 11- 5) . First , add anot her < div> bet ween t he t wo colum ns and float it t o t he right . Then add a right m argin t o t he m iddle colum n, so t hat if t he t ext in t he m iddle colum n runs longer t han t he new right sidebar, it won't wrap underneat h t he sidebar. The rest of t his sect ion explores m ore CSS layout t echniques t hat use float - based layout s.

Figu r e 1 1 - 5 . A t h r e e - colu m n de sign u se s t h e sa m e con ce pt s u se d t o cr e a t e a t w o- colu m n de sign . I n t h is ca se , you floa t bot h t h e le ft a n d r igh t side ba r s a n d a dd bot h le ft a n d r igh t m a r gin s t o t h e ce n t e r colu m n . Th e le ft - h a n d dia gr a m sh ow s t h e or de r of t h e H TM L; t h e r igh t side sh ow s w h a t t h e W e b pa ge look s lik e .

Section 11.4. Applying Floats to Your Layouts

UP TO SPEED Don't Reinvent the Wheel I f t erm s like liquid layout and cont aining elem ent sound a lit t le int im idat ing, don't give up. First of all, t he t ut orials beginning in Sect ion 11.1 walk you st ep by st ep t hrough t he process of laying out Web pages wit h CSS. But t here's no law saying you have t o creat e your own CSS layout s from scrat ch. On t he Web you'll find plent y of pre- built and t est ed designs you can m ake your own. The Layout Gala sit e offers 40 different CSS designs t hat work in m ost com m on browsers, including I nt ernet Explorer 5 ( ht t p: / / blog.ht m l.it / layout gala/ ) . The designs are j ust basic skelet ons consist ing of < div> t ags and t he CSS t hat posit ions t hem . All you need t o do is fill t hem wit h your own design t ouches like font st yling and im agery. For a sophist icat ed design including m ult iple t em plat es, drop- down m enus, and preform at t ed t ext and link st yles, check out t he Mollio t em plat es at www.m ollio.org . The sit e includes a st yle guide explaining how t o use t he t em plat es, as well as t he original Phot oshop files so you can t weak t he graphics' appearance t o your liking. Finally, for a t ot al sm orgasbord of CSS designs, check out Open Source Web Design ( www. oswd.org ) . This sit e includes lit erally t housands of Web page designs t hat you can freely download and reuse.

11.4.1. Floating All Columns I t 's perfect ly possible t o float every colum n, not j ust t he left and right sidebars. You could float t he first sidebar t o t he left , t he m iddle colum n t o t he left , and t he right sidebar t o t he right , as shown in Figure 116, t op. This approach let s you put m ore t han t hree colum ns in your design. You can float four or m ore colum ns, as long as t here's room for all t he float s t o fit side by side. When you float all colum ns in a design, you need t o pay close at t ent ion t o t he widt hs of each colum n. I f t he t ot al widt h of all t he colum ns is less t han t he space availablefor exam ple, if t he browser window is sm aller, or t he colum ns are placed inside anot her < div> wit h a set widt ht hen t he last colum n drops down, below t he ot hers. ( You can read a solut ion t o t his dropping float problem in Sect ion 11.1.1.) I n addit ion, float ing m ore t han j ust t he sidebars let s you change t he order of your divs in t he HTML. Take, for exam ple, t he left diagram in Figure 11- 5, which shows t he order of t he < div> t ags for t hat page. Because of t he way float ed elem ent s work, t hey m ust appear before any cont ent t hat wraps around t hem , so in t his exam ple, t he m ain cont ent area m ust go aft er t he sidebars. The order of t he < div> t ags in t he HTML m ay not seem like a big deal unt il you t ry t o browse t he Web page wit hout CSS, which is t he case for m any alt ernat ive browsers, including screen readers which read a page's cont ent aloud t o visually im paired visit ors. Wit hout CSS, all t he sidebar m at erial ( which oft en includes navigat ional elem ent s, ads, or ot her inform at ion t hat 's not relevant t o t he m ain t opic of t he page) appears before t he cont ent t he visit or cam e t o read in t he first place. The inconvenience of having t o scroll past t he sam e sidebar cont ent on each page will t urn off som e visit ors. Furt herm ore, your page is less accessible t o vision- im paired visit ors, who have t o list en t o t heir screen readers read off a long list of links and ads before com ing t o any real inform at ion.

Section 11.4. Applying Floats to Your Layouts

And if t hat doesn't sway you, you've got t he search engines t o worry about . Most search engines lim it t he am ount of HTML t hey read when searching a sit e. On a part icularly long Web page, t hey sim ply st op at a cert ain point possibly m issing im port ant cont ent t hat should be indexed by t he search engine. Also, m ost search engines give great er value t o t he HTML near t he beginning of t he file. So if you're worried about get t ing good placem ent in search engine result s, it 's in your best int erest t o m ake sure t he im port ant cont ent s as close as possible t o t he t op of t he page's HTML code. Finally, float ing every colum n also avoids a 3- pixel bug t hat affect s I nt ernet Explorer 6 and earlier ( see Sect ion 11.1.1) . I n t he t op- left diagram in Figure 11- 6, t he m ain cont ent 's HTML is bet ween t he left and right sidebars, which is bet t er t han having it aft er bot h sidebars. You can even put t he m ain cont ent before bot h sidebars' HTML by wrapping t he m ain cont ent and left sidebar in one < div> , float ing t hat < div> left , and t hen float ing t he m ain cont ent right and t he left sidebar right wit hin t hat < div> ( Figure 11- 6, bot t om ) . Voilàt he m ain colum n's HTML falls before t he ot her < div> t ags.

11.4.2. Floats Within Floats The bot t om diagram in Figure 11- 6 illust rat es anot her useful t echniquefloat ing elem ent s wit hin float s. I m agine t hat t he m ain cont ent ( 3) and t he left sidebar ( 4) divs didn't exist , and only t he colum n wrapper ( 2) and t he right sidebar ( 5) were left . You'd have j ust a basic t wo- colum n design wit h one colum n float ed left and anot her float ed right . I n fact , it 's st ill a 2- colum n design even wit h t he t wo divs ( 3 and 4) placed back inside t he colum n wrapper div. The difference is t hat t he left colum n is it self divided int o t wo colum ns. Alt hough t his arrangem ent 's a bit confusing, it 's also helpful in a num ber of inst ances. First , it let s you add colum ns wit hin a colum n. The t hree- colum n layout at t he t op of Figure 11- 7 shows a sm all Tips box in t he m iddle colum n t hat also has t wo colum ns inside it . By nest ing float s inside float s, you can creat e som e very com plex designs.

Figu r e 1 1 - 6 . Th e r e 's m or e t h a n on e w a y t o floa t a pa ge . CSS's fle x ibilit y pr ovide s m a n y w a ys t o cr e a t e a m u lt i- colu m n la you t . Usin g diffe r e n t m e t h ods of floa t in g, you ca n e a sily ch a n ge t h e sou r ce or de r of t h e H TM L for t h e pa ge , a s you ca n se e in t h e dia gr a m s a t le ft . Righ t - side dia gr a m s r e pr e se n t fin a l W e b pa ge la you t .

Section 11.4. Applying Floats to Your Layouts

I n addit ion, when you have j ust a couple of float ed elem ent s divided int o colum ns wit h addit ional float ed elem ent s, it 's easier t o calculat e t he widt hs of page elem ent s. That 's a good t hing when you need t o cont rol float drops ( Sect ion 11.1.1) and ot her problem s t hat occur when colum ns get t oo wide.

11.4.3. Using Negative Margins to Position Elements While t he last sect ion provided a few t echniques t hat let you reorder t he HTML for each colum n in a design,

Section 11.4. Applying Floats to Your Layouts

t here's an even m ore advanced t echnique t hat gives you com plet e cont rol over t he placem ent of your colum ns. By using negat ive m argins, you can put your < div> t ags in any order you wish in your HTML, and t hen posit ion t hem in a different order onscreent hereby keeping your pages accessible t o screen readers, t ext browsers, and search engines as described on t he opposit e page. I n addit ion, since you don't need t o worry about t he source order, you can always change t he design of a pagem aybe float t he m ain colum n t o t he far right , and t he t wo sidebars t o t he left wit hout having t o change t he HTML of t he page. Be warned, t hough, t his m et hod involves m at h and som e m ind- bending uses of CSS. You can live a healt hy, happy life using j ust t he float m et hods present ed earlier in t his chapt er. But if you're up for som e advent ure, read on. ( The t ut orial also present s a hands- on dem onst rat ion of t his m et hod, st art ing in Sect ion 11.1.)

Figu r e 1 1 - 7 . Top: cr e a t e colu m n s w it h in colu m n s by floa t in g e le m e n t s in side a n ot h e r floa t e d e le m e n t . I n t h e m iddle colu m n , t h e Tips box pr ovide s a sim ple t w o- colu m n n ot e t h a t a dds visu a l in t e r e st t o t h e pa ge . Bot t om : it doe sn 't m a t t e r w h ich dir e ct ion t h e con t a in e r is floa t e d ( in t h is in st a n ce , t o t h e r igh t ) you sim ply floa t t h e t w o a ddit ion a l colu m n s le ft a n d r igh t .

Section 11.4. Applying Floats to Your Layouts

POWER USERS' CLINIC Finding the Middle Ground The t wo t ypes of layout s fixed- widt h and liquidhave t heir pluses and m inuses. A fixed- widt h design gives you a lot of cont rol and let s you m ake sure t hat your layout looks exact ly t he sam e even on different sized m onit ors. However, on a part icularly sm all m onit or, a fixedwidt h page m ay force your visit or t o scroll horizont ally t o view t he whole page. On a really wide m onit or, your lovely fixed- widt h design m ay look like a sm all sliver in a sea of em pt y space. Liquid layout s solve t hese problem s, but have t heir own lim it at ions as well. On a sm all screen, a liquid layout m ay cont ract so m uch t hat t he design falls apart . And on a really wide screen, your design m ay st ret ch so far t hat your visit ors get eye cram ps t rying t o read 30inch- wide lines of t ext . Several CSS propert ies aim t o solve t his problem : m in- widt h, m in- height , m ax- widt h, and m ax- height . The m in- propert ies inst ruct a browser t o m ake an elem ent at least as wide or t all as t he specified value. You can apply m in- widt h t o t he < body> t ag t o cont rol t he t ot al widt h of t he page's cont ent , like so: body { m in- widt h: 760px; } . I f a visit or expands his browser window t o 1000 pixels, t he page cont ent st ret ches t o fit t he space. However, if he m akes t he window 500 pixels, t hen t he cont ent rem ains 760 pixels wide and t he browser adds horizont al scrollbars. The m in- height propert y does t he sam e t hing, but for an elem ent 's height . On t he ot her hand, t he m ax- propert ies lim it an elem ent t o a m axim um size. The st yled

Section 11.4. Applying Floats to Your Layouts

elem ent can get sm aller t han t hat value, but never larger. Wit h t hem , you can m ake sure your pages don't get t oo wide t o be unreadable. Say you creat e a st yle for t he < body> t ag wit h t his propert y: m ax- widt h: 1200px. Now, if a visit or expands her browser window t o 1800 pixels wide ( on her unbelievably expensive 30- inch m onit or) , t he page cont ent doesn't sprawl all over t he screen, but rem ains 1200 pixels wide. Max- height does t he sam e t hing, but for t he height of a st yle. By com bining t he t wo propert ies, you can creat e a st yle t hat expands and cont ract s only wit hin set dim ensions, so your design never get s t oo sm all or t oo big: body { min-width: 760px; max-width: 1200px; }

The only problem wit h t hese ot herwise useful propert ies: I nt ernet Explorer 6 and earlier ignores t hem com plet ely. I f you're feeling advent urous, t ry one of t he workarounds at www. cssplay.co.uk/ boxes/ widt h3.ht m l or www.ant ix.co.uk/ code/ css/ im posing_m inim um _widt h/ . Bot h workarounds are experim ent al, but t hey work fairly well. There's also a JavaScript t echnique t hat dynam ically changes t he dim ensions of Web page elem ent s based on t he size of t he browser window: www.doxdesk.com / soft ware/ j s/ m inm ax.ht m l .

Note: The technique described on these pages works only for fixed-width layouts, where you know the exact width of each column. For another method that achieves the same results with a liquid layout (where you don't know the exact width of the middle column), visit www.alistapart.com/articles/holygrail/.

Here's how t o lay out a page using negat ive m argins: 1. Add a w r a ppe r < div> a r ou n d a ll of t h e pa ge con t e n t . This st ep provides a cont ainer for set t ing a fixed widt h for all of t he cont ent on t he page, and gives you an easy way t o m ake t he banner, colum ns, and foot er t he sam e widt h. 2. Se t a w idt h for t h e w r a ppe r < div> . Creat e a st yle for t he wrapper div t hat gives it a set widt h. For exam ple, 760 pixels is a t ypical size t hat accom m odat es visit ors wit h 800 x 600 pixel m onit ors. 3.

Section 11.4. Applying Floats to Your Layouts

W r a p e a ch colu m n in a < div> t a g w it h a n I D or cla ss a t t r ibu t e . This part of t he process is t he sam e as creat ing any float - based layout . I t defines t he basic layout blocks ( Figure 11- 8, t op left ) . 4. Floa t t h e divs for e a ch colu m n . You m ust float each of t he colum ns in your design. When you float t hem all t o t he left , t hey sit sideby- side. Anot her opt ion's t o float t he left sidebar and m ain cont ent left and t he right sidebar right . ( Since all colum ns are enclosed in t he wrapper < div> from st ep 1, t he right sidebar st ays close t o t he cent ral colum n.)

Note: If you're not using a wrapper div as described in step 1, then you must float the right sidebar left. Otherwise, it clings to the right edge of the browser window, potentially creating a large empty space between the right sidebar and the main content. 5. Se t w idt h s for e a ch colu m n . You should always specify a widt h for a float ed elem ent . Depending on your design, you can also add padding, m argins, and borders. Keep in m ind, t hough, t hat t he t ot al widt h of t he t hree colum ns in t he browser window is t he sum of t he CSS widt h propert y values and t he left and right m argins, padding, and borders for each colum n. ( And rem em ber t hat , as described in Sect ion 7.5.3, I nt ernet Explorer 5 on Windows has it s own ideas about what widt h m eans.) Yep, here's where t he m at h com es in. I f you're not careful, t he t ot al widt h of t he colum ns m ay exceed t he widt h provided by t he wrapper < div> , causing t he dreaded float drop ( see Sect ion 11.1.1) .

Note: The width property doesn't define the total width that an element takes up onscreen. Margins, padding, and borders count, too. If this stuff doesn't sound familiar, then read Section 7.1 to brush up on the CSS box model theory. 6. Add a le ft m a r gin t o t h e m a in colu m n . Here's where t he negat ive m argin t echnique differs from t he layout m et hods described earlier in t his chapt er. The left m argin should equal t he space required for t he left sidebar. I f t he left sidebar is 160 pixels wide, t hen set t he left m argin of t he m ain colum n t o 160 pixels: m argin- left : 160px. The t op- right diagram in Figure 11- 8 shows t he page so far. The crosshat ched area t o t he left of t he m ain colum n ( 3) represent s t hat colum n's left m argin. Or, say t he left sidebar is 160 pixels wide and you want 10 pixels of space bet ween it and t he m ain

Section 11.4. Applying Floats to Your Layouts

cont ent . I n t hat case, add 10 pixels t o t he m ain colum n's left m argin: m argin- left : 170px.

Figu r e 1 1 - 8 . Ye s, Vir gin ia , you ca n pu t t h r e e divs in t o a n y or de r in you r H TM L ( t op le ft ) a n d posit ion t h e m in a n y or de r on t h e scr e e n ( bot t om ) . Th e se cr e t is u sin g n e ga t ive m a r gin s t o pu ll a n e le m e n t t h a t a ppe a r s la t e r in t h e H TM L ove r a n d pa st a n e le m e n t t h a t pr e ce de s it . I n t h e t op r igh t dia gr a m , n ot ice t h a t t h e le ft side ba r ( # 4 ) floa t s n e x t t o t h e m a in con t e n t colu m n ( # 3 ) ; a ddin g a n e ga t ive m a r gin t o t h e le ft side ba r pu lls it in t o posit ion on t h e le ft e dge of t h e pa ge . To m a k e r oom for t h a t le ft side ba r , you a lso a dd a posit ive le ft m a r gin t o t h e m iddle colu m n s ( in dica t e d by t h e cr ossh a t ch e d box on t h e t op- r igh t dia gr a m ) .

Section 11.4. Applying Floats to Your Layouts

Finally, when t he left sidebar has padding and borders, you need t o fact or t hose in as well. Suppose t he left sidebar is 160 pixels wide, has a 2- pixel right border and 10 pixels of left and right padding, and you want 10 pixels of space bet ween it and t he m ain colum n. Add all of t hese t oget her t o get t he left m argin value for t he m ain colum n. So, 160 ( widt h value) + 2 ( right border) + 10 ( left padding) + 10 ( right padding) + 10 ( gut t er bet ween sidebar and m ain colum n) = 192 pixels ( m argin- left : 192px) . 7. Apply a n e ga t ive m a r gin t o t h e le ft side ba r < div> . At t his point , t he left sidebar's float ed t o t he left , but since it com es aft er t he m ain colum n in t he HTML's source order, it appears on t he right edge of t he m ain colum n ( Figure 11- 8, t op right ) . To get it int o posit ion, use a negat ive m argin, whichbelieve it or not pulls t he sidebar clear across t he m ain colum n t o t he left edge of t he page. The only t rick is figuring out what t hat negat ive m argin value should be t o m ove t he sidebar t he exact dist ance required t o posit ion it at t he left side of t he page. I n ot her words, t he left m argin m ust equal t he dist ance from t he right edge of t he m ain colum n t o t he left edge of t he wrapper < div> . To det erm ine t hat value, add t he m ain colum n's widt h, left and right m argins, left and right padding, and left and right borders. Say t he m ain colum n is 400 pixels wide, has a 1 pixel border around it , has 10 pixels of left padding and 15 pixels of right padding, and has a 160 pixels left m argin t o accom m odat e t he left sidebar. Just add t he values t oget her t o get t he left sidebar's left m argin value: 400+ 1+ 1+ 10+ 15+ 160= 587. Then add a left m argin t o t he st yle form at t ing t he left sidebar, but m ake it s value negat ive: left - m argin: - 587px; . The m inus sign is t he crit ical piece t hat m akes t he whole t hing work.

Section 11.4. Applying Floats to Your Layouts

8. Fix t h e I n t e r n e t Ex plor e r bu gs. When you use negat ive m argins, I nt ernet Explorer 6 and earlier exhibit s a weird bugt he doublem argin bug. I n t his case, I E doubles t he left m argin applied t o t he m ain colum n, t ot ally disrupt ing t he design. The fix is t o add display: inline t o t he st yle form at t ing t he m ain colum n. ( Read m ore about t he double- m argin bug in Sect ion 11.1.) Once you get past t he m at h, t he negat ive m argin approach rewards you wit h flexibilit y. I f you want t o swap t he sidebars so t he left sidebar m oves t o t he right and right sidebar m oves t o t he left , t hen sim ply swap t he st yles for t hose t wo divs. I n ot her words, set t he first sidebar t o float right , and t he second sidebar t o float left using a negat ive left m argin. You'll see negat ive m argins in act ion in t he t ut orial in Sect ion 11.1.

Section 11.5. Overcoming Float Problems

11.5. Overcoming Float Problems As you get m ore advent urous wit h CSS, you'll probably encount erlike m any Web designers before yousom e of t he weird int ricacies of working wit h float s. This sect ion describes a few com m on problem s and t heir solut ions. ( And if you ever st um ble upon a problem not list ed here, you can always t ake it t o one of t he online forum s or discussion list s in Appendix C.)

Note: When it comes to designing pages that work in Internet Explorer, there are even more potential pitfalls. So many, in fact, that this chapter has a separate section dedicated to dealing with that one browser. See Section 11.1.

11.5.1. Clearing and Containing Floats Float s are powerful design t ools because t hey let cont ent flow around t hem . Float ing a phot o let s t ext below it m ove up and wrap around t he im age ( Figure 11- 3) . When you're creat ing float - based colum n designs, t hough, som et im es you don't want cont ent t o m ove up and next t o a float ed elem ent . For exam ple, you frequent ly want t o keep copyright not ices, cont act inform at ion, or ot her housekeeping det ails at t he bot t om of your Web page, below all ot her cont ent . I n t he t wo- and t hree- colum n designs you've seen so far, if t he m ain colum n is short er t han eit her of t he float ed sidebar colum ns, a foot er can m ove up and around t he left float ed colum n ( Figure 11- 9, left ) . To m ake t he foot er st ay down below t he sidebars, you can use t he clear propert y ( Sect ion 7.6.2) . This propert y prevent s an elem ent from wrapping around float s. You can m ake an elem ent drop below a left float ed obj ect ( clear: left ; ) , or a right float ed obj ect ( clear: right ; ) . For foot ers and ot her it em s t hat need t o appear at t he bot t om of t he page, you should clear bot h left and right float s, like t his: #footer { clear: both; }

Figu r e 1 1 - 9 . You don 't a lw a ys w a n t a n it e m t o w r a p a r ou n d a floa t e d e le m e n t ( le ft ) . Copyr igh t n ot ice s a n d ot h e r m a t e r ia l t h a t be lon gs a t t h e bot t om of a pa ge u su a lly n e e d t o cle a r a n y floa t s t h e y e n cou n t e r . To a ch ie ve t h is, u se t h e cle a r pr ope r t y for t h e copyr igh t n ot ice t o for ce it t o t h e bot t om of t h e pa ge be low a n y floa t e d e le m e n t s.

Section 11.5. Overcoming Float Problems

Anot her problem occurs when you float one or m ore elem ent s inside a non- float ed cont aining t ag like a < div> t ag. When t he float ed elem ent is t aller t han t he ot her cont ent inside t he div, it st icks out of t he bot t om of t he enclosing elem ent . This snafu is especially not iceable if t hat t ag has a background or border. The t op of t he web page in Figure 11- 10 shows a < div> t ag t hat has an < h1> t ag ( " Bat ht ub Hydroponics Tips" ) and t wo colum ns creat ed by float ing t wo divs. The background and border, which appear only around t he < h1> t ag, are act ually applied t o t he ent ire enclosing < div> , including t he area where t he t wo colum ns are. However, since t he colum ns are float ed, t hey pop out of t he bot t om inst ead of expanding t he borders of t he box.

Note: For a good explanation of why floated elements can break outside of their containing blocks, read www.complexspiral.com/publications/containingfloats/ .

Figu r e 1 1 - 1 0 . A floa t e d e le m e n t ca n e sca pe it s con t a in in g < div> if it 's t a lle r t h a n t h e con t a in e r it se lf. I f t h e con t a in in g t a g in clu de s a ba ck gr ou n d or bor de r , t h e n t h e e sca pin g e le m e n t s ca n look lik e t h e y'r e n ot e ve n pa r t of t h e con t a in e r ( t op of pa ge ) . I n a ddit ion , a floa t e d e le m e n t ca n bu m p in t o ot h e r e le m e n t sin clu din g ot h e r floa t s, t h e r e by cr e a t in g a " st a ir - st e ppe d" e ffe ct ( bot t om of pa ge ) in st e a d of t h e n ice ly st a ck e d box e s in Figu r e 1 1 - 1 1 .

Section 11.5. Overcoming Float Problems

A sim ilar problem happens in t he bot t om exam ple in Figure 11- 10. I n t his case, each im age is float ed left inside a cont aining < div> t hat has a border. Because t he im ages are t aller t han t heir boxes, t hey pop out of t he bot t om . Unfort unat ely, t his exam ple's even worse t han t he previous one, because each im age causes t he im age below it t o wrap t o t he right , creat ing an ugly st aggered effect . You have t hree ways t o t ackle t he problem of t hese renegade float ing elem ent s: ●

Add a cle a r in g e le m e n t a t t h e bot t om of t h e con t a in in g div. This solut ion's t he m ost st raight forward, alt hough it adds ext ra HTML code. Sim ply add a t aglike a line break or horizont al ruleas t he last it em in t he < div> cont aining t he float ed elem ent ( t hat is, right before t he closing < / div> t ag) . Then use t he clear propert y t o force t hat ext ra t ag below t he float . This t rick m akes t he enclosing div expand, revealing it s background and border. You can add a line break< br> ( HTML) or < br / > ( XHTML) before t he closing < / div> t ag and add a class t o it : < br class= " clear" / > . Then creat e a st yle for it , like t his: br.clear { clear: both; }

●

●

Floa t t h e con t a in in g e le m e n t . An easier way is t o j ust float t he < div> cont aining t he float ed elem ent s as well. A float ed cont ainer < div> expands t o fully cont ain any float ed elem ent s inside it . I n Figure 11- 11, t op, t he < div> cont aining t he heading and t wo float ed colum ns is float ed t o t he left of t he page. I n t he process, it s ent ire boxbackground and bordersexpands t o fit everyt hing inside it , including t he float ed elem ent s. St range, but t rue. Use t h e " e a sy cle a r in g m e t h od." Wit h t his t echnique, creat ed by Tony Aslet t of CssCreat or.com , you add j ust a few st yles and a class nam e t o t he < div> t ag cont aining t he float ed elem ent . Of course, t he nam e " easy clearing m et hod" is a bit of a m isnom er, since t he CSS behind it is anyt hing but easy. You m ust add t hree different st yles t o your st yle sheet : One applies t o Firefox, Safari, Opera and ot her m odern browsers; anot her st yle applies t o I E 7 ( which doesn't yet underst and t he first st yle) ; and t he last st yle m akes I E 6 and I E 5 behave. The whole shebang looks like t his: .clear:after { content: ".";

Section 11.5. Overcoming Float Problems

display: block; height: 0; font-size: 0; clear: both; visibility: hidden; } .clear { min-height: 1px; } * html .clear { height: 1px; }

The last t wo st yles m ake I E 5, 6, and 7 " have layout " as described in t he box in Sect ion 11.1. Once you've added t hese st yles t o a st yle sheet , you sim ply add t he class nam e t o t he div cont aining t he escaping float s: < div class= " clear" > . See t he bot t om of Figure 11- 11.

Tip: You can simplify this code by replacing the last two styles with this CSS: .clear { zoom: 1; }. This single style knocks all versions of IE into shape, but since it uses the non-standard zoom property, it makes your page flunk the CSS validator check. To get around that, you can put this rule (along with any other IE-only styles) into an external style sheet and attach it to your Web pages using any of the tricks described in Chapter 14 (Section 14.5.2).

Figu r e 1 1 - 1 1 . D on 't le t a floa t e sca pe ! You h a ve se ve r a l w a ys t o m a k e floa t e d e le m e n t s st a y in side t h e bor de r s a n d ba ck gr ou n ds of t h e ir con t a in in g t a g. Floa t in g t h e con t a in e r w or k s ( t op) , a s doe s a spe cia l com bin a t ion of CSSa ffe ct ion a t e ly ca lle d t h e " e a sy cle a r in g m e t h od" ( bot t om ) . Bot h m e t h ods r e su lt in bor de r s a n d ba ck gr ou n ds t h a t su r r ou n d t h e con t a in e r a n d t h e floa t s in side .

Section 11.5. Overcoming Float Problems

11.5.2. Creating Full-Height Columns HTML t ables aren't great for Web page layout for several reasons. They add lot s of code, are difficult t o updat e, and don't work well on alt ernat ive browsers like t hose used by cellphones. But t ables have one t hing going for t hem in t he layout depart m ent t he abilit y t o creat e colum ns of equal height . Equal- height colum ns let you add a background color or graphic t o one colum n and have it fill t he ent ire height of t he page. The backgrounds of t he t wo sidebars in t he t op im age of Figure 11- 12 fill t he screen height , creat ing solid, bold st ripes on eit her side of t he page. CSS float s, on t he ot her hand, fall a bit short in t his regard. Table cells in a row are always t he sam e height , which isn't t rue of divs. The height of a float is usually dict at ed by t he cont ent inside it . When t here's not a lot of cont ent , t he float 's not very t all. Since a background im age or background color fills only t he float , you can end up wit h solid- colored colum ns t hat st op short of t he page bot t om , as in t he circled areas in Figure 11- 12, bot t om . As wit h m ost problem s relat ed t o CSS, t here's a workaround. The secret 's t o add background im ages t o a t ag t hat wraps around t he st ubby sidebar and t he ot her colum ns on t he page. Say your HTML has t wo < div> t ags t hat cont ain t he cont ent for a left sidebar and t he page's m ain cont ent : Sidebar content here Main content for page, this column has a lot of text and is much taller than the sidebar.

The sidebar < div> is float ed t o t he left edge of t he page and has a widt h of 170 pixels. Because t here's less cont ent in t he sidebar, it 's short er t han t he m ain t ext . Suppose you wrap t hat HTML in a wrapper < div> t ag, like so: is 390 pixels wide, wit h a 1- pixel border and 15 pixels of left and right m argin for a t ot al widt h of 422 pixels. ( You m ay need a calculat or for t his one: 390 + 1 [ left border] + 1 [ right border] + 15 [ left m argin] + 15 [ right m argin] .) Side ba r 2 ( r igh t side ) . This elem ent has a widt h propert y set t o 150 pixels, wit h 10 pixels of left and 10 pixels of right padding: 170 pixels, j ust like Sidebar 1.

The act ual widt hs of each elem ent add up t o a grand t ot al of 762 pixels. That 's t wo pixels m ore t han t he widt h of t he wrapper < div> . The m iddle im age of Figure 11- 14 shows an out line around t he m ain cont ent < div> indicat ing it s t ot al widt h plus m argins. Just t hose m easly t wo ext ra pixels of widt h ( circled) are enough t o cause a colum n t o drop down. The solut ion: Rem ove t wo pixels of space from any of t he elem ent s. Changing t he m ain cont ent div's left and right m argins from 15 t o 14 pixels buys you t he ext ra room needed for all t hree colum ns t o fit side by side ( bot t om ) .

Figu r e 1 1 - 1 4 . I t t a k e s on ly a sin gle pix e l or t w o t o r u in a de sign . W h e n t h e w idt h of floa t e d e le m e n t s a r e j u st a h a ir w ide r t h a n t h e ir con t a in in g block ( lik e a < div> w it h a se t w idt h , or e ve n t h e br ow se r w in dow it se lf) , t h e la st floa t e d e le m e n t dr ops be low t h e ot h e r s ( t op) . Th e a ct u a l w idt h of a n e le m e n t com bin e s

Section 11.5. Overcoming Float Problems

m a n y CSS pr ope r t ie s. I n t h e m iddle im a ge , t h e ou t lin e a r ou n d t h e m a in con t e n t a r e a sh ow s t h a t it 's a t a d t oo w ide t o a llow t h e r igh t side ba r t o fit ( cir cle d) . Adj u st in g a n y of t h e e le m e n t s by r e m ovin g a bit of w idt h , pa ddin g, or m a r gin s ca n solve t h e pr oble m ( bot t om ) .

While m iscalculat ed colum n widt hs are t he m ost com m on cause of dropping float s, t hey're not t he only cause. Here are a few ot her culprit s: ●

●

Rou n din g e r r or s in pe r ce n t a ge w idt h s. Be careful when set t ing widt hs in percent ages. Browsers som et im es m ake m ist akes when calculat ing t he act ual num ber of pixels needed t o display som et hing on t he screen. That is, t hey can round num bers up, m aking elem ent s slight ly t oo large for t he available space. So err on t he side of caut ion and m ake your percent age widt hs t ot al slight ly less t han 100 percent . I n t e r n e t Ex plor e r 's dou ble - m a r gin bu g. Under som e condit ions, I nt ernet Explorer 6 and earlier doubles t he m argin applied t o a

Section 11.5. Overcoming Float Problems

●

●

float ed elem ent , m aking t he elem ent wider t han in ot her browsers. When you have a float drop occurring only in I E 6 or earlier, t his bug m ay be t he culprit . See Sect ion 11.1 for a solut ion. I n t e r n e t Ex plor e r 's 3 - pix e l ga p. Som et im es I E 6 and earlier adds an ext ra 3 pixels t o t he side of a float . Again, if you see a float drop only in I E, t hen t his bug could be t he reason. See Sect ion 11.1.1 for an explanat ion and solut ion. I t a lic t e x t . I E st rikes again. I f a float ed elem ent cont ains it alicized t ext , t hen I E 6 som et im es m akes t he float wider. When t here's a float drop and it alics inside t he float , check t o see if t he problem 's happening in all browsers or only I E. For a solut ion, you can rem ove any it alics from t he sidebar, or add overflow: hidden t o t he st yle form at t ing t he sidebar.

Tip: For the definitive treatise on dropping floats (and how to solve them), visit http://nemesis1.f2o.org/aarchive?id=11.

Bot t om line: Float drops are always caused by not enough room t o hold all of t he colum ns. Rat her t han st riving t o use every last pixel of onscreen space, give all your elem ent s a lit t le m ore wiggle room . Get in t he habit of m aking t he overall colum n widt hs a bit sm aller t han necessary, and you'll spend less t im e t roubleshoot ing float drops.

Section 11.6. Handling Internet Explorer Bugs

11.6. Handling Internet Explorer Bugs The Windows version of I nt ernet Explorer has a long hist ory of CSS bugs, especially ( and unfort unat ely) when it com es t o float - based layout s. These bugs can affect t he placem ent of float s and t he overall widt h allot t ed t o float ed elem ent s. I f you're lucky, you m ay j ust get a slight ly annoying difference in how your Web page looks in I nt ernet Explorer versus ot her browsers. At worst , t hese bugs can cause significant display problem s like t he float drops discussed in t he previous sect ion. This sect ion t ells you t he m ost com m on problem s and how t o get around t hem .

Tip: When a floated element has padding or a border, it appears thinner in IE 5 than in other browsers. There's more detail on this IE 5 bugand its solutionin Section 7.5.3.

11.6.1. Double-Margin Bug I nt ernet Explorer 6 and earlier som et im es doubles t he size of a m argin you've applied t o a float ed elem ent . The problem occurs only when t he m argin's in t he sam e direct ion as t he float a left m argin on a left - float ed elem ent or a right m argin on a right - float ed elem ent . I n Figure 11- 15, t here's a left - float ed sidebar holding t he sit e's navigat ion. To add a bit of space bet ween it and t he left edge of t he browser window, t he sidebar has a left m argin of 10 pixels.

Figu r e 1 1 - 1 5 . A 1 0 - pix e l le ft m a r gin a pplie d t o a le ft - floa t e d e le m e n t sh ou ld, in t h e or y a n yw a y, in de n t t h e floa t 1 0 pix e ls fr om t h e le ft e dge of t h e pa ge . Fir e fox ( a bove ) ge t s it r igh t . Bu t I E 6 ( bot t om ) in cor r e ct ly dou ble s t h a t m a r gin . By a ddin g 2 0 pix e ls t o t h e le ft e dge of t h e side ba r , I E 6 sign ifica n t ly ch a n ge s t h e pa ge 's a ppe a r a n ce .

Section 11.6. Handling Internet Explorer Bugs

Most browsers, including I nt ernet Explorer 7, Safari, and Firefox ( Figure 11- 15, t op) add t he request ed 10 pixels of space. However, I nt ernet Explorer 6 ( bot t om ) doubles t hat m argin t o 20 pixels. Even wit h relat ively sm all m argins like 10 pixels, t he visual difference is significant . Furt herm ore, if t he layout 's very t ight , wit h precisely m easured float ed elem ent s sit t ing side by side, t hen t he doubled m argin can easily t rigger a float drop ( Sect ion 11.1.1) .

Note: This margin doubling happens only when the element's margin touches the edge of its containing block, so when an element is floated left against another left-floated element, its left margin won't double.

The solut ion's sim ple: Add display: inline; t o t he CSS st yle for t he float ed elem ent : #sidebar { float: left; margin-left: 10px; width: 160px; display: inline; }

I n t his case, t he display propert y doesn't do anyt hing except fix I E's bug. Float ed elem ent s are always block- level elem ent s, and changing a st yle's display t o inline won't alt er t hat . ( See Sect ion 7.2.4 for m ore on t he display propert y.) However, even t hough t his added st yle declarat ion doesn't adversely affect any ot her browsers, you m ay want t o put it in an I E- only st yle using t he * ht m l hack: #sidebar { float: left; margin-left: 10px; width: 160px; } * html #sidebar { display: inline; }

Tip: Internet Explorer's conditional comments feature provides an even better way to isolate IE-only styles than the * html hack. An external style sheet attached to a page using a conditional comment is read only by Internet Explorer; it's ignored by all other browsers. See Section 14.5.2 for the details.

11.6.2. 3-Pixel Gaps

Section 11.6. Handling Internet Explorer Bugs

I nt ernet Explorer 6 and earlier insert s an addit ional t hree pixels of space bet ween a float ed colum n and a non- float ed colum n. The exact placem ent of t hat gap depends on a couple of condit ions: ●

Th e n on - floa t e d colu m n doe sn 't h a ve a se t w idt h or h e igh t . I f t he colum n next t o t he float doesn't have any dim ensions defined, t hen you'll see a 3- pixel indent bet ween t he edge of t he colum n and t he t ext inside t hat colum n. This space appears only along t he float , so when t he float ends, t he t ext m oves back t o t he left edge of t he colum n ( Figure 11- 16) . I n t his case, t he best solut ion's t o live wit h it . The ext ra indent isn't t erribly dist ract ing and doesn't do anyt hing else weird t o t he page. But if t he perfect ionist in you can't let go of t his bug, you can fix it by doing what 's known as " adding layout " t o t he nonfloat ed elem ent , as described in t he box in Sect ion 11.1. Add an I E6- only st yle for t hat colum n: * html #mainColumn { height; 1px; }

The downside t o fixing t his bug is t hat it t riggers t he bug discussed next . ( See what you get for being a perfect ionist ?)

Figu r e 1 1 - 1 6 . On t h is pa ge , t h e le ft - h a n d side ba r is floa t e d le ft , w h ile t h e ce n t r a l colu m n isn 't floa t e d a t a ll. A le ft m a r gin on t h e ce n t r a l colu m n in de n t s it fa r e n ou gh t o t h e le ft so t h a t it w on 't w r a p a r ou n d t h e bot t om of t h e side ba r . ( Th is t e ch n iqu e is de scr ibe d in Se ct ion 1 1 .1 .) Un for t u n a t e ly, I n t e r n e t Ex plor e r 6 a n d e a r lie r a lso a dds a sm a ll in de n t t o t h e t e x t in t h e n on floa t e d colu m n .

Section 11.6. Handling Internet Explorer Bugs

●

Th e n on - floa t e d colu m n h a s a se t w idt h or h e igh t . When t he colum n next t o t he float has a set layout dim ension ( like height in t he previous exam ple) , anot her 3- pixel error appearsa sm all gap bet ween t he t wo colum ns ( Figure 11- 17, left ) . This bug is m ore serious t han t he one in Figure 11- 16, since t his 3- pixel gap can force t he second colum n t o drop below t he float ed elem ent ( Figure 11- 17, right ) . The solut ion t o t his problem is t wo- fold. First , you m ust elim inat e t he left m argin of t he non- float ed colum n ( but for I E 6 and earlier only) : * html #mainColumn { margin-left: 0; }

Then, you m ust set t he right m argin for t he float ed colum n t o - 3 pixels. This pulls t he non- float ed colum n back int o posit ion: * html #sidebar { margin-right: -3px; }

I n any norm al browser, t hese st yles m ake no sense. Som e det erm ined CSS expert s ( wit h t im e on t heir hands, apparent ly) cam e up wit h t hem t o m ake I E behave. For m ore info on t his phenom enon, check out www.posit ioniseveryt hing.net / explorer/ t hreepxt est . ht m l .

Figu r e 1 1 - 1 7 . I n t e r n e t Ex plor e r 6 oft e n h a s t r ou ble w it h floa t s. I f, for e x a m ple , a sin gle colu m n is floa t e d le ft a n d a n ot h e r n on - floa t e d colu m n w it h a se t w idt h w r a ps a r ou n d t h e floa t , I E 6 a n d e a r lie r in j e ct a 3 - pix e l ga p be t w e e n t h e t w o colu m n s ( le ft ) . For de sign s t h a t h a ve pr e cise ly de t e r m in e d w idt h s, t h a t ga p ca n a dd j u st e n ou gh spa ce t o for ce a colu m n t o dr op be low t h e floa t e d e le m e n t ( r igh t ) .

Section 11.6. Handling Internet Explorer Bugs

Anot her opt ion is t o float all of t he colum ns. I n t he exam ples pict ured in Figure 11- 16 and Figure 11- 17, rem oving any left m argins from t he non- float ed colum n and float ing it eit her left or right elim inat es bot h 3- pixel problem s: #mainColumn { float: left; }

This solut ion seem s quick, but it adds a lit t le m ore com plexit y, since you have t o m anage yet anot her float in t he design.

11.6.3. Other IE Problems A few m ore bugs plague float - based layout s in I nt ernet Explorer 6. Many of t hem are so rare you m ay never com e across t hem in your Web design proj ect s. But j ust in case, here are a couple of weird t hings t hat can happen when viewing a page in I E 6 or earlier. ●

●

I f t h e bot t om pa r t of a floa t e d e le m e n t j u st disa ppe a r s, it m ay be t he guillot ine bug. For inform at ion on t he cause and solut ion ( which fort unat ely has not hing t o do wit h sharp, dangerous obj ect s) , visit www.posit ioniseveryt hing.net / explorer/ guillot ine.ht m l . Con t e n t in side a floa t e d e le m e n t doe sn 't a ppe a r , but som et im es reappears if you resize t he browser window or scroll. This oddit y is apt ly called t he peek- a- boo bug. Learn about it at www.posit ioniseveryt hing.net / explorer/ peekaboo.ht m l.

POWER USERS' CLINIC Got Layout?

Section 11.6. Handling Internet Explorer Bugs

As you've probably gat hered by now, I nt ernet Explorer for Windows has a long hist ory of browser bugs. Som e basic CSS t hat looks fine in Firefox or Safari crum bles in I nt ernet Explorer 6. As it t urns out , you can fix m any I E bugs by swit ching on a special I E- only propert y known as layout . This isn't a CSS concept , nor does it have anyt hing t o do wit h t he rules of HTML. I t 's j ust a concept built int o I nt ernet Explorer by t he engineers who creat ed I E ( who, rum or has it , were under m ind cont rol by ext rat errest rial beings at t he t im e, which explains a lot ) . As far as I E is concerned, each page elem ent eit her has layout or it doesn't . I n I E, float s, list it em s, and absolut ely posit ioned elem ent s display different ly depending on whet her or not t hey have layout . I n t he last chapt er ( Sect ion 9.1.1) , you saw how I E 6 doesn't m ake t he ent ire area of a link clickable when t he link is set t o display as a block. You can fix t hat problem by creat ing an I E- only st yle t hat set s t he links t o 1 pixel t all: * html a .nav a { height: 1px; }

The point of t hat st yle isn't t o m ake t he links 1 pixel t all: I E 6 ignores t he height specificat ion anyway and expands t he links t o t he height of t he links' cont ent . But t he height propert y t riggers layout in I E 6. For reasons known only t o Microsoft ( and t he ext rat errest rials) , swit ching on layout m akes I E t reat t he ent ire area of block- level links as clickable. Height isn't t he only propert y t hat swit ches on layout in I E. Several ot her CSS propert ies also give an elem ent layout : posit ion: absolut e; float : left ; float : right ; display: inline- t able; any widt h value, any height value, and an I E- only propert y called zoom . You can add t hat last propert y t o a st yle like t his: zoom : 1; . Zoom doesn't affect how t he elem ent looks in any ot her browser, and if you use zoom : 1, all it does in I E is give t he elem ent layout . The downside of using t his propert y is t hat it isn't valid CSS, so it won't pass W3C validat ion ( Sect ion 2.4.1) . I nt ernet Explorer 7 ( as of t his writ ing) st ill has a few bugs you have t o fix by adding layout . Any of t he propert ies list ed above add layout t o an elem ent in I E 7, as will t he following: m in- widt h, m ax- widt h, m in- height , and m ax- height ( see Sect ion 11.4.3) . Throughout t his book, you use layout t o overcom e m any different I E bugs. For an in- dept h ( so deep, you m ay need a life preserver) discussion of t he t opic, go t o www.sat zansat z.de/ cssd/ onhavinglayout .ht m l . Microsoft offers a friendly int roduct ion at ht t p: / / m sdn.m icrosoft .com / library/ default .asp?url= / library/ en- us/ I ETechCol/ cols/ dnexpie/ expie20050831. asp.

Section 11.7. Tutorial: Multiple Column Layouts

11.7. Tutorial: Multiple Column Layouts I n t his t ut orial, you'll creat e a m ult i- colum n, float - based layout . I n t he process, you'll creat e t wo- and t hree- colum n liquid designs, as well as a fixed- widt h design. To get st art ed, download t he t ut orial files locat ed on t his book's com panion Web sit e at www.sawm ac.com / css/ . Click t he t ut orial link and download t he files. All t he files are in a ZI P archive, so you need t o unzip t hem first . ( Find det ailed inst ruct ions on t he layout 1 folder. Web sit e.) The files for t his t ut orial are in t he chapt er_11

11.7.1. Structuring the HTML The first st ep in creat ing a CSS- based layout is ident ifying t he different layout elem ent s on t he page. You do t his by wrapping chunks of HTML inside of < div> t ags, each of which represent s a different part of t he page. 1. Ope n t h e st a r t .h t m l file in a t e x t e dit or , a n d click in t h e e m pt y lin e follow in g t h e H TM L com m e n t :

The < ! - - [ if I E] > is t he condit ion it self. I t t ranslat es t o: " if t his browser is I nt ernet Explorer t hen process t he following HTML." So any I nt ernet Explorer browser act s on t he HTML t hat com es aft er t his line of code and st ops when it get s t o t he < ! [ endif] - - > st at em ent . I n t his way, you can add any HTMLt ext , im ages, st yles and even links t o ext ernal st yle sheet st o I nt ernet Explorer only.

Note: Non-IE-browsers simply view conditional statements as HTML comments and ignore them.

Section 14.5. Managing Internet Explorer Hacks

14.5.2.1. Conditional comments and IE 7 I nt ernet Explorer 7 underst ands CSS m uch bet t er t han earlier versions, so you m ay have t o hide som e I E hacks from t hat browser as well. Fort unat ely, condit ional com m ent s also let you specify which version of I nt ernet Explorer t he st yle sheet applies t o. Say you want t o have a part icular st yle sheet load only for I nt ernet Explorer 6 or earlier. Add t he following condit ional com m ent t o your Web page's head:

The lt e st ands for " less t han or equal t o," so if lt e I E 6 m eans " if t his browser is version 6 or earlier of I nt ernet Explorer."

14.5.2.2. Conditional comments and the cascade Use what ever m et hod you prefer for linking an ext ernal st yle sheet ( Sect ion 2.4) , but add any condit ional com m ent s aft er any ot her linked st yle sheet s. Most I E hacks t end t o redefine st yles already present in t he st yle sheet st yles t hat work for ot her browsers. And, due t o t he nat ure of t he cascade, rules defined lat er in a page can override earlier defined st yles. I n order t o m ake sure your redefined " I E- only" st yles successfully t ake hold in I nt ernet Explorer, t hey should appear aft er any ot her st yle sheet s at t ached t o t he page. Here's t he code you m ight use t o link a) a st yle sheet for all browsers, b) a st yle sheet j ust for I E 6, and c) a st yle sheet for version 5 or earlier of I E:

Note: For more information on Internet Explorer's conditional comments, visit the source: http://msdn.microsoft.com/workshop/author/ dhtml/overview/ccomment_ovw.asp.

Part V: Appendixes

Part V: Appendixes Appe n dix A: CSS Pr ope r t y Re fe r e n ce Appe n dix B: CSS in D r e a m w e a ve r 8 Appe n dix C: CSS Re sou r ce s

Appendix A. CSS Property Reference

Appendix A. CSS Property Reference Mast ering Cascading St yle Sheet s involves knowing how t o use a large num ber of CSS propert ies t hat cont rol t he appearance of t ext , im ages, t ables, and form s. To help you in your quest , t his appendix gives you a sum m ary of t he propert ies and values you'll use t o creat e your own st yles. This list covers nearly all of t he CSS 2.1 st andard propert iest he ones t hat m ost Web browsers support .

Note: This appendix leaves out properties that no (or hardly any) browsers recognize. Otherwise, the following descriptions mention the browsers with which each property works. For full details straight from the horse's mouth, visit the World Wide Web Consortium's CSS 2.1 specification at www.w3.org/TR/CSS21/.

Section A.1. CSS Values

A.1. CSS Values Every CSS propert y has a corresponding value. The color propert y, which form at s font color, requires a color value t o specify which color you want t o use. The propert y color: # FFF; creat es whit e t ext . Different propert ies require different t ypes of values, but t hey com e in four basic cat egories: colors, lengt hs and sizes, keywords, and URLs.

A.1.1. Colors You can assign colors t o m any different propert ies, including t hose for font , background, and borders. CSS provides several different ways t o specify color.

A.1.1.1. Keywords A color keyword is sim ply t he nam e of t he color, like whit e or black. There are current ly 17 recognized color keywords: aqua, black, blue, fuchsia, gray, green, lim e, m aroon, navy, olive, orange, purple, red, silver, t eal, whit e, and yellow. Som e browsers accept m ore keywords, and CSS 3 prom ises t o offer m any m ore in t he fut ure ( ht t p: / / www.w3.org/ TR/ css3- color/ ) .

A.1.1.2. RGB values Com put er m onit ors creat e colors using a m ixt ure of red, green, and blue light . These RGB values can creat e ( nearly) t he full spect rum of color. Alm ost every design, illust rat ion, and graphics program let s you specify colors using RGB, so it 's easy t o t ransfer a color from one of t hose program s t o a CSS propert y. CSS represent s RGB values in several ways: ●

H e x va lu e s. The m et hod m ost com m only used on t he Web for ident ifying color, hex color values consist of t hree t wo- charact er num bers in t he hexadecim al ( t hat is, base 16) syst em . # FF0033 represent s an RGB value com posed of red ( FF, which equals 255 in norm al, base 10 num bers) , green ( 00) , and blue ( 33) . The # t ells CSS t o expect hex num bers ahead, and it 's required. I f you leave off t he # , a Web browser won't display t he correct color.

Tip: If all three two-digit values have repeated digits, you can shorten the hex value by using just the first number of each pair. For example #361 means the same thing as #336611. ●

●

RGB pe r ce n t a ge s. You can also specify a color using percent age values, like t his: rgb( 100% , 0% , 33% ) . You can get t hese num bers from im age edit ing and design program s t hat can define colors using percent ages ( which is m ost of t hem ) . D e cim a l va lu e s. Finally, you can use decim al RGB values t o specify a color. The form at is sim ilar t o t he percent age opt ion, but you use a num ber from 0 t o 255 t o indicat e each color: rgb( 255, 0, 33) .

I t doesn't m at t er which m et hod you uset hey all work. For consist ency's sake, you should pick one way of specifying RGB values and st ick wit h it . The Windows and Mac operat ing syst em s bot h have color pickers which let you find t he perfect color from a palet t e of m illions, and t hen show you t he RGB value. Alt ernat ively, you can use t his free online color picker: www.ficm l.org/ j em im ap/ st yle/ color/ wheel.ht m l.

Section A.1. CSS Values

Tip: Many Mac programs such as TextEdit, let you open the color picker by pressing

-Shift-C.

A.2.1. Lengths and Sizes CSS provides m any different ways t o m easure t he size of t ype, t he widt h of a box, or t he t hickness of a borderline. To indicat e t ype size, you can use inches, picas, point s, cent im et ers, m illim et ers, em - height s, ex- height s, pixels, and percent ages. However, even t hough t here are a lot of opt ions, m ost don't apply t o t he world of onscreen display, for reasons discussed in Sect ion 6.2. You really need t o t hink about t hese t hree only pixels, em s, and percent ages.

A.1.2.1. Pixels A pixel is a single dot on a com put er screen. Pixels give you a consist ent m et hod of ident ifying lengt hs and font sizes from com put er t o com put er: 72 pixels on one m onit or is 72 pixels on anot her m onit or. That doesn't m ean t he act ual, real- world lengt h is t he sam e for everyone, t hough. Since people set t heir m onit ors t o different resolut ions800 x 600, 1024 x 768, 1600 x 1200, or what ever72 pixels m ay t ake up 1 inch on one m onit or, but only half an inch for som eone else. Nevert heless, pixels give you t he m ost consist ent cont rol over present at ion.

Note: There's just one drawback to using pixels: folks using Internet Explorer 6 or earlier can't resize any type that's sized using pixels. If your text is too small for someone's eyes, the visitor won't be able to enlarge it to make it more readable. (See Section 6.2.2 for more on pixel measurements.)

A.1.2.2. Ems Originally from t he t ypographic world, an em is a unit t hat represent s t he height of t he capit al let t er M for a part icular font . I n Web pages, one em is t he height of t he Web browser's base t ext size, which is usually 16 pixels. However, anyone can change t hat base size set t ing, so 1em m ay be 16 pixels for one person, but 24 pixels in som eone else's browser. I n ot her words, em s are a relat ive unit of m easurem ent . I n addit ion t o t he browser's init ial font size set t ing, em s can inherit size inform at ion from cont aining t ags. A t ype size of .9em would m ake t ext about 14 pixels t all on m ost browsers wit h a 16 pixel base size. But if you have a < p> t ag wit h a font size of .9em s, and t hen a < st rong> t ag wit h a font size of .9em s inside t hat < p> t ag, t hat < st rong> t ag's em size isn't 14 pixelsit 's 12 pixels ( 16 x .9 x .9) . So keep inherit ance in m ind when you use em values.

A.1.2.3. Percentages CSS uses percent ages for m any different purposes, like sizing t ext , det erm ining t he widt h or height of an elem ent , and specifying t he placem ent of an im age in t he background of a st yle, t o nam e a few. Now, what you're t aking a percent age of varies from propert y t o propert y. For font sizes, t he percent age is calculat ed based on t he t ext 's inherit ed value. Say t he general font size for a paragraph is 16 pixels t all. I f you creat ed a st yle for one special paragraph and set it s font size t o 200 percent , t hat t ext is displayed at 32

Section A.1. CSS Values

pixels t all. When applied t o widt h, however, percent ages are calculat ed based on t he widt h of t he page, or on anot her parent elem ent wit h a set widt h. You specify a percent age wit h a num ber followed by t he percent sign: 100% .

A.1.3. Keywords I nst ead of color or size, m any propert ies have t heir own specific values t hat affect how t he propert ies display and are represent ed by keywords. The t ext - align propert y, which aligns t ext on screen, can t ake one of four keywords: right , left , cent er, and j ust ify. Since keywords vary from propert y t o propert y, read t he propert y descript ions t hat follow t o learn t he keyword appropriat e t o each propert y. One keyword, however, is shared by all propert ies inherit . This keyword let s you force a st yle t o inherit a value from a parent elem ent . You can use t he inherit keyword on any propert y. This keyword gives you t he power t o m ake st yles inherit propert ies t hat aren't norm ally inherit ed from parent t ags. For inst ance, say you use t he t ext - decorat ion propert y t o underline a paragraph. Ot her t ags, such as < em > and < st rong> , inside t he < p> t ag don't inherit t his value, but you can force t hem t o do so wit h t he inherit keyword: em, strong { text-decoration: inherit; }

That way, t he em and st rong t ags display t he sam e t ext - decorat ion value as t heir parent < p> t agunderline, in t his case. So t he < em > and < st rong> elem ent s of t he paragraph each get underlined as does t he ent ire paragraph so you'd end up wit h double underlines under em phasized t ext ( a good reason why t hat propert y isn't inherit ed norm ally) . I f you change t he < p> t ag's t ext - decorat ion value t o overline inst ead of underline, t he < em > and < st rong> t ags inherit t hat value and display overlines, t oo.

Note: Underline/overline isn't a very useful example, mainly because inherit isn't a very useful value. But this wouldn't be a Missing Manual if it didn't give you all the facts.

A.1.4. URLs URL values let you point t o anot her file on t he Web. For exam ple, t he background- im age propert y accept s a URLt he pat h t o t he file on t he Webas it s value, which let s you assign a graphic file as a background for a page elem ent . This t echnique is handy for adding a t iling im age in t he background of a page or for using your own graphic for bullet ed list s ( see Sect ion 8.2) . I n CSS, you specify an URL like t his: url( im ages/ t ile.gif) . A st yle t hat adds an im age called t ile.gif t o t he background of t he page would look like t his: body { background-image: url(images/tile.gif); }

Unlike HTML, in CSS, quot es around t he URL are opt ional, so url( " im ages/ t ile.gif" ) , url( 'im ages/ t ile.gif') , and url( im ages/ t ile.gif) are equivalent .

Section A.1. CSS Values

Note: The URL itself is just like the HTML href attribute used for links, meaning you can use an absolute URL like http:// www.missingmanuals.com/images/tile.gif, a root-relative path like /images/tile.gif, or a document-relative URL like ../../ images/tile.gif. See Section 8.3 for the full story on these kinds of paths.

Section A.2. Text Properties

A.2. Text Properties The following propert ies affect how t ext is form at t ed on a Web page. Since m ost of t he propert ies in t his cat egory are inherit ed, you don't necessarily have t o apply t hem t o t ags specifically int ended for t ext ( like t he < p> t ag) . You can apply t hese propert ies t o t he < body> t ag, so t hat ot her t ags inherit and use t he sam e set t ings. This t echnique is a quick way t o creat e an overall font , color, and so on for a page or sect ion.

A.2.1. color (inherited) Set s t he color of t ext . Since it 's inherit ed, if you set t he color of t he < body> t ag t o red, for exam ple, all t ext inside of t he bodyand all ot her t ags inside t he < body> t agis red, t oo. ● ●

Va lu e s: any valid color value Ex a m ple : color: # FFFF33;

Note: The preset link colors for the tag override color inheritance. In the above example, any links inside the tag would still be standard hyperlink blue. See Section 9.1 for ways to change preset link colors.

A.2.2. font (inherited) This is a short cut m et hod for cram m ing t he following t ext propert ies int o a single st yle declarat ion: font st yle, font - variant , font - weight , font - size, line- height , and font - fam ily. ( Read on for t he individual descript ions.) You m ust separat e each value by a space and include at least font - size and font - fam ily, and t hose t wo propert ies m ust be t he last t wo it em s in t he declarat ion. The ot hers are opt ional. I f you don't set a propert y, t he browser uses it s own preset value, pot ent ially overriding inherit ed propert ies. ●

●

Va lu e s: Any value t hat 's valid for t he specific font propert y. When including a line- height , add a slash followed by t he line- height aft er t he font size like t his: 1.25em / 150% . Ex a m ple : font: italic small-caps bold 1.25em/150% Arial, Helvetica, sans-serif;

A.2.3. font-family (inherited) Specifies t he font t he browser should use t o display t ext . Font s are usually specified as a series of t hree t o four opt ions t o accom m odat e t he fact t hat a part icular font m ay not be inst alled on a visit or's com put er. See Sect ion 6.1.1. ●

●

Va lu e s: A com m a- separat ed list of font nam es. When a font has a space in it s nam e, surround t hat font nam e wit h quot es. The last font list ed is usually a generic font t ype inst ruct ing browsers t o choose a suit able font if t he ot her list ed font s aren't available: serif, sans- serif, m onot ype, fant asy, or cursive. Ex a m ple : font-family: "Lucida Grande", Arial, sans-serif;

Section A.2. Text Properties

A.2.4. font-size (inherited) Set s t he size of t ext . This propert y is inherit ed, which can lead t o som e weird behaviors when using relat ive lengt h m easurem ent s like percent ages and em s. ●

●

Va lu e s: Any valid CSS m easurem ent unit ( Sect ion A.1.1.1) , plus t he following keywords: xx- sm all, x- sm all, sm all, m edium , large, x- large, xx- large, larger, and sm aller. Medium represent s t he Web browser's norm al, preset font size, and t he ot her sizes are m ult iples of m edium . The exact num bers depend on t he browser, but t hey're generally a fact or of 1.2. For exam ple, large is 1.2 t im es as big as m edium . Due t o t he uncert aint y of how each browser handles t hese keywords, m any designers use pixels, em s, or percent ages inst ead. Ex a m ple : font-size: 1.25em;

Note: When the font-size property is inherited from another tag, these keywords multiply the inherited font size by the same factor (1.2 in most browsers).

A.2.5. font-style (inherited) Makes t ext it alic. Applied t o it alic t ext , it t urns it back t o plain t ext . The opt ions it alic and oblique are funct ionally t he sam e. ● ●

Va lu e s: it alic, oblique, norm al Ex a m ple : font-style: italic;

A.2.6. font-variant (inherited) Makes t ext appear in sm all caps, like t his: SPECI AL PRESENTATI ON. The value norm al rem oves sm all caps from t ext already form at t ed t hat way. ● ●

Va lu e s: sm all- caps, norm al Ex a m ple : font-variant: small-caps;

A.2.7. font-weight (inherited) Makes t ext bold, or rem oves bolding from t ext already form at t ed t hat way. ●

●

Va lu e s: CSS act ually provides 14 different font - weight keywords, but only a couple act ually work wit h t oday's browsers and com put er syst em sbold and norm al. Ex a m ple : font-weight: bold;

A.2.8. letter-spacing (inherited) Adj ust s t he space bet ween let t ers t o spread out let t ers ( adding spacing bet ween each) or cram let t ers

Section A.2. Text Properties

t oget her ( rem oving space) . ●

●

Va lu e s: Any valid CSS m easurem ent unit , t hough em s and pixels are m ost com m on. For t his propert y, percent ages don't work in m ost browsers. Use a posit ive value t o increase t he space bet ween let t ers and a negat ive value t o rem ove space ( scrunch let t ers t oget her) . The value norm al reset s let t er- spacing t o it s regular browser value of 0. Ex a m ple s: letter-spacing: -1px; letter-spacing: 2em;

A.2.9. line-height (inherited) Adj ust s space bet ween lines of t ext in a paragraph ( oft en called line spacing in word processing program s) . The norm al line height is 120 percent of t he size of t he t ext ( Sect ion 6.4) . ●

●

Va lu e s: Most valid CSS lengt hs ( Sect ion A.1.1.1) , t hough em s and pixels and percent ages are m ost com m on. Ex a m ple : line-height: 200%;

A.2.10. text-align (inherited) Posit ions a block of t ext t o t he left , right , or cent er of t he page or cont ainer elem ent . ● ●

Va lu e s: left , cent er, right , j ust ify ( t he j ust ify opt ion oft en m akes t ext difficult t o read on m onit ors) . Ex a m ple : text-align: center;

A.2.11. text-decoration Adds lines above, under, and/ or t hrough t ext . Underlining is com m on wit h links, so it 's usually a good idea not t o underline t ext t hat isn't a link. The color of t he underline, overline, or st rike- t hrough line is t he sam e as t he font color of t he t ag being st yled. The propert y also support s a blink value t hat m akes t ext flash off and on obnoxiously. ●

●

Va lu e s: underline, overline, line- t hrough, blink, none. The none value t urns off all decorat ion. Use t his t o hide t he underline t hat norm ally appears under links. You can also add m ult iple decorat ions by list ing t he nam e of each t ype ( except none) separat ed by a space. Ex a m ple : text-decoration: underline overline line-through;

A.2.12. text-indent (inherited) Set s t he indent size of t he first line of a block of t ext . The first line can be indent ed ( as in m any print ed books) or out dent ed, so t hat t he first line hangs off and over t he left edge of t he rest of t he t ext . ●

Va lu e s: Any valid CSS m easurem ent unit . Em s and pixels are m ost com m on; percent ages behave different ly t han wit h t he font - size propert y. Here, percent ages are based on t he widt h of t he box cont aining t he t ext , which can be t he widt h of t he ent ire browser window. So 50% would indent t he first line half of t he way across t he window ( see Sect ion 7.5.1 for a det ailed explanat ion) . To out dent ( hang t he first line off t he left edge) , use a negat ive value. This t echnique works well in conj unct ion wit h a posit ive left - m argin propert y ( Sect ion A.1.1) , which indent s t he left side of t he ot her lines of t ext a set am ount .

Section A.2. Text Properties ●

Ex a m ple : text-indent: 3em;

A.2.13. text-transform (inherited) Changes t he capit alizat ion of t ext , so t ext appears in all uppercase let t ers, all lowercase, or only t he first let t er of each word capit alized. ●

●

Va lu e s: uppercase, lowercase, capit alize, none. The none opt ion ret urns t he t ext t o what ever case is in t he act ual HTML code. I f aBCDefg are t he act ual let t ers t yped in HTML, t hen none rem oves any ot her inherit ed case set by an ancest or t ag and displays aBCDefg onscreen. Ex a m ple : text-transform: uppercase;

A.2.14. vertical-align Set s t he baseline of an inline elem ent relat ive t o t he baseline of t he surrounding cont ent s. Wit h it , you can m ake a charact er appear slight ly above or below surrounding t ext . Use t his t o creat e superscript charact ers like ™, ® , or © . When applied t o a t able cell, t he values t op, m iddle, bot t om , and baseline cont rol t he vert ical placem ent of cont ent inside t he cell ( Sect ion 10.2.1) . ●

●

Va lu e s: baseline, sub, super, t op, t ext - t op, m iddle, bot t om , t ext - bot t om , a percent age value, or an absolut e value ( like pixels or em s) . Percent ages are calculat ed based on t he elem ent 's line- height value ( Sect ion A.1.1) . Ex a m ple s: vertical-align: top; vertical-align: -5px; vertical-align: 75%;

A.2.15. white-space Cont rols how t he browser displays space charact ers in t he HTML code. Norm ally, if you include m ore t han one space bet ween words" Hello Dave" a Web browser displays only one space" Hello Dave." You can preserve any whit e space exact ly as is in t he HTML using t he pre value, which does t he sam e as t he HTML < pre> t ag. I n addit ion, Web browsers will split a line of t ext at a space, if t he line won't fit wit hin t he window's widt h. To prevent t ext from wrapping, use t he nowrap value. But t he nowrap value m akes all of t he paragraph's t ext st ay on one line, so don't use it wit h long paragraphs ( unless you like t he idea of m aking your visit ors scroll endlessly t o t he right ) . ● ●

Va lu e s: nowrap, pre, norm al. Two ot her valuespre- line and pre- wrapdon't work in m any browsers. Ex a m ple : white-space: pre;

A.2.16. word-spacing (inherited) Works like t he let t er- spacing propert y ( Sect ion A.1.1) , but inst ead of let t ers, it adj ust s space bet ween words. ●

●

Va lu e s: Any valid CSS m easurem ent unit , t hough em s and pixels are m ost com m on; percent ages don't work in m ost browsers. Use a posit ive value t o increase t he space bet ween words and a negat ive value t o rem ove space ( scrunch words t oget her) . The value norm al reset s word spacing t o it s regular browser value of 0. Ex a m ple s: word-spacing: -1px; word-spacing: 2em;

Section A.2. Text Properties

Section A.3. List Properties

A.3. List Properties The following propert ies affect t he form at t ing of bullet ed list s ( < ul> ) and num bered list s ( < ol> ) .

A.3.1. list-style (inherited) This propert y is a short hand m et hod of specifying t he t hree propert ies list ed next . You can include a value for one or m ore of t hose propert ies, separat ing each by a space. You can even use t his propert y as a short cut for writ ing a single propert y and save a couple of keyst rokes: list - st yle: out side, inst ead of list st yle- posit ion: out side. I f you specify bot h a t ype and an im age, a Web browser will display t he bullet t ype ( disc, square, and so on) only if it can't find t he im age. This way, if t he pat h t o your cust om bullet im age doesn't work, you don't end up wit h a bullet less bullet ed list . ● ●

Va lu e s: Any valid value for list - st yle- t ype, list - st yle- im age, and/ or list - st yle- posit ion. Ex a m ple : list-style: disc url(images/bullet.gif) inside;

A.3.2. list-style-image (inherited) Specifies an im age t o use for a bullet in a bullet ed list . ● ●

Va lu e s: an URL value ( Sect ion A.1.1) or none. Ex a m ple : list-style-image: url(images/bullet.gif) ;

Tip: The background-image property does the custom bullet job just as well and offers more control (see Section 8.2).

A.3.3. list-style-position (inherited) Posit ions t he bullet s or num bers in a list . These m arkers can appear out side of t he t ext , hanging off t o t he left , or inside t he t ext ( exact ly where t he first let t er of t he first line norm ally begins) . The out side posit ion is how Web browsers norm ally display bullet s and num bers. ● ●

Va lu e s: inside, out side Ex a m ple : list-style: inside;

A.3.4. list-style-type (inherited) Set s t he t ype of bullet for a list round, square, rom an num eral, and so on. You can t heoret ically t urn an unordered ( bullet ed) list int o an ordered ( num bered) list by changing t he list - st yle- t ype propert y, but it doesn't work in all browsers ( including I nt ernet Explorer for Windows) . Use t he none opt ion t o com plet ely rem ove bullet s or num bers from t he list . ●

Va lu e s: disc, circle, square, decim al, decim al- leading- zero, upper- alpha, lower- alpha, upper- rom an,

Section A.3. List Properties

●

lower- rom an, lower- greek, none Ex a m ple : list-style-type: square;

Section A.4. Padding, Borders, and Margins

A.4. Padding, Borders, and Margins The following propert ies cont rol t he space around an elem ent , and let you add border lines t o a st yle.

A.4.1. border Draws a line around t he four edges of an elem ent . ●

Va lu e s: The widt h ( t hickness) of t he border line in any valid CSS m easurem ent unit ( except percent ages) . You can also specify a st yle for t he line: solid, dot t ed, dashed, double, groove, ridge, inset , out set , none, and hidden. ( See Figure 7- 7 in Sect ion 7.3 for an illust rat ion of t he different st yles.) The none and hidden values do t he sam e t hingrem ove any border.

●

Finally, you can specify a color using any valid CSS color t ype ( a keyword like green or a hex num ber like # 33fc44) . Ex a m ple : border: 2px solid #f33;

A.4.2. border-top, border-right, border-bottom, border-left Adds a border t o a single edge. For exam ple, border- t op adds a border t o t he t op of t he elem ent . ● ●

Va lu e s: sam e as for border. Ex a m ple : border-left: 1em dashed red;

A.4.3. border-color Defines t he color used for all four borders. ● ●

Va lu e s: Any valid CSS color t ype ( a keyword like green or a hex num ber like # 33fc44) . Ex a m ple : border-color: rgb(255,34,100) ;

A.4.4. border-top-color, border-right-color, border-bottom-color, border-left-color Funct ions j ust like t he border- color propert y but set s color for only one edge. Use t hese propert ies t o override t he color set by t he border propert y. I n t his way, you can cust om ize t he color for an individual edge while using a m ore generic border st yle t o define t he basic size and st yle of all four edges. ● ●

Va lu e s: see border- color above. Ex a m ple : border-left-color: #333;

A.4.5. border-style

Section A.4. Padding, Borders, and Margins

Defines t he st yle used for all four borders. ●

●

Va lu e s: One of t hese key words: solid, dot t ed, dashed, double, groove, ridge, inset , out set , none, and hidden. See Figure 7- 7 in Sect ion 7.3 for an illust rat ion of t he different st yles. The none and hidden values act ident icallyt hey rem ove any border. Ex a m ple : border-style: inset;

A.4.6. border-top-style, border-right-style, border-bottom-style, border-left-style Funct ions j ust like t he border- st yle propert y, but applies only t o one edge. ● ●

Va lu e s: see border- st yle above. Ex a m ple : border-top-style: none;

A.4.7. border-width Defines t he widt h or t hickness of t he line used t o draw all four borders. ●

●

Va lu e s: Any valid CSS m easurem ent unit except percent ages. The m ost com m on are em s and pixels. Ex a m ple : border-width: 1px;

A.4.8. border-top-width, border-right-width, border-bottom-width, border-left-width Funct ions j ust like t he border- widt h propert y but applies only t o one edge. ● ●

Va lu e s: see border- widt h above. Ex a m ple : border-bottom-width: 3em;

A.4.9. outline This propert y is a short hand way t o com bine out line- color, out line- st yle, and out - line- widt h ( list ed next ) . An out line works j ust like a border, except t he out line t akes up no space ( t hat is, it doesn't add t o t he widt h or height of an elem ent ) , and it applies t o all four edges. I t 's int ended m ore as a way of highlight ing som et hing on a page t han as a design det ail. Out line works in Firefox, Safari, and Opera, but not in I nt ernet Explorer. ● ●

Va lu e s: The sam e as for border wit h one except ionsee out line- color next . Ex a m ple : outline: 3px solid #F33;

A.4.10. outline-color Specifies t he color for an out line ( see out line above) . ●

Va lu e s: Any valid CSS color, plus t he value invert , which m erely reverses t he color t he out line is

Section A.4. Padding, Borders, and Margins

●

sit t ing on. I f t he out line is drawn on a whit e background, t he invert value m akes t he out line black. Works j ust like border- color ( Sect ion A.1.1) . Ex a m ple : outline-color: invert;

A.4.11. outline-style Specifies t he t ype of line for t he out line dot t ed, solid, dashed, and so on. ● ●

Va lu e s: Sam e as border- st yle ( Sect ion A.1.1) . Ex a m ple : outline-style: dashed;

A.4.12. outline-width Specifies t he t hickness of t he out line. Works j ust like border- widt h ( Sect ion A.1.1) . ●

●

Va lu e s: Any valid CSS m easurem ent unit except percent ages. The m ost com m on are em s and pixels. Ex a m ple : outline-width: 3px;

A.4.13. padding Set s t he am ount of space bet ween t he cont ent and border and edge of t he background. Use it t o add em pt y space around t ext , im ages, or ot her cont ent . ( See Figure 7- 1 in Sect ion 7.2 for an illust rat ion.) ●

●

Va lu e s: Any valid CSS m easurem ent unit , like pixels or em s. Percent age values are based on t he widt h of t he cont aining elem ent . A headline t hat 's a child of t he < body> t ag uses t he widt h of t he browser window t o calculat e a percent age value, so a padding of 20 percent adds 20 percent of t he window's widt h. I f t he visit or resizes his browser, t he padding size changes proport ionat ely. You can specify t he padding for all four edges by using a single value, or set individual padding sizes per edge using t his order: t op, right , bot t om , left . Exam ples: padding: 20px; padding: 2em 3em 2.5em 0;

A.4.14. padding-top Works j ust like t he padding propert y, but set s padding for t op edge only. ●

Ex a m ple : padding-top: 20px;

A.4.15. padding-right Works j ust like t he padding propert y, but set s padding for right edge only. ●

Ex a m ple : padding-right: 20px;

A.4.16. padding-bottom

Section A.4. Padding, Borders, and Margins

Works j ust like t he padding propert y, but set s padding for bot t om edge only. ●

Ex a m ple : padding-bottom: 20px;

A.4.17. padding-left Works j ust like t he padding propert y, but set s padding for left edge only. ●

Ex a m ple : padding-left: 20px;

A.4.18. margin Set s t he am ount of space bet ween an elem ent 's border and t he m argin of ot her elem ent s ( see Figure 7- 1 in Sect ion 7.2) . I t let s you add whit e space bet ween t wo elem ent sbet ween one pict ure and anot her pict ure, or bet ween a sidebar and t he m ain cont ent area of a page.

Note: Vertical margins between elements can collapse. That is, browsers use only the top or bottom margin and ignore the other, creating a smaller gap than expected (see Section 7.2.2).

●

●

Va lu e s: Any valid CSS m easurem ent unit like pixels or em s. Percent age values are based on t he widt h of t he cont aining elem ent . A headline t hat 's a child of t he body t ag uses t he widt h of t he browser window t o calculat e a percent age value, so a m argin of 10 percent adds 10 percent of t he window's widt h t o t he edges of t he headline. I f t he visit or resizes his browser, t he m argin size changes. As wit h padding, you specify t he m argin for all four edges using a single value, or set individual m argins in t his order: t op, right , bot t om , left . Ex a m ple s: margin: 20px; margin: 2em 3em 2.5em 0;

A.4.19. margin-top Works j ust like t he m argin propert y, but set s m argin for t op edge only. ●

Ex a m ple : margin-top: 20px;

A.4.20. margin-right Works j ust like t he m argin propert y, but set s m argin for right edge only. ●

Ex a m ple : margin-right: 20px;

A.4.21. margin-bottom Works j ust like t he m argin propert y, but set s m argin for bot t om edge only.

Section A.4. Padding, Borders, and Margins

●

Ex a m ple : margin-bottom: 20px;

A.4.22. margin-left Works j ust like t he m argin propert y, but set s m argin for left edge only. ●

Ex a m ple : margin-left: 20px;

Section A.5. Backgrounds

A.5. Backgrounds CSS provides several propert ies for cont rolling t he background of an elem ent , including coloring t he background, placing an im age behind an elem ent , and cont rolling how t hat background im age is posit ioned.

A.5.1. background Provides a short hand m et hod of specifying propert ies t hat appear in t he background of an elem ent , like a color, an im age, and t he placem ent of t hat im age. I t com bines t he five background propert ies ( described next ) int o one com pact line, so you can get t he sam e effect wit h m uch less t yping. However, if you don't set one of t he propert ies, browsers use t hat propert y's norm al value inst ead. For exam ple, if you don't specify how a background im age should repeat , browsers will t ile t hat im age from left t o right and t op t o bot t om ( see Sect ion 8.3) . ●

●

Va lu e s: The sam e values used for t he background propert ies list ed next . The order of t he propert ies isn't im port ant ( except for posit ioning as described below) but usually follow t he order of background- color, background- im age, background- repeat , background- at t achm ent , backgroundposit ion. Ex a m ple : background: #333 url(images/logo.gif) no-repeat fixed left top;

A.5.2. background-attachment Specifies how a background im age react s when your visit or scrolls t he page. The im age eit her scrolls along wit h t he rest of t he cont ent or rem ains in place. You can add a logo t o t he upper- left corner of a very long Web page, using t he background- at t achm ent propert y's fixed value, and m ake t hat im age st ay in t he upperleft corner even when t he page is scrolled. ( I n I nt ernet Explorer 6 and earlier, t his propert y works only for t he < body> t ag.) ●

●

Va lu e s: scroll or fixed. Scroll is t he norm al behavior: An im age will scroll off t he screen along wit h t ext . Fixed locks t he im age in place. Ex a m ple : background-attachment: fixed;

A.5.3. background-color Adds a color t o t he background of a st yle. The background sit s underneat h t he border and underneat h a background im age, a fact t o keep in m ind if you use one of t he non- solid border st yles like dashed or dot t ed. I n t hese cases, t he background color shows t hrough t he gaps bet ween t he dashes or dot s. ● ●

Va lu e s: any valid color value ( Sect ion A.1) . Ex a m ple : background-color: #FFF;

A.5.4. background-image Places an im age int o t he background of a st yle. Ot her page elem ent s sit on t op of t he background im age, so m ake sure t hat t ext is legible where it overlaps t he im age. You can always use padding t o m ove cont ent away from t he im age, t oo. The im age t iles from left t o right and t op t o bot t om , unless you set t he

Section A.5. Backgrounds

background- repeat propert y as well. ● ●

Va lu e s: The URL of an im age. Ex a m ple s: background-image: url(images/photo.jpg); background-image: url(http://www.example. org/photo.jpg) ;

A.5.5. background-position Cont rols t he placem ent of an im age in t he background of a page elem ent . Unless you specify ot herwise, an im age begins in t he elem ent 's t op- left corner. I f t he im age t iles, background- posit ion cont rols t he im age's st art point ( see background- repeat next ) . I f you posit ion an im age in t he cent er of an elem ent , t he browser put s t he im age t here, and t hen t iles t he im age up and t o t he left and down and t o t he right . I n m any cases, t he exact placem ent of an im age doesn't cause a visible difference in t he background t iling, but it let s you m ake subt le changes t o t he posit ioning of a pat t ern in t he background. ●

●

Va lu e s: You can use any valid CSS m easurem ent unit like pixels or em s, as well as keywords or percent ages. The values com e in pairs, wit h t he first being t he horizont al posit ion, and t he second being vert ical. Keywords include left , cent er, and right for horizont al posit ioning and t op, cent er, and bot t om for vert ical. Pixel and em values are calculat ed from t he t op- left corner of t he elem ent , so t o place a graphic 5 pixels from t he left edge and 10 pixels from t he t op, you'd use a value of 5px 10px. Percent age values m ap one point on t he im age t o one point in t he background of t he elem ent , calculat ed by t he specified percent age from t he left and t op edges of t he im age and t he specified percent age from t he left and t op edges of t he elem ent . 50% 50% places t he point t hat 's 50 percent across and 50 percent down t he im age on t op of t he point t hat 's 50 percent across and 50 percent down t he elem ent . I n ot her words, it put s t he im age direct ly in t he m iddle of t he elem ent ( see Sect ion 8.4.3) . You can m ix and m at ch t hese Values: I f you want , use a pixel value for horizont al placem ent and a percent age value for vert ical placem ent . Ex a m ple s: background-position: left top; background-position: 1em 3em; background-position: 10px 50%;

A.5.6. background-repeat Cont rols whet her, or how, a background im age repeat s. Norm ally, background im ages t ile from t he t op left t o t he bot t om right , filling t he elem ent 's ent ire background. ●

●

Va lu e s: repeat , no- repeat , repeat - x, repeat - y. The repeat opt ion is t he norm al m et hodt iling left t o right , t op t o bot t om . No- repeat places t he im age a single t im e in t he background wit h no t iling. Repeat - x t iles t he im age t op t o bot t om onlyperfect for adding a graphical sidebar. Repeat - y t iles t he im age from left t o right only, so you can add a graphical bar t o an elem ent 's t op, m iddle, or bot t om . Ex a m ple : background-repeat: no-repeat;

Section A.6. Page Layout Properties

A.6. Page Layout Properties The following propert ies cont rol t he placem ent and size of elem ent s on a Web page.

A.6.1. bottom This propert y is used wit h absolut e, relat ive, and fixed posit ioning ( see Sect ion A.1.1) . When used wit h absolut e or fixed posit ioning, bot t om det erm ines t he posit ion of t he bot t om edge of t he st yle relat ive t o t he bot t om edge of it s closest posit ioned ancest or. I f t he st yled elem ent isn't inside of any posit ioned t ags, t hen t he placem ent is relat ive t o t he bot t om edge of t he browser window. You can use t his propert y t o place a foot not e at t he bot t om of t he browser window. When used wit h relat ive posit ioning, t he placem ent is calculat ed from t he elem ent 's bot t om edge ( prior t o posit ioning) . See Sect ion 12.1.2. ●

●

Va lu e s: Any valid CSS m easurem ent unit , like pixels, em s, or percent ages. Percent ages are calculat ed based on t he widt h of t he cont aining elem ent . Ex a m ple : bottom: 5em;

Note: Internet Explorer 6 and earlier can have a problem when positioning an element using the bottom property. See Section 12.1.4 for details.

A.6.2. clear Prevent s an elem ent from wrapping around a float ed elem ent . I nst ead, t he cleared elem ent drops below t he bot t om of t he float ed elem ent . ●

●

Va lu e s: left , right , bot h, none. The left opt ion m eans t he elem ent can't wrap around left - float ed elem ent s. Sim ilarly, right drops t he elem ent below any right - float ed it em s. The bot h value prevent s an elem ent from wrapping around eit her left - or right - float ed elem ent s. None t urns t he propert y off, so you use it t o override a previously set clear propert y. This t rick com es in handy when a part icular t ag has a st yle t hat drops below a float ed elem ent but you want t he t ag t o wrap in j ust one case. Creat e a m ore specific st yle ( Sect ion 5.3) t o override t he float for t hat one t ag. Ex a m ple : clear: both;

A.6.3. clip Creat es a rect angular window t hat reveals part of an elem ent . I f you had a pict ure of your high- school graduat ing class, and t he class bully was st anding on t he far right edge of t he phot o, you could creat e a display area t hat crops out t he im age of your t orm ent or. The full im age is st ill int act , but t he clipping area only displays t he bully free port ion of it . The clip propert y is m ost effect ive when used wit h JavaScript program m ing t o anim at e t he clip. You can st art wit h a sm all clipping area and expand it unt il t he full phot o is revealed. ●

Va lu e s: Coordinat es of a rect angular box. Enclose t he coordinat es in parent heses and precede

Section A.6. Page Layout Properties

t hem by t he keyword rect , like so: rect ( 5px,110px,40px,10px) ; .

●

Here's how t he order of t hese coordinat es works: The first num ber indicat es t he t op offset t he t op edge of t he clipping window. I n t his exam ple, t he offset is 5px, so everyt hing in t he first four rows of pixels is hidden. The last num ber is t he left offset t he left edge of t he clipping window. I n t his exam ple, t he offset is 10px, so everyt hing t o t he left ( t he first 9 pixels of t he elem ent ) is hidden. The second num ber is t he widt h of t he clipping window plus t he last num ber; if t he left edge of t he clip is 10 pixels and you want t he visible area t o be 100 pixels, t he second num ber would be 110px. The t hird num ber is t he height of t he clipping region plus t he t op offset ( t he first num ber) . So, in t his exam ple, t he clipping box is 30 pixels t all ( 30px + 10px = 40px) . Ex a m ple : clip: rect(5px,110px,40px,10px) ;

Tip: Since the order of the coordinates is a little strange, most designers like to start with the first and last numbers, and then compute the two other numbers from them.

A.6.4. display Det erm ines t he kind of box used t o display a page elem ent block- level or inline ( Sect ion 7.2.4) . Use it t o override how a browser usually displays a part icular elem ent . You can m ake a paragraph ( block- level elem ent ) display wit hout line breaks above and below it exact ly like, say, a link ( inline elem ent ) . ●

●

Va lu e s: block, inline, none. The display propert y accept s 17 values, m ost of which have no effect in t he browsers available t oday. Block, inline, and none, however, work in alm ost all browsers. Block forces a line break above and below an elem ent , j ust like ot her block- level elem ent s ( like paragraphs and headers) . I nline causes an elem ent t o display on t he sam e line as surrounding elem ent s ( j ust as t ext wit hin a < st rong> t ag appears right on t he sam e line as ot her t ext ) . None m akes t he elem ent com plet ely disappear from t he page. Then, you can m ake t he elem ent reappear wit h som e JavaScript program m ing or t he : hover pseudo- class ( see Sect ion 3.1) . Ex a m ple : display: block;

A.6.5. float Moves ( float s) an elem ent t o t he left or right edge of t he browser window, or, if t he float ed elem ent 's inside anot her elem ent , t o t he left or right edge of t hat cont aining elem ent . Elem ent s t hat appear aft er t he float ed elem ent m ove up t o fill t he space t o t he right ( for left float s) or left ( for right float s) , and t hen wrap around t he float ed elem ent . Use float s for sim ple effect s, like m oving an im age t o one side of t he page, or for very com plex layout s like t hose described in Chapt er 11. ●

●

Va lu e s: left , right , none. None t urns off float ing ent irely, which com es in handy when a part icular t ag has a st yle wit h a left or right float applied t o it , and you want t o creat e a m ore specific st yle t o override t he float for t hat one t ag. Ex a m ple : float : left ;

A.6.6. height Set s t he height of t he cont ent areat he area of an elem ent 's box t hat cont ains cont ent like t ext , im ages, or ot her t ags. The elem ent 's act ual onscreen height is t he t ot al of height , t op and bot t om m argins, t op and

Section A.6. Page Layout Properties

bot t om padding, and t op and bot t om borders. ●

●

Va lu e s: Any valid CSS m easurem ent unit such as pixels, em s, or percent ages. Percent ages are calculat ed based on t he height of t he cont aining elem ent . Ex a m ple : height: 50%;

Note: Sometimes, your content ends up taller than the set heightif you type a lot of text, for instance, or your visitor increases text size in her browser. Browsers handle this situation differently: IE 6 and earlier simply make the box bigger, while other browsers make the content extend outside of the box. The overflow property controls what happens in this case (see Section 7.5.2).

A.6.7. left When used wit h absolut e or fixed posit ioning ( Sect ion 12.1) , t his propert y det erm ines t he posit ion of t he left edge of t he st yle relat ive t o t he left edge of it s closest posit ioned ancest or. I f t he st yled elem ent isn't inside of any posit ioned t ags, t hen t he placem ent is relat ive t o t he left edge of t he browser window. You can use t his propert y t o place an im age 20 pixels from t he left edge of t he browser window. When used wit h relat ive posit ioning, t he placem ent is calculat ed from t he elem ent 's left edge ( prior t o posit ioning) . ● ●

Va lu e s: Any valid CSS m easurem ent unit such as pixels, em s, or percent ages. Ex a m ple : left: 5em;

A.6.8. max-height Set s t he m axim um height for an elem ent . That is, t he elem ent 's box m ay be short er t han t his set t ing, but it can't be any t aller. I f t he elem ent 's cont ent s are t aller t han t he m ax- height set t ing, t hey overflow t he box. You can cont rol what happens t o t he excess using t he overflow propert y ( Sect ion 7.5.2) . I nt ernet Explorer 6 ( and earlier) doesn't underst and t he m ax- height propert y. ●

●

Va lu e s: Any valid CSS m easurem ent unit , like pixels, em s, or percent ages. Browsers calculat e percent ages based on t he height of t he cont aining elem ent . Ex a m ple : max-height: 100px;

A.6.9. max-width Set s t he m axim um widt h for an elem ent . The elem ent 's box can be narrower t han t his set t ing, but no wider. I f t he elem ent 's cont ent s are wider t han t he m ax- widt h set t ing, t hey overflow t he box, which you can cont rol wit h t he overflow propert y ( Sect ion 7.5.2) . You m ost ly use m ax- widt h in liquid layout s ( Sect ion 11.1) t o m ake sure a page design doesn't becom e unreadably wide on very large m onit ors. This propert y doesn't work in I nt ernet Explorer 6 ( or in earlier versions) . ●

●

Va lu e s: Any valid CSS m easurem ent unit , like pixels, em s, or percent ages. Percent ages are calculat ed based on t he widt h of t he cont aining elem ent . Ex a m ple : max-width: 950px;

Section A.6. Page Layout Properties

A.6.10. min-height Set s t he m inim um height for an elem ent . The elem ent 's box m ay be t aller t han t his set t ing, but it can't be short er. I f t he elem ent 's cont ent s aren't as t all as t he m in- height set t ing, t he box's height shrinks t o m eet t he m in- height value. I nt ernet Explorer 6 ( and earlier) doesn't recognize t his propert y. ●

●

Va lu e s: Any valid CSS m easurem ent unit , like pixels, em s, or percent ages. Percent ages are based on t he cont aining elem ent 's height . Ex a m ple : min-height: 20em;

A.6.11. min-width Set s t he m inim um widt h for an elem ent . The elem ent 's box m ay be wider t han t his set t ing, but it can't be narrower. I f t he elem ent 's cont ent s aren't as wide as t he m in- widt h value, t he box sim ply get s as t hin as t he m in- widt h set t ing. You can also use m in- widt h in liquid layout s, so t hat t he design doesn't disint egrat e at sm aller window widt hs. When t he browser window is t hinner t han m in- widt h, it adds horizont al scroll bars. I nt ernet Explorer 6 ( and earlier) doesn't underst and t his propert y. ●

●

Va lu e s: Any valid CSS m easurem ent unit , like pixels, em s, or percent ages. Percent ages are based on t he cont aining elem ent 's widt h. Ex a m ple : min-width: 760px;

Note: You usually use the max-width and min-width properties in conjunction when creating liquid layouts. See Chapter 11 (Section 11.4.3).

A.6.12. overflow Dict at es what should happen t o t ext t hat overflows it s cont ent area, like a phot o t hat 's wider t han t he value set for t he widt h propert y.

Note: IE 6 (and earlier) handles overflow situations differently than other browsers. See Section 7.5.2.

●

●

Va lu e s: visible, hidden, scroll, aut o. Visible m akes t he overflowing cont ent ext end out side t he boxpot ent ially overlapping borders and ot her page elem ent s on t he page. I E 6 ( and earlier) sim ply enlarges t he box ( borders and all) t o accom m odat e t he larger cont ent . Hidden hides any cont ent out side of t he cont ent area. Scroll adds scroll bars t o t he elem ent so a visit or can scroll t o read any cont ent out side t he cont ent areasort of like a m ini- fram e. Aut o adds scrollbars only when t hey're necessary t o reveal m ore cont ent . Ex a m ple : overflow: hidden;

A.6.13. position

Section A.6. Page Layout Properties

Det erm ines what t ype of posit ioning m et hod a browser uses when placing an elem ent on t he page. ●

●

Va lu e s: st a t ic, r e la t ive , a bsolu t e , fix e d. St at ic is t he norm al browser m odeone block- level it em st acked on t op of t he next wit h cont ent flowing from t he t op t o t he bot t om of t he screen. Relat ive posit ions an elem ent in relat ion t o where t he elem ent current ly appears on t he pagein ot her words, it can offset t he elem ent from it s current posit ion. Absolut e t akes an elem ent com plet ely out of t he page flow. Ot her it em s don't see t he absolut e elem ent and m ay appear underneat h it . I t 's used t o posit ion an elem ent in an exact place on t he page, or t o place an elem ent in an exact posit ion relat ive t o a parent elem ent t hat 's posit ioned wit h absolut e, relat ive or fixed posit ioning. Fixed locks an elem ent on t he page, so t hat when t he page is scrolled, t he fixed elem ent rem ains on t he screenm uch like HTML fram es. I nt ernet Explorer 6 ( and earlier) ignores t he fixed opt ion. Ex a m ple : position: absolute;

Note: You usually use relative, absolute, and fixed in conjunction with left, right, top, and bottom. See Chapter 12 for the full details on positioning.

A.6.14. right When used wit h absolut e or fixed posit ioning ( Sect ion 12.1) , t his propert y det erm ines t he posit ion of t he right edge of t he st yle relat ive t o t he right edge of it s closest posit ioned ancest or. I f t he st yled elem ent isn't inside of any posit ioned t ags, t hen t he placem ent is relat ive t o t he right edge of t he browser window. You can use t his propert y t o place a sidebar a set am ount from t he right edge of t he browser window. When used wit h relat ive posit ioning, t he placem ent is calculat ed from t he elem ent 's right edge ( prior t o posit ioning) . ● ●

Va lu e s: Any valid CSS m easurem ent unit , like pixels, em s, or percent ages. Ex a m ple : left: 5em;

Note: Internet Explorer 6 (and earlier) can have problems when positioning an element using the right property. See Section 12.1.4 for details.

A.6.15. top Does t he opposit e of t he bot t om propert y ( Sect ion A.1.1) . I n ot her words, when used wit h absolut e or fixed posit ioning, t his propert y det erm ines t he posit ion of t he t op edge of t he st yle relat ive t o t he t op edge of it s closest posit ioned ancest or. I f t he st yled elem ent isn't inside of any posit ioned t ags, t hen t he placem ent is relat ive t o t he t op edge of t he browser window. You can use t his propert y t o place a logo a set am ount from t he t op edge of t he browser window. When used wit h relat ive posit ioning, t he placem ent is calculat ed from t he elem ent 's t op edge ( prior t o posit ioning) . ● ●

Va lu e s: Any valid CSS m easurem ent unit , like pixels, em s, or percent ages. Ex a m ple : top: 5em;

Section A.6. Page Layout Properties

A.6.16. visibility Det erm ines whet her a Web browser displays t he elem ent . Use t his propert y t o hide part of t he cont ent of t he page, such as a paragraph, headline, or < div> t ag. Unlike t he display propert y's none valuewhich hides an elem ent and rem oves it from t he flow of t he paget he visibilit y propert y's hidden opt ion doesn't rem ove t he elem ent from t he page flow. I nst ead, it j ust leaves an em pt y hole where t he elem ent would have been. For t his reason, you m ost oft en use t he visibilit y propert y wit h absolut ely posit ioned elem ent s, which have already been rem oved from t he flow of t he page. Hiding an elem ent doesn't do you m uch good unless you can show it again. JavaScript program m ing is t he m ost com m on way t o t oggle t he visibilit y propert y t o show and hide it em s on a page. You can also use t he : hover pseudo- class ( Sect ion 9.1) t o change an elem ent 's visibilit y propert y when a visit or hovers over som e part of t he page. ● ●

Va lu e s: visible, hidden. You can use t he collapse value t o hide a row or colum n in a t able as well. Ex a m ple : visibility: hidden;

A.6.17. width Set s t he widt h of t he cont ent area ( t he area of an elem ent 's box t hat cont ains t ext , im ages, or ot her t ags) . The am ount of onscreen space act ually dedicat ed t o t he elem ent m ay be m uch wider, since it includes t he widt h of t he left and right m argin, left and right padding, and left and right borders. I E 6 ( and earlier) handles overflow sit uat ions different ly t han ot her browsers. ( See Sect ion 7.5.2.) ●

●

Va lu e s: Any valid CSS m easurem ent unit , like pixels, em s, or percent ages. Percent ages are based on t he cont aining elem ent 's widt h. Ex a m ple : width: 250px;

A.6.18. z-index Cont rols t he layering of posit ioned elem ent s. Only applies t o elem ent s wit h a posit ion propert y set t o absolut e, relat ive, or fixed ( Sect ion 12.1) . I t det erm ines where on t he Z- axis an elem ent appears. I f t wo absolut ely posit ioned elem ent s overlap, t he one wit h t he higher z- index appears t o be on t op. ●

●

Va lu e s: An int eger value, like 1, 2, or 10. You can also use negat ive values, but different browsers handle t hem different ly. The larger t he num ber, t he m ore " on t op" t he elem ent appears. An elem ent wit h a z- index of 20 appears below an elem ent wit h a z- index of 100 ( if t he t wo overlap) . However, when t he elem ent is inside anot her posit ioned elem ent , it 's " posit ioning cont ext " changes and it m ay not appear above anot her elem ent no m at t er what it s z- index value. See Figure 12- 6. Ex a m ple : z-index: 12;

Tip: The values don't need be in exact integer order. If element A has a z-index of 1, you don't have to set element B's zindex to 2 to put it on top. You can use 5, 10, and so on to get the same effect, as long as it's a bigger number. So, to make sure an element always appears above other elements, simply give it a very large value, like 10000.

Section A.6. Page Layout Properties

Section A.7. Table Properties

A.7. Table Properties There are a handful of CSS propert ies t hat relat e solely t o HTML t ables. Chapt er 10 has com plet e inst ruct ions on using CSS wit h t ables.

A.7.1. border-collapse Det erm ines whet her t he borders around t he cells of a t able are separat ed or collapsed. When t hey're separat ed, browsers put a space of a couple of pixels bet ween each cell. Even if you elim inat e t his space by set t ing t he cellspacing at t ribut e for t he HTML < t able> t ag t o 0, browsers st ill display double borders. That is, t he bot t om - border of one cell will appear above t he t op border of t he cell below causing a doubling of border lines. Set t ing t he border- collapse propert y t o collapse elim inat es bot h t he space bet ween cells and t his doubling up of borderlines ( Sect ion 10.2.1) . This propert y works only when applied t o a < t able> t ag. ● ●

Va lu e s: collapse, separat e Ex a m ple : border-collapse: collapse;

A.7.2. border-spacing Set s t he am ount of space bet ween cells in a t able. I t replaces t he < t able> t ag's cell- spacing HTML at t ribut e. However, I nt ernet Explorer doesn't underst and t he border- spacing propert y, so it 's best t o cont inue t o use t he cellspacing at t ribut e in your < t able> t ags t o guarant ee space bet ween cells in all browsers.

Note: If you want to eliminate the space browsers normally insert between cells, just set the border-collapse property to collapse.

●

●

Va lu e s: Two CSS lengt h values. The first set s t he horizont al separat ion ( t he space on eit her side of each cell) and t he second set s t he vert ical separat ion ( t he space separat ing t he bot t om of one cell from t he t op of t he one below it ) . Ex a m ple : border-spacing: 0 10px;

A.7.3. caption-side When applied t o a t able capt ion, t his propert y det erm ines whet her t he capt ion appears at t he t op or bot t om of t he t able. ( Since, according t o HTML rules, t he < capt ion> t ag m ust im m ediat ely follow t he opening < t able> t ag, a capt ion would norm ally appear at t he t op of t he t able.) ● ●

Va lu e s: t op, bot t om Ex a m ple : caption-side: bottom;

Note: Unfortunately, this property has no effect in any versions of Internet Explorer (as of this writing), so it's safest to

Section A.7. Table Properties

stick with the HTML equivalent: or .

A.7.4. empty-cells Det erm ines how a browser should display a t able cell t hat 's com plet ely em pt y, which in HTML would look like t his: < t d> < / t d> . The hide value prevent s any part of t he cell from being displayed. I nst ead, only an em pt y placeholder appears, so borders, background colors, and background im ages don't show up in an em pt ied cell. Apply t his propert y t o a st yle form at t ing t he < t able> t ag. ● ●

Va lu e s: show, hide Ex a m ple : empty-cells: show;

Note: The empty-cells property has no effect if the border-spacing property is set to collapse.

A.7.5. table-layout Cont rols how a Web browser draws a t able, and can slight ly affect t he speed at which t he browser displays it . The fixed set t ing forces t he browser t o render all colum ns t he sam e widt h as t he colum ns in t he first row, which ( for com plicat ed t echnical reasons) draws t ables fast er. The aut o value is t he norm al " browser j ust do your t hing" value, so if you're happy wit h how quickly your t ables appear on a page, don't bot her wit h t his propert y. I f you use it , apply t able- layout t o a st yle form at t ing t he < t able> t ag. ● ●

Va lu e s: aut o, fixed Ex a m ple : table-layout: fixed;

Section A.8. Miscellaneous Properties

A.8. Miscellaneous Properties CSS 2.1 offers a few addit ionaland som et im es int erest ing propert ies. They let you enhance your Web pages wit h special cont ent and cursors, offer m ore cont rol over how a page print s, and so on. ( Unfort unat ely, browser underst anding of t hese propert ies is spot t y at best .)

A.8.1. content Specifies t ext t hat appears eit her before or aft er an elem ent . Use t his propert y wit h t he : aft er or : before pseudo- elem ent s. You can add an opening quot at ion m ark in front of quot ed m at erial and a closing quot at ion aft er t he quot e. This propert y isn't support ed by I nt ernet Explorer ( not even I E 7 as of t his writ ing) , so it s use is lim it ed. ●

●

Va lu e s: Text inside of quot es " like t his" , t he keywords norm al, open- quot e, close- quot e, no- openquot e, no- close- quot e. You can also use t he value of an HTML at t ribut e. ( See " Revealing Links in Print " in Sect ion 13.3.4 for an exam ple.) Ex a m ple s: p.advert:before { content: "And now a word from our sponsor…"; } a:after { content: " (" attr(href) ") "; }

Note: Adding text in this way (like the opening and closing quote example) is called generated content. Read a simple explanation of the generated content phenomenon at www.westciv.com/style_master/academy/css_tutorial/advanced/ generated_content.html. For a deeper explanation, visit www.w3.org/TR/CSS21/generate.html.

A.8.2. cursor Let s you change t he look of t he m ouse point er when it m oves over a part icular elem ent . You can m ake a quest ion m ark appear next t o t he cursor when som eone m ouses over a link t hat provides m ore inform at ion on a subj ect ( like a word definit ion) . ●

●

Va lu e s: a u t o, de fa u lt , cr ossh a ir , poin t e r , m ove , e - r e size , n e - r e size , n w - r e size , n - r e size , se r e size , sw - r e size , s- r e size , w - r e size , t e x t , w a it , h e lp, pr ogr e ss. You can also use an URL value t o use your own graphic as a cursor ( but see t he Not e below) . Ex a m ple : cursor: help; cursor: url(images/cursor.cur) ;

Note: Only Internet Explorer and Firefox recognize URL cursor values, and only in Windows. For more information, visit www.echoecho.com/csscursors.htm and www.quirksmode.org/css/cursor.html.

A.8.3. orphans

Section A.8. Miscellaneous Properties

Specifies t he m inim um num ber of lines of t ext t hat can be left at t he bot t om of a print ed page. Suppose you're print ing your Web page on a laser print er, and a fiveline paragraph is split bet ween t wo pages, wit h j ust one line at t he bot t om of page one, and t he four rem aining lines at t he t op of page t wo. Because a single line all by it self looks odd ( sort of like a lost orphanget it ?) , you can t ell t he browser t o break a paragraph only if at least , say, t hree lines are left on t he bot t om of t he page. ( At t his writ ing, only t he Opera browser underst ands t his propert y.) ● ●

Va lu e s: a num ber like 1, 2, 3, or 5. Ex a m ple : orphans: 3;

A.8.4. page-break-after Det erm ines whet her a page break ( in print ing) occurs aft er a part icular elem ent . Wit h it , you can m ake sure t hat a part icular paragraph is always t he last it em t o appear on a print ed page. ●

●

Va lu e s: aut o, always, avoid, left , right . Aut o represent s t he norm al value and let s t he browser det erm ine when and how t o break cont ent across print ed pages. Always forces t he elem ent t hat follows t o appear at t he t op of a separat e print ed page, and it 's t he only value t hat works consist ent ly across browsers. Avoid prevent s a page break aft er an elem ent ; it 's a great way t o keep a headline wit h t he paragraph t hat follows it , but unfort unat ely, m ost browsers don't underst and it . Left and right det erm ine whet her t he elem ent following appears on a left - or right handed page, which m ay force t he browser t o print an ext ra em pt y page. But since no browsers underst and t hese values, don't worry about wast ing paper. Browsers t reat left and right t he sam e as always. Ex a m ple : page-break-after: always;

A.8.5. page-break-before Works like page- break- aft er, except t he page break appears before t he st yled elem ent , placing it at t he t op of t he next print ed page. You can use t his propert y t o m ake sure headlines for different sect ions of a long Web page each appear at t he t op of a page. ● ●

Va lu e s: sam e as page- break- aft er. Ex a m ple : page-break-before: always;

A.8.6. page-break-inside Prevent s an elem ent from being split across t wo print ed pages. I f you want t o keep a phot o and it s capt ion t oget her on a single page, wrap t he phot o and capt ion t ext in a < div> t ag, and t hen apply a st yle wit h page- break- inside t o t hat < div> . ( At t his writ ing, only Opera underst ands t his propert y.) ● ●

Va lu e s: avoid Ex a m ple : page-break-inside: avoid;

A.8.7. widows The opposit e of orphans ( Sect ion A.1.1) , it specifies t he m inim um num ber of lines t hat m ust appear at t he t op of a print ed page. Say t he print er can m anage t o fit four out of five lines of a paragraph at t he bot t om

Section A.8. Miscellaneous Properties

of a page and has t o m ove t he last line t o t he t op of t he next page. Since t hat line m ight look weird all by it self, use widows t o m ake t he browser m ove at least t wo or t hree ( or what ever num ber of) lines t oget her t o t he t op of a print ed page. ( Only Opera underst ands t his propert y, so it 's of lim it ed use.) Va lu e s: a num ber like 1, 2, 3 or 5. Ex a m ple : widows: 3;

Appendix B. CSS in Dreamweaver 8

Appendix B. CSS in Dreamweaver 8 Adobe's Dream weaver 8 is a Web sit e- building program t hat t akes t he drudgery out of creat ing HTML/ XHTML and CSS. I nst ead of t yping lines of code int o a t ext edit or, you can click convenient onscreen but t ons and m enus and wat ch your design unfold before your eyes. The program even has powerful sit em anagem ent t ools t hat help you keep t rack of your sit e's pages and links. Alt hough t his book gives you everyt hing you need t o know t o creat e your own CSS from scrat ch, t here's not hing wrong wit h t urning t o a visual edit or like Dream weaver t o save t im e. I n fact , knowing how CSS works, as t his book shows you, is a big help when t weaking or t roubleshoot ing pages creat ed in Dream weaver.

Note: This appendix focuses solely on Dreamweaver 8's CSS features. To learn everything Dreamweaver can do for your Web site design and maintenance, check out Dreamweaver 8: The Missing Manual.

Section B.1. Creating Styles

B.1. Creating Styles You begin m ost CSS- relat ed t asks in t he CSS St yles panel, which is Dream weaver's com m and cent er for CSS St yles ( or press Shift - F11) . creat ing st yles. To open it , choose Window Using Figure B- 1 as a guide, here's how t o find your way around t he CSS St yles panel: ●

The All but t on at t he t op of t he panel list s all int ernal and ext ernal st yles for t he current ly open docum ent . The ot her but t onCurrent let s you t ake a closer look at individual st yles ( Sect ion B.1.1) .

Tip: Clicking the minus (-) icon to the left of the style sheet collapses the list of styles, hiding them from view. (On a Mac, the button looks like a little triangle instead, but it does the same thing.) ●

●

●

An int ernal st yle sheet is indicat ed by < st yle> in t he panel. I n t his exam ple, t here's one t ag st yle ( for t he < body> t ag) . Ext ernal st yle sheet s are list ed by file nam e ( headlines.css) . The ext ernal st yle sheet 's rules are list ed below t he file nam e ( p, h1, .celebrit y, and so on) . The first t wo st yles are t ag st yles ( not ice t hat t he nam es m at ch various HTML t ags) , while t he last five are class st yles ( not e t he period at t he beginning of each nam e) . The Propert ies list in t he bot t om half of t he panel let s you edit a st yle as described in Sect ion B.1.1. The t hree but t ons at t he bot t om - left of t he panel ( circled in Figure B- 1) cont rol how t he propert y list is displayed.

Figu r e B- 1 . W it h t h e All bu t t on se le ct e d, t h e CSS St yle s pa n e l list s t h e n a m e s of a ll st yle s a va ila ble t o t h e cu r r e n t pa ge , in clu din g e x t e r n a l a n d in t e r n a l st yle sh e e t s. I n t h is e x a m ple , a n in t e r n a l st yle sh e e t con t a in s a sin gle st yle , a n d on e e x t e r n a l st yle sh e e t h e a dlin e s.csscon t a in s se ve n st yle s.

Section B.1. Creating Styles

B.1.1. Phase 1: Set Up the CSS Type CSS St yles New. Or, on t he CSS St yles panel, you can click To creat e a new st yle, choose Text t he New St yle but t on, or right - click anywhere in t he panel and select New from t he short cut m enu. The New CSS Rule dialog box appears ( Figure B- 2) , where you begin creat ing your new st yle: ●

●

Se le ct or Type . Click t he appropriat e radio but t on for t he kind of st yle you're creat ing: Class, t o creat e your own st yle from scrat ch; or Tag, t o creat e an HTML t ag st yle t hat Dream weaver will aut om at ically apply t o each occurrence of t he t ag. To creat e I Ds, pseudo- classes, and descendent select ors, click Advanced. ( And if you need help rem em bering what all t hese kinds of select ors do, t hen flip back t o Chapt er 3.) N a m e . I f you clicked t he Class but t on, t ype a nam e for t he new st yle. I f you're in a desperat e

Section B.1. Creating Styles

hurry, t hen you can leave out t he period t hat goes at t he beginning of every class st yle, since Dream weaver adds it aut om at ically when it put s t he st yle in t he st yle sheet .

Tip: Class style names must begin with a letter, too, and can contain only letters and numbers. Dreamweaver lets you know if you use any invalid characters for the name.

I f you chose Tag inst ead, select t he HTML t ag you want t o redefine from t he Tag pop- up m enu ( which appears when you click t he Tag radio but t on) . Or, if you're an old hand at HTML, j ust t ype t he t ag nam e wit hout t he bracket s. When you want t o creat e a st yle for all unordered ( bullet ed) list s, t ype ul. I f you clicked t he Advanced but t on, Dream weaver let s you t ype any valid CSS select or t ype, including plain old t ag and class st yles. ●

D e fin e in . Click " This docum ent only" if you want t he st yles t o apply only t o t he current Web page, creat ing an int ernal st yle sheet . To creat e a new ext ernal st yle sheet , choose New St yle Sheet File from t he " Define in" pop- up m enu. This opt ion not only creat es a new ext ernal CSS file ( which you can save anywhere in your sit e folder) , but adds t he necessary code in t he current docum ent t o link it t o t hat file. I f you've previously linked t his docum ent t o an ext ernal st yle sheet ( see Sect ion B.1.1) , t hat st yle sheet 's nam e appears in t he pop- up m enu, indicat ing t hat Dream weaver will st ore t he new st yle in t hat sheet . ( See Chapt er 2 for a review of int ernal and ext ernal st yle sheet s.)

Tip: If you create a bunch of internal styles in a particular page, and later realize you'd like to turn them into an external style sheet that you can use in other pages, then you're in luck. Dreamweaver has a command for this Export very task. Open the page containing the internal styles you want to reuse and choose File Export CSS Styles. A dialog box opens, letting you save the file as an external style sheet. Don't forget to add the .css extension to the end of the file name.

I f you indicat ed t hat you want t o creat e an ext ernal st yle sheet , clicking OK m akes a Save St yle Sheet As dialog box appear. Navigat e t o your sit e's folder and t ype a nam e for t he new ext ernal CSS file. ( Don't forget t he .css on t he end.)

Tip: If you'll be using this style sheet for all of the pages in your site, then you may want to save it in the root folder of your site, or in a folder specifically dedicated to style sheets and give it a general name like site_styles.css or global.css. (You don't have to type the .css file name extension, by the way. In this case, Dreamweaver adds it.)

Figu r e B- 2 . I n t h e N e w CSS Ru le dia log box , you ch oose a t ype of st yle a n d give it a n a m e . Th e la be l n e x t t o t h e n a m in g box ch a n ge s de pe n din g on t h e t ype of st yle you ch oose . I n t h is e x a m ple , sin ce Cla ss is se le ct e d, t h e N a m e la be l

Section B.1. Creating Styles

a ppe a r s. I t ch a n ge s t o Ta g if you click t h e Ta g bu t t on , or Se le ct or if you 'r e u sin g t h e Adva n ce d opt ion .

No m at t er what " Define in" opt ion you select ed, clicking OK event ually brings you t o t he CSS Rule Definit ion window.

B.1.2. Phase 2: Defining the Style The CSS Rule Definit ion window provides access t o all of t he form at t ing opt ions available t o you and your Web page t ext and graphics ( Figure B- 3) . Here you can click t o choose which propert ies t o add t o your st yle, inst ead of t yping t hem . Look, m ano spelling errors!

Figu r e B- 3 . For u lt im a t e for m a t t in g con t r ol, D r e a m w e a ve r le t s you se t 6 7 diffe r e n t Ca sca din g St yle Sh e e t pr ope r t ie s fr om t h e CSS Ru le D e fin it ion w in dow . Bu t it doe sn 't give you a cce ss t o a ll t h e a va ila ble CSS pr ope r t ie s a n d, in som e ca se s, D r e a m w e a ve r u se s diffe r e n t n a m e s for CSS pr ope r t ie s t h a n a r e u se d in t h is book a n d in t h e CSS r u le s. Tu r n t o Se ct ion B.1 for m or e de t a ils.

Section B.1. Creating Styles

Once you've defined t he st yle, click OK at t he bot t om of t he Rule Definit ion window. Dream weaver adds t he st yle t o t he specified st yle sheet , and displays it in t he CSS St yles panel.

Section B.2. Adding Styles to Web Pages

B.2. Adding Styles to Web Pages Once you've creat ed st yles, applying t hem is easy. I n fact , if you creat ed HTML t ag st yles, t hen you don't need t o do anyt hing t o apply t hem because t heir select ors aut om at ically dict at e which t ags t hey affect . When you put your st yles in an ext ernal st yle sheet , Dream weaver aut om at ically links it t o t he current docum ent . To use it s st yles in a different Web page, you m ust at t ach it t o t he page, as described next .

B.2.1. Linking to an External Style Sheet When you add a new Web page t o your sit e, usually you want t o use t he sam e CSS st yles as you did in exist ing pages, for a consist ent look. But you need t o t ell Dream weaver which st yle sheet you're using by at t aching it t o t he page. To do so, open t he Web page t o which you wish t o add t he st yle sheet . Then click t he At t ach St yle Sheet but t on ( see Figure B- 1) on t he CSS St yles panel. ( I f t he CSS St yles panel isn't open, choose Window

CSS St yles or press Shift - F11.)

Tip: You can also use Dreamweaver's Property inspector (at the bottom of the window) to attach a style sheet. Just choose Attach Style Sheet from the Style menu.

When t he At t ach Ext ernal St yle Sheet window appears ( Figure B- 4) , click Browse. I n t he Select St yle Sheet File dialog box t hat appears, navigat e t o and double- click t he CSS ( .css) file you wish t o at t ach t o t he docum ent . I f Dream weaver offers t o copy t he st yle sheet file int o your sit e's root folder, t hen click Yes.

Figu r e B- 4 . M ost of t h e opt ion s in t h e M e dia m e n u a r e n 't ve r y u se fu l, sin ce t h e r e a r e n 't a n y de vice s pr ogr a m m e d t o w or k w it h t h e m . H ow e ve r , " pr in t e r " a n d " scr e e n " a r e h a n dy w a ys t o con t r ol h ow you r pa ge displa ys w h e n vie w e d on a m on it or a n d w h e n pr in t e d on pa pe r .

The At t ach Ext ernal St yle Sheet window provides t wo ot her opt ions: how t o at t ach t he st yle sheet , and what t ype of m edia you want t he st yles t o apply t o. ●

●

When at t aching an ext ernal st yle sheet , you can choose t o eit her Lin k or I m por t it . These t wo choices are nearly ident ical, as described in Sect ion 2.2. The M e dia m enu defines which t ype of out put device or display should use t he st yle sheet . Select ing " print " m eans t hat t he st yle sheet will only apply when t he docum ent is print ed. Most of t hese opt ionssuch as TV for t elevisions, or TTY for t elet ype m achinesaren't of any use t o t he average Web designer. You can read about t hese different m edia t ypes and t he t wo m ost im port ant ones, " print er" and " screen," st art ing in Sect ion 13.1. Most of t he t im e, you can safely ignore t his m enu. The " all" opt ion in t he Media m enu is t he sam e as not select ing anyt hingt he st yle sheet applies when print ed, viewed on a m onit or, felt on a Braille reader, and so on. ( Dream weaver 8 also includes a helpful t oolbar for cont rolling t he display of st yle sheet s aim ed at different m ediasee Figure B- 5) .

Section B.2. Adding Styles to Web Pages

Tip: You can preview the effect of the style sheet on your page by clicking the Preview button on the Attach External Style Sheet window.

Aft er choosing your opt ions, click OK. Dream weaver adds t he necessary HTML code t o t he head of t he Web page, and aut om at ically form at s any t ags in t he docum ent according t o t he st yle sheet 's HTML t ag st yles. You'll see t he form at t ing changes t ake place in t he docum ent window im m ediat ely aft er at t aching t he ext ernal st yle sheet . I f t he st yle sheet cont ains class st yles, on t he ot her hand, you won't see t heir form at t ing effect s unt il you apply t hem t o an elem ent on t he page, as described next .

Figu r e B- 5 . To t u r n on D r e a m w e a ve r 's St yle Re n de r in g t oolba r ( t op r igh t ) , ch oose Vie w Toolba r s St yle Re n de r in g. Click a bu t t on on t h e t oolba r t o sh ow st yle s t h a t m a t ch t h e m e dia t ype you se le ct e d w h e n you a t t a ch e d t h e pa ge ( se e Se ct ion B.1 .1 ) . Scr e e n ( t op- le ft , cir cle d) a n d Pr in t ( bot t om - le ft , cir cle d) a r e t h e t w o m ost u se fu l, t h ou gh you ca n h ide a ll CSS st yle s by click in g t h e bu t t on on t h e fa r r igh t of t h e t oolba r ( bot t om - r igh t , cir cle d) .

Section B.2. Adding Styles to Web Pages

B.2.2. Applying a Class Style You can apply class st yles t o any select ion in t he docum ent window, whet her it 's a word, an im age, or an ent ire paragraph. ( You can apply any class st yle t o any elem ent , alt hough doing so doesn't always m ake sense. I f you form at a graphic wit h a st yle t hat specifies bold, red Courier t ype, t hen it won't look any different .) Suppose your com pany's nam e appears in a paragraph of t ext on a Web page t hat includes a class st yle nam ed .com pany ( eit her in an int ernal st yle sheet , or in a linked, ext ernal st yle sheet ) . To form at t hat t ext using t he class st yle, you select t he nam e in t he docum ent window and apply t he st yle, as described below. Sim ilarly, t o form at larger select ions, such as an ent ire paragraph, you'd select t he paragraph and apply t he class st yle. I n fact , you can apply a class st yle t o any HTML t ag, such as t he < p> ( paragraph) , < t d> ( t able cell) , or < body> t ags. When you apply a class st yle ( like .com pany) t o a t ag, Dream weaver adds a special class propert y t o t he page's code, like t his: < p class= " com pany" > . On t he ot her hand, when you apply a class t o a select ion t hat isn't a t aglike a single word t hat you've double- clicked Dream weaver wraps t he select ion wit hin a < span> t ag like t his: < span class= " com pany" > The Nat ional Exasperat or< / span> . This t ag, in ot her words, applies a st yle t o a span of t ext t hat can't be ident ified by a single t ag. To apply a class st yle t o t ext , select som e words. Then, from t he St yle m enu in t he Propert y inspect or, select t he st yle nam e ( Figure B- 6, t op) . To st yle an ent ire paragraph, place t he cursor anywhere inside t he paragraph ( or heading) before using t he Propert y inspect or. To apply a class st yle t o an obj ect like an im age, select t he obj ect ( t he t ag select or in t he bot t om of t he docum ent window is a great way t o select a t ag) . Then use t he Class pop- up m enu on t he Propert y inspect or ( Figure B- 6, bot t om ) t o select t he st yle nam e.

Figu r e B- 6 . Usin g t h e Pr ope r t y in spe ct or is t h e e a sie st w a y t o a pply a cla ss st yle . D e pe n din g on w h a t you 've se le ct e d on t h e pa ge ( t e x t , a n im a ge , or som e ot h e r H TM L t a g) , you 'll e n cou n t e r on e of t w o diffe r e n t m e n u st h e St yle m e n u ( t op) or t h e Cla ss m e n u ( bot t om ) . Eit h e r w a y, it 's t h e sa m e m e n u w it h t h e sa m e opt ion s, a n d you u se it t o se le ct t h e n a m e of a st yle t o a pply it t o w h a t e ve r you 've se le ct e d in t h e docu m e n t w in dow . You ca n a lso r e m ove a st yle by se le ct in g N on e fr om t h e m e n u .

Section B.2. Adding Styles to Web Pages

You can also apply a class st yle by select ing what ever elem ent you wish t o st yle, choosing Text CSS St yles, and t hen select ing t he st yle from t he subm enu. ( Alt ernat ive m et hod for t he ant i- m enu crowd: right - click [ Cont rol- click] t he st yle's nam e in t he CSS St yles panel, and t hen choose Apply from t he short cut m enu.) Finally, you can also apply a class from t he docum ent window's t ag select or, as shown in Figure B- 7.

Figu r e B- 7 . You ca n a pply a cla ss st yle dir e ct ly t o a t a g u sin g t h e docu m e n t w in dow 's t a g se le ct or . Ju st r igh t - click ( Con t r ol- click ) t h e t a g you w ish t o for m a t , a n d t h e n se le ct t h e cla ss st yle fr om t h e Se t Cla ss su bm e n u . I n a ddit ion , t h e t a g se le ct or le t s you k n ow if a t a g h a s a cla ss st yle a pplie d t o it . I f so, you 'll se e t h e st yle 's n a m e a t t h e e n d of t h e t a g. I n t h is figu r e , a cla ss st yle n a m e d .colCon t e n t h a s be e n a pplie d t o a < div> t a g ( cir cle d) .

B.2.3. Un-Applying a Class Style To rem ove a st yle from an obj ect on a Web page, sim ply select t he elem ent and t hen select None from t he Propert y inspect or's St yle m enu CSS St yles None t o rem ove a st yle from any select ion ( even non- t ext elem ent s like ( see Figure B- 6) . You can also choose Text im ages or t ables) .

Tip: If you've applied a class style to a selection of text, then you don't actually have to select all the text to remove the style. Just click anywhere inside it and select None from the Property inspector's Style menu (or choose Text

CSS Styles

None). If you applied the style to a tag, then Dreamweaver

removes the Class property from the tag. If you applied the style using the tag, then Dreamweaver removes that tag.

You can't rem ove t ag st yles from HTML t ags. Suppose you've redefined t he < h1> t ag using t he st eps out lined in Sect ion B.1.1. I f your page has t hree Heading 1 ( < h1> ) paragraphs, and you want t he t hird heading t o have a different st yle t han t he ot her t wo, t hen you can't sim ply " rem ove" t he < h1> st yle from t he t hird paragraph. I nst ead, what you'd need t o do is creat e a new class st yle wit h all of t he form at t ing opt ions you want for t hat t hird heading and apply it direct ly t o t he < h1> t ag ( by t he m agic of CSS, t he class form at t ing opt ions override any exist ing t ag st yle opt ionssee Sect ion 5.2 for m ore on t his sleight of hand) .

Section B.3. Editing Styles

B.3. Editing Styles While building a Web sit e, you cont inually refine your designs. That chart reuse color you assigned t o t he background of your pages m ay have looked great at 2 a.m ., but it loses som et hing in t he light of day. I n fact , one of Dream weaver's great est selling point s is how easy it m akes updat ing t he form at t ing on a Web sit e. Dream weaver 8 provides m any ways t o edit st yles:

FREQUENTLY ASKED QUESTION When Formatting Disappears Som et im es when I copy t ext from one Web page and past e it int o anot her Web page, all t he form at t ing disappears. What 's going on? When you use Cascading St yle Sheet s, keep in m ind t hat t he act ual st yle inform at ion is st ored eit her in t he < head> of t he Web page ( for int ernal st yle sheet s) or in a separat e CSS file ( an ext ernal st yle sheet ) . I f a page includes an int ernal st yle sheet , when you copy t ext , graphics, or ot her page elem ent s, t hen Dream weaver copies t hose elem ent s and any class st yle definit ions used by t hat cont ent . When you past e t he HTML int o anot her page, t he st yles are writ t en int o t he < head> of t hat page. This feat ure, new in Dream weaver 8, can save you som e t im e, but won't solve all of your woes. I t doesn't , for exam ple, copy any t ag st yles you've creat ed or m ost advanced st yles you m ight creat e ( see Sect ion 3.1) . So if you copy and past e som e t ext , say an < h1> t ag st yled wit h an h1 t ag st yle, t hen t he < h1> t ag and it s cont ent s will past e int o anot her page, but not t he t ag st yle. I n addit ion, if a page uses an ext ernal st yle sheet , t hen when you copy and past e t ext , t he st yles t hem selves don't go along for t he ride. When you copy a paragraph t hat has a class st yle applied t o it and past e it int o anot her docum ent , t he code in t he paragraph is past ed ( p class= " com pany" > , for inst ance) , but t he act ual .com pany st yle, wit h all it s form at t ing propert ies, is not . The best solut ion is t o use a com m on ext ernal st yle sheet for all pages on your sit e. That way, when you copy and past e t ext , all t he pages share t he sam e st yles and form at t ing. So in t he exam ple above, if you copy a paragraph t hat includes a class st yleclass= " com pany" int o anot her page t hat shares t he sam e st yle sheet , t hen t he paragraphs will look t he sam e on bot h pages.

●

Select a st yle in t he CSS St yles panel, and t hen click t he Edit St yle but t on t o open t he Rule Definit ion window ( t he sam e

Section B.3. Editing Styles

●

●

●

window you used when first creat ing t he st yle) . Make your changes, and t hen click OK t o ret urn t o t he docum ent window. Dream weaver reform at s t he page t o reflect any changes you m ade t o st yles used in t he current docum ent . Double- clicking t he nam e of a st yle in t he CSS panel also opens t he Rule Definit ion window. This is a change from t he previous version of Dream weaver ( MX 2004) , which swit ched t o Code view so you could edit t he raw CSS code. You can - U] ) , clicking t he CSS St yles cat egory, and resurrect t hat behavior, by opening t he Preferences window ( Ct rl+ U [ select ing t he last but t on " Edit using Code View." Right - click ( Cont rol- click) t he nam e of a st yle in t he CSS St yles panel and choose Edit from t he short cut m enu, which also opens t he Rule Definit ion Window. Make your changes t o t he st yle, and t hen click OK t o ret urn t o t he docum ent window. Select a st yle t o edit in t he CSS St yles panel, and t hen use t he Propert ies list ( Sect ion B.1.1) t o edit t he st yle's propert ies.

POWER USERS' CLINIC A Time to Design A Dream weaver feat ure called Design Tim e st yle sheet s let s you quickly " t ry out " different CSS st yle sheet s while developing your Web page. Using t he sim ple dialog box shown here, you can hide t he ( ext ernal) st yle sheet s you've at t ached t o a Web page and subst it ut e in new ones. Design Tim e st yle sheet s com e in handy when working on HTML t hat , lat er on, you int end t o m ake part of a com plet e Web page. Dream weaver Library it em s are a good exam ple; t his feat ure let s you creat e a chunk of HTML t hat you can use on any num ber of pages on your sit e ( see Dream weaver 8: The Missing Manual for inst ruct ions on how t o use t his feat ure) . When you updat e t he Library it em , every page t hat uses it is updat ed. A t im e- saving feat ure, for sure, but since a Library it em is only part of a page it doesn't include t he < head> port ion needed t o eit her st ore st yles or at t ach an ext ernal st yle sheet . So when designing a Library it em , you're working in t he dark ( or at least , wit hout any st yle) . But using Design Tim e st yle sheet s, you can access all t he st yles in an ext ernal st yle sheet and even preview t he effect s direct ly in Design view. You'll also t urn t o t his feat ure when working wit h Dream weaver 8's new XML t ools, which let you add an XSLT fragm ent t o a com plet e Web pageessent ially let t ing you convert XML ( like you'd find in an RSS news feed) int o a chunk of HTML. But t o accurat ely design t hese com ponent s, you'll need t o use Design Tim e st yle sheet s. By t he way, Design Tim e works only wit h ext ernal st yle sheet s. You can't use it t o prevent Dream weaver from displaying int ernal st yles. To apply a Design Tim e st yle sheet t o your Web page, choose Text CSS St yles Design Tim e. The Design Tim e St yle Sheet s window appears. Click t he t op + but t on t o select an ext ernal st yle sheet t o display in Dream weaver. Not e t hat clicking t his but t on doesn't at t ach t he st yle sheet t o t he page; it m erely select s a .css file t o use when viewing t he page inside Dream weaver. To properly view your page wit h t his new st yle sheet , you m ay need t o get an at t ached ext ernal st yle sheet out of t he way. To do t hat , use t he bot t om + but t on t o add it t o t he Hide list . Design Tim e st yle sheet s apply only when you're working in Dream weaver. They have no effect on how t he page looks in an act ual Web browser. That 's bot h t he good news and t he bad news. Alt hough Dream weaver let s you apply class st yles t hat you t ake from a Design Tim e st yle sheet t o your Web page, it doesn't act ually at t ach t he ext ernal st yle sheet t o t he page. You have t o at t ach it yourself when design t im e is over, or else your visit ors will never see your int ended result .

B.3.1. Editing in the Properties Pane The CSS Rule Definit ion window ( Figure B- 3) is a rat her t edious way of edit ing CSS propert ies. I t 's easy t o use, but t he cat egories and m enus m ay slow down experienced CSS folks. Dream weaver 8 int roduces a new t oolt he Propert ies panet o st ream line t he process of edit ing st yles. The Propert ies pane displays a select ed st yle's current ly defined propert ies, as well as a list of ot her not yet set CSS propert ies.

Note: MX 2004 veterans: The Properties pane is nearly identical to the Rule Inspector which has been spruced up a little and moved into the CSS panel.

Section B.3. Editing Styles

Select t he st yle you wish t o edit in t he CSS St yles panel, and t he Propert y pane displays CSS propert ies in one of t hree different views: a " set propert ies" view which displays only t he propert ies t hat have been defined for t he select ed st yle ( Figure B- 8) ; a cat egory view, which groups t he different CSS propert ies int o t he sam e seven cat egories used in t he Rule Definit ion window ( Figure B- 9, left ) ; and a list view which provides an alphabet ical list ing of all CSS propert ies ( Figure B- 9, right ) . Clicking t he view but t ons at t he bot t om - left corner of t he CSS st yles panel swit ches bet ween t hese t hree displays ( circled in bot h figures) .

FREQUENTLY ASKED QUESTION Help, My Styles Don't Work! I 've j ust edit ed a CSS st yle, but t he changes I m ade don't appear when I preview t he page. Why? When you edit a st yle locat ed in an ext ernal st yle sheet , Dream weaver opens t he .css filein t he background, where it t hen surrept it iously m akes t he change t o t he st yle. Unfort unat ely, t he program doesn't save t he file when it 's done, so while t he changes exist in t he st ill- open .css file, t he file safely saved on your hard drive doesn't yet cont ain t he changes. Therefore, if you preview a page on your sit e, and m errily click away t o see how t he newly edit ed st yles look on your sit e's pages, you'll be sadly disappoint ed. Those pages are loading t he .css file on your hard drive; t hey don't have access t o t he open file in Dream weaver. The m et hod t o t his apparent m adness: Dream weaver is giving you a chance t o undo changes you m ade t o t he ext ernal st yle sheet . Because t he program hasn't closed t he .css file, you can use t he Edit Undo com m and t o undo edit s t o t he file. To do so, you m ust have t hat file open in front of youbut where is it ? Just pull it forward by choosing from t he list of all open files at t he bot t om of t he Window m enu. I f you find t his arrangem ent m ore a nuisance t han a benefit , you can t urn it off. Open t he Preferences window by Preferences ( Dream weaver Preferences on t he Mac) . Select t he CSS St yles cat egory and choosing Edit t urn off t he " Open CSS files when m odified" box ( see Figure B- 10) . Rem em ber, t hough, if you t urn t his feat ure off, t hen you won't be able t o use Edit

Undo t o undo edit s you m ake t o ext ernal st yle sheet s.

Propert y nam es are list ed on t he left , and t heir values are on t he right . Figure B- 8 shows an exam ple of a st yle for t he < h1> t ag t hat list s 10 propert ies ( such as background- color, font - fam ily) and t heir corresponding set t ings ( # FFFFCC, " Arial, Helvet ica, sansserif" , and so on) .

Tip: As you've read, CSS lets you use various shorthand methods for combining several CSS properties into a single property. You can turn on this feature in Dreamweaver as well, as described in Figure B-10.

To add a new propert y, click t he Add Propert y link at t he bot t om of t he list , and select t he propert y nam e from t he pop- up m enu. You set ( and can edit ) t he value of a part icular propert y in t he space t o t he right of t he propert y nam e. Most of t he t im e, you don't have t o t ype in t he value. Dream weaver provides t he t ools you're likely t o need for each propert y: t he ubiquit ous color box for any propert y t hat requires a color, like font color; a pop- up m enu for propert ies t hat have a lim it ed list of possible values, like dashed for t he border- t op- st yle propert y shown in Figure B- 8; and t he fam iliar " browse for file" folder icon for propert ies t hat require a pat h t o a file.

Figu r e B- 8 . Th e Pr ope r t ie s pa n e pr ovide s a cle a r vie w of a st yle 's pr ope r t ie s. You ca n qu ick ly se e w h ich CSS pr ope r t ie s a r e u se d by t h e st yle , de le t e or e dit t h e m , a n d a dd a n e w pr ope r t y by se le ct in g it s n a m e fr om t h e pr ope r t y m e n u .

Section B.3. Editing Styles

The Propert ies pane is a great edit ing opt ion if you have som e experience t yping your own CSS code, as you've learned t hroughout t his book. Appendix A has a handy list of CSS propert ies. Also, Dream weaver includes a built - in CSS reference so you can sharpen your CSS chops even furt her: choose Window CSS Reference from t he Book m enu.

Reference t o open t he Reference panel, and t hen select O'Reilly

Note: The Properties pane can only edit styles. You can add and remove properties with it, but you can't create, delete, or rename styles using it. For those maneuvers, see Section B.1.

Even t hose who are not - so- experienced will find t he Propert ies pane helpful. First , it 's t he best way t o get a bird's- eye view of a st yle's propert ies. Second, for really basic edit ing such as changing t he colors used in a st yle or assigning it a different font , t he Propert ies pane is as fast as it get s. To rem ove a propert y from a st yle, j ust delet e it s value in t he right colum n. Dream weaver not only rem oves t he value, but t he propert y nam e from t he st yle sheet as well. I n addit ion, you can right - click ( Cont rol- click) a propert y nam e and choose Delet e from t he short cut m enu, or click a propert y nam e followed by t he t rash can icon t o banish it from your st yle sheet ( see Figure B- 8) .

Figu r e B- 9 . Th e Pr ope r t ie s pa n e 's t w o ot h e r vie w s a r e n 't a s st r e a m lin e d or a s e a sy t o u se a s t h e

Section B.3. Editing Styles

" se t pr ope r t ie s" vie w pict u r e d in Figu r e B- 8 . ( I n fa ct , t h e y'r e a h oldove r fr om D r e a m w e a ve r M X 2 0 0 4 's Ru le I n spe ct or pa n e l.) To a dd n e w pr ope r t ie s in t h e se vie w s, t ype a va lu e in t h e e m pt y box t o t h e r igh t of t h e pr ope r t y n a m e . At le ft , you ca n t ype in t h e e m pt y box t o t h e r igh t of " ba ck gr ou n d."

Section B.4. Managing Styles

B.4. Managing Styles Som et im es, inst ead of edit ing t he propert ies of a st yle, you want t o delet e it and st art over. Or you've com e up wit h a way t o bet t er organize your Web sit e and you want t o renam e som e st yles according t o your new syst em . Dream weaver m akes it easy t o do bot h t hose t hings. I t even let s you duplicat e a st yle, so you can quickly creat e a new st yle t hat bears som e sim ilarit ies t o one you've already built from scrat ch.

B.4.1. Deleting a Style At som e point , you m ay find you've creat ed a st yle t hat you don't need aft er all. Maybe you redefined t he HTML < code> t ag and realize you haven't even used t he t ag in your sit e. There's no need t o keep it around t aking up precious space in t he st yle sheet . CSS St yles) . Click t he nam e of t he st yle To delet e a st yle, m ake sure t he CSS St yles panel is open ( Window you wish t o delet e, and t hen click t he Trash can at t he bot t om of t he panel. You can also rem ove all of t he st yles in an int ernal st yle sheet ( as well as t he st yle sheet it self) by select ing t he st yle sheet indicat ed by " < st yle> " in t he CSS St yles panel ( see Figure B- 10) and clicking t he Trash can. When you t rash an ext ernal st yle sheet , you m erely unlink it from t he current docum ent wit hout act ually delet ing t he .css file.

Figu r e B- 1 0 . Som e CSS pr ope r t ie s ca n be con de n se d in t o a sh or t h a n d ve r sion . For e x a m ple , t h e va lu e s for t h e ba ck gr ou n d im a ge , ba ck gr ou n d- r e pe a t , ba ck gr ou n dcolor , a n d ba ck gr ou n d- posit ion pr ope r t ie s ca n be com bin e d u sin g t h e ba ck gr ou n d pr ope r t y lik e t h is: ba ck gr ou n d: # FFF u r l( im a ge s/ bg.gif) n or e pe a t le ft t op;. N or m a lly, D r e a m w e a ve r cr e a t e s a st yle u sin g e a ch in dividu a l pr ope r t y n a m e , r a t h e r t h a n t h e sh or t h a n d ve r sion . You ca n ch a n ge t h a t fr om t h e CSS St yle ca t e gor y of t h e Pr e fe r e n ce s w in dow ( ch oose Edit Pr e fe r e n ce s in W in dow s or D r e a m w e a ve r Pr e fe r e n ce s on t h e M a c) .

Section B.4. Managing Styles

Tip: A faster way to delete a style is to right-click (Control-click) the name of the style in the CSS Styles panel and choose Delete from the shortcut menu.

Unfort unat ely, delet ing a class st yle doesn't delet e any references t o t he st yle in t he pages of your sit e. I f you've creat ed a st yle called .com pany and applied it t hroughout your sit e, and you t hen delet e t hat st yle from t he st yle sheet , t hen Dream weaver doesn't rem ove t he < span> t ags or class propert ies t hat refer t o t he st yle. Your pages will st ill be lit t ered wit h orphaned code like t his< span class= " com pany" > The Nat ional Exasperat or< / span> even t hough t he t ext loses t he st yling. ( You can use Dream weaver's Find and Replace t ool t o locat e and rem ove < span> t ags wit h a part icular class, or t o locat e a t ag wit h a part icular class and j ust rem ove t he class at t ribut e from t he t ag's HTML.)

B.4.2. Renaming a Class Style

Section B.4. Managing Styles

While you have m any ways t o change t he nam e of a st yle in a st yle sheet ( open t he css file in Code view and edit t he nam e, for exam ple) , j ust changing t he nam e doesn't do m uch good if you've already applied a class st yle t hroughout your sit e. The old nam e st ill appears in each place you used it . What you really need t o do is renam e t he st yle and t hen perform a find- and- replace operat ion t o change t he nam e wherever it appears in your sit e. Dream weaver includes a handy t ool t o sim plify t his process. To renam e a class st yle: 1. I n t h e St yle m e n u ( or Cla ss m e n u ) on t h e Pr ope r t y in spe ct or ( Figu r e B- 6 ) , ch oose Re n a m e . The Renam e St yle window appears ( Figure B- 11) .

Figu r e B- 1 1 . Th e Re n a m e St yle t ool is a fa st a n d e a sy w a y t o ch a n ge t h e n a m e of a cla ss st yle e ve n if you 've a lr e a dy u se d t h e st yle h u n dr e ds of t im e s t h r ou gh ou t you r sit e .

2. Fr om t h e t op m e n u , ch oose t h e n a m e of t h e st yle you w ish t o r e n a m e . This m enu list s all class st yles available on t he current page, including ext ernal and int ernal st yles. 3. Type t h e n e w st yle n a m e in t h e " N e w n a m e " box . You m ust follow t he sam e rules for nam ing class st yles described in Sect ion 3.1. But , j ust as when creat ing a new class, you don't need t o precede t he nam e wit h a periodDream weaver t akes care of t hat . 4. Click OK. I f t he st yle whose nam e you're changing is an int ernal st yle, Dream weaver m akes t he change. Your j ob is com plet e.

Section B.4. Managing Styles

I f t he st yle belongs t o an ext ernal st yle sheet , Dream weaver warns you t hat ot her pages on t he sit e m ay also use t his st yle. To successfully renam e t he st yle, Dream weaver m ust use it s Find and Replace t ool t o search t he sit e and updat e all pages t hat use t he old st yle nam e. I n t hat case, cont inue t o st ep 5. 5. I f you ge t cold fe e t , click Ca n ce l t o ca ll off t h e n a m e ch a n ge , or click Ye s t o ope n t h e Fin d a n d Re pla ce w in dow , w h e r e you sh ou ld click Re pla ce All. One last warning appears, rem inding you t hat t his act ion can't be undone.

Note: If you click No in the warning box that appears after step 4, then Dreamweaver still renames the style in the external style sheet, but doesn't update your pages. 6. Click Ye s. Dream weaver goes t hrough each page of your sit e, dut ifully updat ing t he nam e of t he st yle in each place it appears. This hidden gem is a great t ool, and is part icularly useful if you use t he Propert y I nspect or t o set font colors, t ypes, and sizes. I n t hat case, you can use t his feat ure t o renam e t he non- descript ive class nam esSt yle1, St yle2, and so ont hat Dream weaver st art s you off wit h.

B.4.3. Duplicating a Style Dream weaver m akes it easy t o duplicat e a CSS st yle, which is handy when you've creat ed, say, an HTML t ag st yle, and now decide you'd rat her m ake it a class st yle. Or you m ay want t o use t he form at t ing opt ions from one st yle as a st art ing- off point for a new st yle. Eit her way, you st art by duplicat ing an exist ing st yle. CSS You can duplicat e a st yle in t wo ways. The easiest m et hod is t o open t he CSS St yles panel ( Window St yles) , right - click ( Cont rol- click) t he nam e of t he st yle you wish t o duplicat e, and t hen choose Duplicat e from t he short cut m enu. The Duplicat e CSS Rule dialog box appears ( Figure B- 12) , where you can give t he duplicat ed st yle a new nam e, reassign it s Type set t ing, use t he " Define in" m enu t o m ove it from an int ernal t o an ext ernal st yle sheet , and so on.

Figu r e B- 1 2 . Th e D u plica t e CSS St yle dia log box look s a n d a ct s j u st lik e t h e N e w Ru le box ( Figu r e B- 2 ) . You ca n se le ct a n e w st yle t ype , n a m e it , a n d a dd it t o a n e x t e r n a l or in t e r n a l st yle sh e e t . Th e on ly diffe r e n ce is t h a t t h e du plica t e d st yle r e t a in s a ll of t h e CSS pr ope r t ie s of t h e or igin a l st yle .

Section B.4. Managing Styles

When you click OK, Dream weaver adds t he duplicat e st yle t o t he page or ext ernal st yle sheet . You can t hen edit t he new st yle j ust as you would any ot her, as described earlier in t his appendix.

Section B.5. Examining Your CSS in the Styles Panel

B.5. Examining Your CSS in the Styles Panel As you read in Chapt ers 4 and 5, inherit ance and t he cascade are t wo very im port ant CSS concept s. I nherit ance provides a way of passing on com m on propert ies like a font color t o descendent s of a st yled t ag. Giving t he page's < body> t ag a font color, causes ot her t ags inside t he page t o use ( inherit ) t hat sam e font color. The cascade is a set of rules for det erm ining what a Web browser should do if m ult iple st yles apply t o t he sam e t ag and t here are conflict s bet ween t he t wo st yles. The cascade helps decide what t o do when one st yle dict at es t hat a part icular paragraph should be displayed in 24- pixel t ype, while anot her st yle dict at es t hat t he t ype should be 36 pixels t all.

B.5.1. Current Selection Mode Wit h all t his inherit ance and cascading going on, it 's very easy for st yles t o collide in unpredict able ways. To help you discern how st yles int eract and ferret out possible st yle conflict s, Dream weaver 8 includes anot her view of t he CSS St yles Panel ( see Figure B- 13) . When you click t he Current but t on, t he panel swit ches t o Current Select ion m ode, which provides insight int o how a select ed it em on a pagean im age, a paragraph, a t ableis affect ed by inherit ed st yles.

Tip: You can also switch the CSS Styles Panel into Current Selection mode by selecting text on a page, and then clicking the new CSS button on the Property inspector. Doing so also opens the CSS panel, if it's closeda nice shortcut. If the button's grayed out, then you're already in the right mode.

This is really an incredible t ool t hat 's invaluable in diagnosing weird CSS behavior associat ed wit h inherit ance and cascading. But like any incredible t ool, it requires a good m anual t o learn how it works. The panel cram s in a lot of inform at ion; here's a quick overview of what it provides: ●

●

●

●

A su m m a r y of st yle pr ope r t ie s for t h e cu r r e n t ly se le ct e d it e m in t h e Su m m a r y for Se le ct ion pa n e . Rem em ber t hat whole t hing about how parent s pass on at t ribut es t o child t ags, and how as st yles cascade t hrough a page, t hey accum ulat e ( which m eans it 's possible t o have an < h1> t ag form at t ed by m ult iple st yles from m ult iple st yle sheet s) ? The Sum m ary for Select ion sect ion is like t he grand t ot al at t he bot t om of a spreadsheet . I t t ells you, in essence, what t he select ed elem ent a paragraph, a pict ure, and so onwill look like when a Web browser t allies up all of t he st yles and displays t he page. Th e or igin of a pa r t icu la r pr ope r t y is displa ye d in t h e Abou t pa n e ( Figure B- 13, t op) . I f a headline is orange, but you never creat ed an < h1> t ag wit h an orange color, t hen you can find out which st yle from which st yle sheet is passing it s hideous orangeness t o t he heading. A list of st yle s t h a t a pply t o t h e cu r r e n t se le ct ion a ppe a r s in t h e Ru le s pa n e ( Figure B- 13, bot t om ) . Since any elem ent can be on t he receiving end of count less CSS propert ies handed down by parent t ags, it 's helpful t o see a list of all t he st yles cont ribut ing t o t he current appearance of t he select ed obj ect on t he page. Th e or de r of t h e ca sca de in t h e " Rules" pane ( Figure B- 13, bot t om ) . Not only are st yles t hat apply t o t he current select ion list ed, t hey're also list ed in a part icular order, wit h t he m ost general st yle at t he t op and t he m ost specific ones at t he bot t om . This m eans t hat when t he sam e propert y exist s in t wo ( or m ore) st yles, t he st yle list ed last ( furt hest down t he list ) wins.

Section B.5. Examining Your CSS in the Styles Panel

A few exam ples can help dem onst rat e how t o read t he CSS St yle panel when it 's in Current Select ion m ode. Figure B- 13 shows t he CSS propert ies affect ing a select ion of t ext ( in t his case, a paragraph) on a Web page. The Sum m ary for Select ion pane let s you know t hat if you viewed t his page in a Web browser, t his paragraph would be displayed in bold using t he Georgia t ype- face, at a font - size of 1.5em s wit h 150 percent line- height ( space bet ween each line of t ext ) . When you select a propert y from t he Sum m ary for Select ion pane and t hen click t he Show Propert y I nform at ion but t on ( Figure B- 13, t op) , t he About pane displays where t he propert y com es from in t his case, t hat propert y belongs t o t he < p> t ag st yle which is defined in t he int ernal st yle sheet of t he file index.ht m l.

Figu r e B- 1 3 . Th e t w o vie w sPr ope r t y I n for m a t ion ( t op) a n d Ca sca de ( bot t om ) of t h e st yle s pa n e l a r e m ost ly t h e sa m e . Bot h sh ow a su m m a r y of pr ope r t ie s t h a t a pply t o t h e cu r r e n t se le ct ion ; t h e y a lso bot h displa y t h e Pr ope r t y list pa n e ( se e Se ct ion B.1 .1 ) u se d t o e dit t h ose pr ope r t ie s. Th e Pr ope r t y I n for m a t ion vie w sh ow s w h ich st yle a n d w h ich st yle sh e e t s w e r e u se d in de fin in g a pr ope r t y. I n con t r a st , t h e Ca sca de vie w sh ow s a list of a ll st yle s ( r u le s) t h a t t h e cu r r e n t se le ct ion in h e r it s fr om .

Section B.5. Examining Your CSS in the Styles Panel

You've seen t he bot t om pane before. I t 's t he Propert ies pane, and it 's used t o delet e, add, and edit t he propert ies of a st yle ( see Sect ion B.1.1) . You sim ply click in t he area t o t he right of t he propert y's nam e t o change it s value, or click t he Add Propert y link t o select a new propert y for t he st yle. Not ice t hat in t his exam ple, t he Propert ies pane cont ains fewer propert ies t han t he sum m ary view. That 's because it displays only propert ies of a single st yle ( t he < p> t ag st yle) , while t he Sum m ary view shows all propert ies inherit ed by t he current select ion.

Tip: Sometimes one or more of the three panes are too small for you to be able to see the information displayed. You can use the gray bars containing the panes' names (circled in Figure B-13, bottom) as handles and drag them up or down to reveal more or less of each pane.

Section B.5. Examining Your CSS in the Styles Panel

B.5.2. Deciphering the Cascade Clicking t he Show Cascade but t on ( Figure B- 13, bot t om ) reveals a list of all st yles t hat affect t he current select ion. I n t his case, you can see t hat t wo t ag st ylesone for t he body t ag and one for t he p t agcont ribut e t o st yling t he select ed paragraph of t ext . I n addit ion, as m ent ioned above, t he order in which t he st yles are list ed is im port ant . The lower t he nam e appears in t he list , t he m ore " specific" t hat st yle isin ot her words, when several st yles cont ain t he sam e propert y, t he propert y belonging t o t he st yle lower on t he list wins out ( see Sect ion 5.1.4 for m ore on conflict s caused by cascading st yles) . The Propert ies pane provides even m ore inform at ion about conflict ing propert ies. Figure B- 14 shows t hat four st yles are affect ing t he form at t ing of a single paragraph of t ext : t hree t ag st yles ( < body> , < p> , and < p> ) and one class st yle ( .sidebar) . Why t wo < p> t ag st yles? One is in an ext ernal st yle sheet , while t he ot her belongs t o t he page's int ernal st yle sheet . Clicking a st yle nam e in t he Rules pane reveals t hat st yle's propert ies in t he pane below. I n t he bot t om - left im age in Figure B- 14, not ice t he sidebar class st yle has propert ies such as background color, t ext color, and so on. When a line appears t hrough a propert y nam e ( see t he circled areas in Figure B- 14, bot t om m iddle and bot t om right ) t hat propert y isn't applied t o t he current select ion. Eit her it 's overridden by a m ore specific st yle, or it 's not an inherit ed propert y. The second- t o- last st yle in t he list in Figure B- 14a < p> t ag st yleshows t hat it has a set t ing for t he font fam ily propert y. I n addit ion, t here's a line t hrough t he propert y nam e, indicat ing t hat it doesn't apply t o t he current select ion. Because t he m ore specific .sidebar class st yle also has t he font - fam ily propert y set , in t he bat t le of cascading st yle propert ies, .sidebar wins ( see Chapt ers 4 and 5 for m ore on inherit ance and cascading) .

Tip: When you hover over a property name that's crossed out in the Properties pane, a pop-up window explains why the property doesn't apply. This is a big help, when a certain property setting (such as a font color) from a style isn't being applied to your selection. The pop-up window will explain which style it's in conflict with, providing you with the diagnostic information you need to go fix the problem.

I f your Web pages are elegant ly sim ple and use only a couple of st yles, you m ay not find m uch need for t his aspect of t he CSS St yles panel. But as you becom e m ore proficient ( and advent urous) wit h CSS, you'll find t hat t his panel is a great way t o unt angle m asses of colliding and conflict ing st yles.

Figu r e B- 1 4 . Se le ct in g t h e Cu r r e n t vie w of t h e CSS St yle s pa n e l le t s you vie w a ll t h e pr ope r t ie s for you r W e b pa ge 's st yle s. A lin e ( cir cle d in t h e se im a ge s) st r ik e s ou t pr ope r t ie s fr om a st yle t h a t don 't a pply t o t h e give n se le ct ion on t h e pa ge . I n t h is e x a m ple , t h e fon t - fa m ily in t h e se con d < p> st yle is ove r r idde n by t h e fon t - fa m ily pr ope r t y in t h e m or e spe cific side ba r cla ss st yle ( bot t om r ow , m iddle ) . Lik e w ise , t h e side ba r cla ss a lso ove r r ide s t h e fon t - size , color , a n d m a r gin - le ft pr ope r t ie s in t h e t op < p> st yle ( bot t om r ow , r igh t ) .

Section B.5. Examining Your CSS in the Styles Panel

Section B.6. CSS Properties

B.6. CSS Properties For t he m ost part , t he Dream weaver's CSS Rule Definit ion window list s CSS propert ies using nearly t he sam e language as t he act ual propert y nam es; t he color propert y, for exam ple, is list ed in t he Type cat egory as Color. But som et im es Dream weaver uses very different nam es for CSS propert ies. Table B- 1 shows each cat egory of t he CSS Rule Definit ion window, and list s t he act ual CSS propert y nam e and a page reference where you can learn m ore about t he propert y. I n addit ion, Appendix A cont ains a com plet e list of CSS 2.1 propert ies.

Ta ble B- 1 . D r e a m w e a ve r pr ope r t y n a m e s a n d t h e ir CSS e qu iva le n t s D r e a m w e a ve r Pr ope r t y N a m e

Act u a l CSS Pr ope r t y N a m e

Cat egory: Type Font

font - fam ily ( Sect ion 6.1.1)

Size

font - size ( Sect ion 6.2)

Weight

font - Weight ( Sect ion 6.3.2)

St yle

font - St yle ( Sect ion 6.3.2)

Variant

font - Variant ( Sect ion 6.3.2.1)

Line height

line height ( Sect ion 6.4)

Case

t ext - t ransform ( Sect ion 6.3.2)

Decorat ion ( underline, overline, line- t hrough, blink, none)

t ext - decorat ion ( Sect ion 6.3.2.1)

Color

color ( Sect ion 6.1.2)

Cat egory: Background Background color

background- color ( Sect ion 7.4)

Background im age

background- im age ( Sect ion 8.2)

Repeat

background- repeat ( Sect ion 8.3)

At t achm ent

background- at t achm ent ( Sect ion 8.4.4)

Horizont al posit ion/ Vert ical posit ion

background- posit ion ( Sect ion 8.4)

Cat egory: Block Word spacing

word- spacing ( Sect ion 6.3.4)

Section B.6. CSS Properties

Let t er spacing

let t er- spacing ( Sect ion 6.3.4)

Vert ical alignm ent

vert ical- alignm ent ( Sect ion 10.2.1)

Text align

t ext - align ( Sect ion 6.4.1.2)

Whit espace

whit e- space ( Sect ion A.1.1)

Display

display ( Sect ion 7.2.4)

Cat egory: Box Widt h

widt h ( Sect ion 7.5.1)

Height

height ( Sect ion 7.5.1)

Float

float ( Sect ion 7.6)

Clear

Clear ( Sect ion 7.6.2)

Padding

padding ( Sect ion 7.2)

Top

padding- t op ( Sect ion 7.2)

Right

padding- right ( Sect ion 7.2)

Bot t om

padding- bot t om ( Sect ion 7.2)

Left

padding- left ( Sect ion 7.2)

Margin

m argin ( Sect ion 7.2)

Top

m argin- t op ( Sect ion 7.2)

Right

m argin- right ( Sect ion 7.2)

Bot t om

m argin- bot t om ( Sect ion 7.2)

Left

m argin- left ( Sect ion 7.2)

Cat egory: Border

[ 1]

St yle

border- st yle ( Sect ion 7.3)

Widt h

border- widt h ( Sect ion 7.3)

Color

border- color ( Sect ion 7.3)

Cat egory: List Type

list - st yle- t ype ( Sect ion 6.4.4)

Bullet im age

list - st yle- im age ( Sect ion 6.5.3)

Posit ion

list - st yle- posit ion ( Sect ion 6.5.2)

Cat egory: Posit ioning

Section B.6. CSS Properties

Type:

posit ion ( Sect ion 12.1)

Widt h

widt h ( Sect ion 7.5.1)

Height

height ( Sect ion 7.5.1)

Visibilit y

visibilit y ( Sect ion 12.1.5)

Z- I ndex

z- index ( Sect ion 12.1.4)

Overflow

overflow ( Sect ion 7.5.2)

Placem ent Top

t op ( Sect ion 12.1.1)

Placem ent Right

right ( Sect ion 12.1.1)

Placem ent Bot t om

bot t om ( Sect ion 12.1.1)

Placem ent Left

left ( Sect ion 12.1.1)

Clip Top, Right , Bot t om , Left

clip ( Sect ion A.1.1)

Cat egory: Ext ensions Before

page- break- before ( Sect ion 13.3.5)

Aft er

page- break- aft er ( Sect ion 13.3.5)

Cursor

cursor ( Sect ion A.1)

Filt er

Filt er is an I nt ernet Explorer for Windows only propert y. For m ore inform at ion go t o: ht t p: / / m sdn.m icrosoft .com / workshop/ aut hor/ filt er/ reference/ reference.asp ( Sect ion A.1)

[1]

There are many different border properties, all of which provide different ways to specify the same thing (see Section 7.3). Dreamweaver's CSS Styles Preferences determine exactly how Dreamweaver writes the CSS code for borders (Section B.1.1). You can't set the very useful border-collapse property in the Rule Definition window (see Section 10.2.1).

Appendix C. CSS Resources

Appendix C. CSS Resources Unfort unat ely, one book can't answer all of your CSS quest ions. ( We did t ry, however.) Thankfully, t here are m any CSS resources available for bot h t he beginning and expert Web designer. Below you'll find resources t o help you wit h general CSS concept s as well as resources t o help wit h specific CSS t asks such as building a navigat ion bar or laying out a Web page.

Section C.1. References

C.1. References References t hat cover CSS propert ies range from t he official t o t he obscure. There are Web sit es and online t ut orials, of course, but you don't have t o be on t he Web t o learn about CSS. Som e of t hese guides com e on good old- fashioned paper.

C.1.1. World Wide Web Consortium (W3C) ●

●

CSS 2.1 Specificat ion: www.w3c.org/ TR/ CSS21/ . For t he official word, go t o t he sourcet he W3Cand read t he act ual set of rules t hat m ake up t he m ost widely support ed version of CSS, version 2.1. CSS 3 Current Work: www.w3.org/ St yle/ CSS/ current - work. I f you want t o t ake a look at what t he fut ure holds, check out t he current work being done on t he CSS 3 specificat ion. I t prom ises som e very m aj or enhancem ent s t o CSS. Just not e t hat it 's probably going t o t ake a few years before t hese innovat ions are finalized and even longer before Web browsers underst and t hem . But it 's fun t o dream .

C.1.2. Books and PDFs ●

●

Cascading St yle Sheet s: The Definit ive Guide by Eric Meyer ( O'Reilly) . For com prehensive t echnical ( yet readable) coverage of CSS, check out t his guide. CSS Cheat Sheet ( www.ilovej ackdaniels.com / css_cheat _sheet .pdf) . Don't let t he URL put you off. This one- page PDF docum ent list s every CSS propert y, covers every t ype of CSS select or under t he sun, and includes a handy diagram of t he box m odel ( Sect ion 7.1) . Print it out , fold it up, and carry it in your back pocket .

C.1.3. Online Tutorial ●

West ernCiv's Com plet e CSS Guide: www.west civ.com / st yle_m ast er/ academ y/ css_t ut orial/ index. ht m l. A det ailed online guide t o CSS.

Section C.2. CSS Help

C.2. CSS Help Even wit h t he best references ( like t his book) , som et im es you need t o ask an expert . You can j oin a discussion list where CSS- heads answer quest ions by em ail, or peruse a wealt h of inform at ion in an online forum .

C.2.1. Email List ●

CSS- Discuss: ht t p: / / css- discuss.org/ . The longest living m ailing list dedicat ed t o j ust CSS. You'll find CSS m ast ers willing t o help get you out of your CSS t roubles.

Note: Before pestering the CSS-Discuss list with a question that 47,000 people have previously asked, check out their wikia collaborative Web site where group members freely add, edit, and update each other's articles. This wiki has evolved into a terrifically convenient index of tips and tricks, best practices, and in-depth treatment of CSS topics. Visit http://css-discuss.incutio.com/.

C.2.2. Discussion Boards ●

●

CSSCreat or Forum : www.csscreat or.com / css- forum / . A very act ive online forum offering help and advice for everyt hing from basic CSS t o advanced layout . Sit ePoint .com 's CSS Forum : www.sit epoint .com / forum s/ forum display.php?f= 53. Anot her helpful group of CSS addict s.

Section C.3. CSS Navigation

C.3. CSS Navigation Chapt er 9 shows you how t o creat e navigat ion but t ons for your Web sit e from scrat ch. But online t ut orials are a great way t o solidify your knowledge. Also, once you underst and t he process in det ail, you don't have t o do it yourself every single t im e. On t he Web you can find exam ples of navigat ion feat ures for inspirat ion.

C.3.1. Tutorials ●

●

ht t p: / / t ut orials.alsacreat ions.com / rollover_unique/ . How t o creat e a graphical m enu wit h a single im age. I ncludes rollovers! List ut orial: ht t p: / / css.m axdesign.com .au/ list ut orial/ . St ep- by- st ep t ut orials on building navigat ion syst em s from unordered list s.

C.3.2. Online Examples ●

●

●

●

●

●

●

●

Pure CSS Pop- ups: www.m eyerweb.com / eric/ css/ edge/ popups/ dem o.ht m l. Pop- up effect s, purely wit h CSS. CSS Tab Designer: www.highdot s.com / css- list / . Windows- only soft ware for quickly generat ing t abbed CSS m enus. CSS Showcase: www.alvit .de/ css- showcase/ . A gallery of navigat ion m enus, t abs and CSS navigat ion t echniques. List am at ic: ht t p: / / css.m axdesign.com .au/ list am at ic/ . Showcase of CSS- based navigat ion syst em s. Also lot s of links t o relat ed Web sit es. List am at ic2: ht t p: / / css.m axdesign.com .au/ list am at ic2/ . More CSS- m enus, including nest ed list s wit h subm enus. Horizont al Pop- Out Menus: www.alist apart .com / art icles/ horizdropdowns/ . The nam e's a lit t le deceiving. This t ut orial act ually creat es a vert ical m enu, wit h subm enus t hat pop up next t o t he m ain m enu. Free Vert ical Menu Designs: ht t p: / / exploding- boy.com / im ages/ EBm enus/ m enus.ht m l. A handful of cool designs. CSS Play Menu Showcase: www.cssplay.co.uk/ m enus/ index.ht m l. Lot s of cool m enus, m any useful t echniques. A m ust see.

Section C.4. CSS and Graphics

C.4. CSS and Graphics Once you've t ried t he phot o gallery in Chapt er 8, you're ready t o get even m ore creat ive. Here are som e Web sit es t hat showcase CSS graphics t ricks. ●

● ●

●

●

●

●

CSS Slideshow: www.cssplay.co.uk/ m enu/ slide_show.ht m l. CSS- only slideshow from t he creat ive m ind of St u Nicholls. Sliding Phot oGalleries: www.cssplay.co.uk/ m enu/ gallery3l.ht m l. Dynam ic, CSSdriven gallery. Mult i- page Phot o Gallery: / www.cssplay.co.uk/ m enu/ light box.ht m l# t ree1. Yet anot her im age gallery from St u Nicholls. CSS St ar Rat ing: kom odom edia.com / blog/ index.php/ 2006/ 01/ 09/ css- st ar- rat ing- part - deux. Creat e a very cool, Net flix- like st ar rat ing syst em . CSS I m age Maps: www.frankm anno.com / ideas/ css- im agem ap/ . Creat e pop- up labels for your phot os. CSS Phot o Capt ion Zoom : ht t p: / / randsco.com / _m iscPgs/ cssZoom PZ3.ht m l. Make a ginorm ous version of a phot o appear j ust by m ousing over a t hum bnail im age. Revised I m age Replacem ent : www.m ezzoblue.com / t est s/ revised- im age- replacem ent / . Overview of different ways t o swap out HTML headlines wit h st ylish graphics.

Section C.5. CSS Layout

C.5. CSS Layout CSS layout is so flexible you could spend a lifet im e exploring t he possibilit ies. And som e people seem t o be doing j ust t hat . You can gain from t heir labors by reading art icles, checking out online exam ples, and experim ent ing wit h t ools t hat can do som e of t he CSS work for you.

C.5.1. Box Model Information ●

●

●

I nt eract ive CSS Box Model: www.redm elon.net / t st m e/ box_m odel/ . Fun, int eract ive t ool for visualizing t he box m odel. On Having Layout : www.sat zansat z.de/ cssd/ onhavinglayout .ht m l. Not for t he faint of heart , t his highly t echnical analysis of I nt ernet Explorer explains t he m ain cause ( and som e solut ions) for m any of t he CSS bugs t hat plague Windows I nt ernet Explorer 6 and earlier. CSS Grid Calculat or: www.gwhit e.us/ downloads/ css_grid_calc.ht m l. A Flash applicat ion ( now t hat 's ironic) t hat asks for som e basic propert ies of t he layout you want num ber of colum ns, gut t er widt h, page widt h, and so onand generat es t he CSS t o m ake it happen.

C.5.2. Float Layouts ●

●

●

I n search of t he one t rue layout : www.posit ioniseveryt hing.net / art icles/ onet ruelayout / . I nt erest ingif slight ly m ind- bendingpresent at ion on how t o creat e a float - based layout t hat overcom es m ost of t he lim it at ions of float s. Any Order Colum ns: ht t p: / / bit esizest andards.com / bit es/ underst anding- any- order- colum ns. A sim ple int roduct ion t o using negat ive m argins for posit ioning colum ns regardless of t heir posit ion in t he HTML source code. CSS Discuss Wiki page on float - based layout s: ht t p: / / css- discuss.incut io.com / ?page= Float Layout s. Even m ore links t o float - based layout resources.

C.5.3. Absolute Position Layouts ●

●

●

CSS- Discuss Wiki on Absolut e Layout s: ht t p: / / css- discuss.incut io.com / ?page= Absolut eLayout s. Good resources wit h som e helpful background inform at ion. Learn CSS Posit ioning in Ten St eps: www.barelyfit z.com / screencast / ht m l- t raining/ css/ posit ioning/ . Quick, hands- on overview of CSS posit ioning. Making t he Absolut e, Relat ive: www.st opdesign.com / art icles/ absolut e/ . Guide t o using absolut e posit ioning for subt le design effect s.

C.5.4. Layout Examples ● ●

●

Mollio Tem plat es: www.m ollio.org. Great set of free CSS- layout t em plat es. Very nice design. Layout Gala: ht t p: / / blog.ht m l.it / layout gala/ . Fort y different CSS designs, running t he gam bit from t wo- colum n t o t hree- colum n, fixed- widt h t o liquid. ( All have been t est ed in I E, Firefox, and Safari.) I nt ensivst at ion Tem plat es: ht t p: / / int ensivst at ion.ch/ en/ t em plat es/ . Cool t em plat es, weird dom ain nam e.

Section C.5. CSS Layout

C.5.5. Miscellaneous Layout Resources ●

●

●

●

One clean HTML m arkup, m any layout s: ht t p: / / t j kdesign.com / art icles/ one_ht m l_m arkup_m any_css_layout s.asp. Great blog post t hat t akes a single HTML page and dem onst rat es eight different ways t o lay it out wit h j ust CSS. Variable fixed widt h layout : www.clagnut .com / blog/ 1663/ . Short blog post about a t echnique for adj ust ing t he num ber of colum ns on a page, based on t he widt h of t he browser window. 3- Colum n Layout I ndex: ht t p: / / css- discuss.incut io.com / ?page= ThreeColum nLayout s. A nearly exhaust ive ( or at least exhaust ing) list of different 3- colum n layout s. Sit e in an Hour: ht t p: / / left j ust ified.net / sit e- in- an- hour/ . Slide present at ion on how t o build a CSS Web sit e.

Section C.6. Browser Bugs

C.6. Browser Bugs CSS is t he best way t o form at Web pages, and I nt ernet Explorer 6 for Windows is t he world's m ost popular browser…so why doesn't I E 6 do a bet t er j ob displaying CSS? That 's a quest ion for t he ages, but one t hing's for sure: You'd be holding a t hinner book if it didn't have t o devot e so m uch paper t o I E workarounds. ( And t he following Web sit es would go out of business.)

C.6.1. Windows Internet Explorer ●

●

●

How t o At t ack an I nt ernet Explorer ( Win) Display Bug: www.com m unit ym x.com / cont ent / art icle.cfm ? page= 1&cid= C37E0. A great int roduct ion t o debugging I nt ernet Explorer CSS problem s. RichI nSt yle's guide t o I E 5/ 5.5 Bugs: www.richinst yle.com / bugs/ ie5.ht m l. That pesky browser is st ill around, and st ill causing Web designers t rouble. I f you need help m aking your pages work for I E 5, check t his page out . Explorer Exposed! www.posit ioniseveryt hing.net / explorer.ht m l. I nform at ion on t he m ost com m on I nt ernet Explorer bugs and how t o fix t hem .

C.6.2. Mac Internet Explorer 5 ●

Mac I E 5: Problem s wit h CSS Rendering: www.l- c- n.com / I E5t est s. This book doesn't cover I nt ernet Explorer 5 for t he Mac, since it 's j ust about a dead browser. Microsoft is no longer updat ing it or even providing t echnical support , giving Mac fans a perfect excuse t o swit ch t o t he superior Safari and Firefox browsers. However, if you st ill need t o accom m odat e I E 5 for t he Mac, check out t his sit e for helpful t ips on Mac I E- only CSS bugs.

Section C.7. Showcase Sites

C.7. Showcase Sites Knowing t he CSS st andard inside out is no help when your im aginat ion's running dry. A great source of inspirat ion is t he creat ive work of ot hers, so here's a bunch of sit es where you can appreciat e and st udy beaut iful CSS designs. ●

● ● ●

●

CSS ZenGarden: www.csszengarden.com . The m ot her of all CSS showcase sit es: m any different designs for t he exact sam e HTML. CSS Beaut y: www.cssbeaut y.com / . A wonderful gallery of inspirat ional CSS designs. CSS Vault : ht t p: / / cssvault .com / . More cool designs. CSS Mania: ht t p: / / cssm ania.com / . Yet anot her showcase sit e, whose non- gram - m at ical claim t o fam e is " Since March 2004, t he m ost updat ed CSS showcase all over t he globe." Showcase of Showcases: ht t p: / / css- discuss.incut io.com / ?page= ShowCase. The CSS- Discuss wiki present s a list of showcase sit es, and great exam ples of CSS design.

Section C.8. CSS Books

C.8. CSS Books Hey, not even t his book can t ell you everyt hing t here is t o know about CSS! ●

●

●

●

Web St andards Solut ions by Dan Cederholm ( Friends of Ed) . Though not st rict ly about CSS, t his book provides an excellent present at ion on how t o writ e good HTML. I f you have any doubt s about what t ags you should use t o creat e a navigat ion bar, how t o best creat e HTML form s, or what 's t he best m et hod for m aking your HTML code as sim ple as possible, t his book is a m ust read. Bullet proof Web Design by Dan Cederholm ( New Riders) . A great book covering how best t o creat e CSS st yles t hat can wit hst and t he pressure of visit ors changing t ext sizes, resizing t heir browser windows, and t he general inst abilit y of t he browser environm ent . Great t ips on building layout s, navigat ion bars and m ore. CSS Mast ery: Advanced Web St andards Solut ions by Andy Budd ( Friends of Ed) . Many advanced t ips for using CSS, including good exam ples of CSS- based layout s, and t echniques for st ream lining your CSS and HTML code. Head First HTML wit h CSS & XHTML by Elisabet h Freem an and Eric Freem an ( O'Reilly) . A lively, highly illust rat ed int roduct ion t o Web sit es int egrat ing HTML and CSS.

Section C.9. Must-Have RSS Feeds

C.9. Must-Have RSS Feeds RSS let s t he Web com e t o you in t he form of sum m aries of post s from your favorit e bloggers or inst ant not ificat ion of updat es t o t he sit es you follow. You can use t he free Google Reader ( www.google.com / reader/ ) , Firefox's built - in RSS Reader, or Safari's reader if you're on a Mac. I f you're not plugged int o RSS, you should be, especially if you'd like t o keep on t op of t he lat est in CSS news. Check out t hese feeds: ●

● ●

●

456 Berea St : www.456bereast reet .com / feed.xm l. Great t idbit s on CSS, accessibilit y and general best pract ices of Web design. And All That Malarkey: www.st uffandnonsense.co.uk/ at om .xm l. Fun, irreverent Web design info. Collylogic: ht t p: / / www.collylogic.com / index.php?/ weblog/ rss_2.0/ . Great com m ent ary on CSS, Web design, and t he Web in general. TJKDesign: www.t j kdesign.com / xm l/ TJKFeed.xm l. Lot s of good st uff, including t ut orials and deeply researched inform at ion on CSS.

Section C.10. CSS Software

C.10. CSS Software There are lot s of different ways t o creat e Cascading St yle Sheet s. Keeping it sim ple, you can st ick wit h t he free t ext edit ors t hat com e wit h Windows and Macint osh like Not epad or Text Edit . There are also CSS- only edit ors, as well as full- fledged Web page developm ent program s like Dream weaver t hat include CSS creat ion t ools. ●

CSS- Discuss list of CSS Edit ors: ht t p: / / css- discuss.incut io.com / ?page= CssEdit ors. A long list of m any different program s available for edit ing CSS.

C.10.1. Windows and Mac ●

●

St yle Mast er: www.west civ.com / st yle_m ast er/ product _info/ . This is a powerful CSS edit or wit h a long hist ory which includes m any t ools, including sim ple wizards t o get you st art ed, sam ple t em plat es, t ut orials, and a com plet e CSS guide. Dream weaver 8: www.adobe.com / dream weaver/ . Definit ely not j ust for CSS, t his prem ium Web developm ent t ool includes everyt hing you need t o build com plet e Web sit es. Visual edit ing t ools m ake it easier t o see t he effect of CSS on your Web pages as you work.

C.10.2. Windows Only ●

Top St yle: www.newsgat or.com / NGOLProduct .aspx?ProdI D= TopSt yle. The venerable CSS edit or t hat also let s you edit your HTML docum ent sa one- st op shop for Web page building. I ncludes m any t ools t o increase your product ivit y. There's also a free " lit e" version.

C.10.3. Mac Only ● ●

CSSEdit : www.m acrabbit .com / cssedit / . Sim ple, inexpensive CSS edit or. BBEdit : www.barebones.com / product s/ bbedit / . Not a CSS- edit or per se, BBEdit is a com plet e Webpage edit ing program . A slim m ed- down version, called Text - Wrangler, doesn't include as m any feat ures but is free.

Colophon

Colophon Philip Dangler was t he product ion edit or and proofreader for CSS: The Missing Manual. Dawn Mann wrot e t he index. Genevieve d'Ent rem ont and Marlowe Shaeffer provided qualit y cont rol. The cover of t his book is based on a series design by David Freedm an. Karen Mont gom ery produced t he cover layout wit h Adobe I nDesign CS using Adobe's Minion and Gill Sans font s. David Fut at o designed t he int erior layout , based on a series design by Phil Sim pson. This book was convert ed by Abby Fox t o Fram eMaker 5.5.6. The t ext font is Adobe Minion; t he heading font is Adobe Form at a Condensed; and t he code font is LucasFont 's TheSans Mono Condensed. The illust rat ions t hat appear in t he book were produced by Robert Rom ano and Jessam yn Read using Macrom edia FreeHand MX and Adobe Phot oshop CS.

Index

Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z]

SYMBOL

Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z] . (periods) !important declaration # (pound/hash symbols) (angle bracket) * (asterisks) as universal selectors + (plus sign) 3-pixel gap bug (Internet Explorer) 456BereaStreet.com HTML for tables Web browsers and form styling :active 2nd :after 2nd :before :first-child :first-letter 2nd :first-line 2nd :focus 2nd :hover 2nd buttons and images and Internet Explorer and 2nd :link :visited 2nd @import directive Internet Explorer bug @media directive

A

Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z] absolute paths absolute positioning 2nd 3rd 4th 5th ancestor relationships and 2nd columns and determining need for float property and resources stacking (z-index) and tutorial visibility property and absolute URLs accessibility adjacent sibling selectors aligning tables text alistapart.com 2nd liquid layouts all (media type) ancestor relationships (inheritance) 2nd 3rd 4th 5th 6th angle bracket (>) antix.co.uk Aslett attributes attribute selector cellspacing class 2nd ID id selectors src title

A

auto (overflow property keyword) auto margin bug (Internet Explorer)

B

Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z] background images adding to links adding to links (tutorial) 2nd background-image property 2nd 3rd 4th 5th links and tutorial URLs and fixing in place positioning 2nd 3rd shorthand (background property) styles and tutorial 2nd 3rd background property 2nd borders and buttons and floated elements and printing and tutorial 2nd background-attachment property 2nd Internet Explorer and shorthand background-color property 2nd 3rd background-position property 2nd 3rd keywords percentage values and precise values and preloading and tiled images and background-repeat property 2nd banners base text size 2nd blink (decorating text)

B

block-level elements 2nd 3rd 4th 5th block-link bug (Internet Explorer) bolding text border erase bug (Internet Explorer) border property 2nd 3rd 4th 5th collapsing borders images and img (image) tags and Internet Explorer and 2nd tables and tutorial underlining links and border-collapse property 2nd border-color property border-spacing property border-style property border-width property borderlines borders 2nd 3rd 4th 5th 6th 7th formatting Internet Explorer and padding and removing replacing with graphics bottom property bottom-based positioning Bowman box model block-level boxes 2nd bug (Internet Explorer) 2nd inline boxes resources brackets ([]) Braille (media type) bugs Internet Explorer 2nd 3rd 4th border erase box model 2nd 3rd 4th double-margin

B

guillotine italicized text placement resources Bullet Madness bullets buttons 2nd centering text on form buttons navigation buttons text as

C

Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z] caches calculating height/width capitalizing caption-side property captions cascading inheritance and 2nd link states and multiple styles and Show Cascade button (Dreamweaver) specificity 2nd 3rd 4th 5th tutorial 2nd Cederholm Celic cellspacing attribute centering bug (Internet Explorer) checkboxes child relationships (tags) child selectors list formatting and chrispederick.com circle bullets (lists) Clagnut.com class selectors 2nd 3rd 4th link styles and multiple pseudo-class 2nd rules for naming vs. ID selectors class styles 2nd 3rd clear property 2nd floated elements and

C

clip property collapse (border-collapse property value) collapsing color property 2nd 3rd 4th keywords 2nd Color Schemer coloring backgrounds colors 2nd columns adding to forms floated 2nd 3rd 4th full-height 2nd 3rd 4th multi-column layout (tutorial) 2nd 3rd 4th 5th 6th 7th styling tags for three-column layout 2nd width comments conditional (Internet Explorer) containing elements 2nd content 2nd 3rd 4th 5th 6th backgrounds/borders and content property 2nd contrast (text) Creative Commons CSS books CSS 3 (w3.org) help resources showcase sites 2nd CSS Cheat Sheet (PDF) CSS Styles Panel (Dreamweaver) 2nd 3rd 4th 5th CSS-Discuss CSS-Positioning CSSCreator.com 2nd CSSHOVER cssplay.co.uk CSSzengarden.com

C

Current Selection mode (Dreamweaver) cursor property

D

Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z] decimal values (RGB color notation) declarations declaration blocks 2nd descendent relationships (tags) descendent selectors 2nd 3rd 4th 5th 6th 7th 8th 9th grouping links with images and Design Time style sheets (Dreamweaver) directives @import 2nd 3rd 4th @media disc bullets (lists) display property 2nd layout and (Internet Explorer) vs. visibility property div (division) tag 2nd 3rd 4th 5th as containing element organizing style sheets with Document Type Definition (DTD) files document-relative paths 2nd double-margin bug (Internet Explorer) doxdesk.com Dreamweaver 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th 16th 17th 18th 19th cascading and Code View copied text creating styles in CSS property names in 2nd CSS Styles Panel 2nd deleting styles Design Time style sheets duplicating styles

D

external style sheets Library Properties pane renaming class styles styles 2nd 3rd 4th 5th 6th 7th troubleshooting styles drop caps drop shadows 2nd 3rd drop-down menus 2nd drops (floated elements) 2nd 3rd DTD files Duplicate CSS Rule window (Dreamweaver) dynamic menus

E

Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z] easy clearing method Edwards elastic layouts elements block-level 2nd 3rd 4th containing 2nd floated 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th 16th 17th 18th form (HTML) hiding for printing inline 2nd 3rd 4th nested positioning (tutorial) 2nd 3rd 4th 5th 6th 7th 8th 9th stacking embossed (media type) emphasizing text empty-cells property ems 2nd background-position property and buttons and text size exploding-boy.com external links highlighting (tutorial) external style sheets 2nd 3rd 4th 5th 6th 7th .css extension @import directive and 2nd Design Time and (Dreamweaver) Dreamweaver and 2nd linking to Web pages 2nd 3rd 4th placement of specifying media types for

E

F

Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z] fieldset tag Firefox adjusting text size background image positioning bug cache CSS validator floated text bug HTML validator padding and View Formatted Source Web Developer's Toolbar (extension) fixed (background-attachment property value) fixed positioning frames and 2nd Internet Explorer and 2nd 3rd fixed-width layouts creating from liquid min/max properties and float property 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th 16th 17th 18th 19th 20th 21st 22nd 23rd 24th 25th 26th 27th 28th absolute positioning and backgrounds/borders and drops 2nd keywords negative margins (tutorial) 2nd 3rd 4th 5th 6th 7th 8th source order and stopping (clear property) float-based layouts 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th elastic fixed-width 2nd Internet Explorer bugs 2nd 3rd 4th 5th liquid 2nd 3rd

F

troubleshooting floated elements 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th 16th 17th 18th 19th 20th 21st 22nd 23rd 24th 25th 26th 27th clearing 2nd 3rd columns 2nd 3rd 4th 5th containing 2nd 3rd 4th 5th height and source order and width within floats font property 2nd font-family property 2nd font-size property 2nd inheritance and 2nd font-style property 2nd font-variant property 2nd font-weight property 2nd 3rd fonts 2nd 3rd footers force reloading Web pages forms 2nd 3rd 4th 5th 6th formatting Safari browser and 2nd styling 2nd 3rd tutorial frames 2nd 3rd framesets framing images Free Vertical Menu Designs

G

Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z] generated content 2nd 3rd graphic bullets graphics 2nd 3rd 4th 5th 6th 7th 8th as links 2nd preloading Greek letters (numbered lists) group selectors 2nd grouping styles guillotine bug (Internet Explorer)

H

Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z] hacks CSSHOVER IE7 (selectors) Internet Explorer 2nd 3rd link-spacing bug layout property overflow: hidden property placement of zoom property handheld (media type) hanging indents headings Heerema height property 2nd 3rd Internet Explorer and max-/min-height properties hexadecimal color notation 2nd hidden (overflow property keyword) 2nd hiding elements (visibility property) horizontal navigation bars 2nd 3rd 4th 5th 6th tutorial 2nd horizontal placement (in positioning properties) HTML attributes col and colgroup tags color keywords doctype declarations for tables form tags framesets history of linking external style sheets

H

search engines and structuring text tags 2nd 3rd 4th 5th 6th 7th nested relationships span tag transitional version htmldog.com 2nd

I

Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z] icons ID selectors 2nd JavaScript and linking to specific parts of Web pages validating HTML and vs. class selectors IE Developer Toolbar IE7 (scripts) images 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th 16th 17th 18th 19th 20th 21st 22nd 23rd 24th 25th 26th 27th 28th 29th 30th :visited selector and background 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th free linked removing borders from tutorial 2nd 3rd 4th 5th 6th 7th img (image) tag 2nd padding/margins and tables and indenting text inherit keyword inheritance 2nd 3rd 4th 5th 6th 7th 8th 9th 10th directly applied styles and font size and 2nd limits of line-height property and proximity and specificity and style sheets and tutorial 2nd 3rd inline boxes 2nd inline elements 2nd 3rd

I

floated padding and Web browsers inline tags 2nd internal style sheets 2nd 3rd 4th 5th 6th 7th closing converting to external 2nd 3rd Internet Explorer !important and ' (single quotation marks) and :after selector and :hover selector and (non-link elements) border bug borders and bugs cache conditional comments CSS 3 link selectors and customized lists and double-margin bug fieldset tags and fixed positioning and 2nd hacks 2nd 3rd layout property and 2nd margins and max-/min-height/width properties and overflow and pixel measurements and pseudo-classes/elements and 2nd text sizing and 2nd 3rd zoom property and italicizing text Internet Explorer and

J

Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z] JavaScript changing Web site appearance with column positioning and creating pop-up tool tips with for striping tables ID selectors and Internet Explorer and jeffhowden.com justifying text

K

Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z] Kaliber10000 keywords background-position property border property clear property color 2nd float property inherit overflow property

L

Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z] layering elements Layout Gala layouts converting from liquid to fixed-width elastic free templates Internet Explorer bugs and 2nd pre-built properties 2nd three-column layout using CSS positioning for leading left (float property keyword) left property legend tag lengths 2nd letter-spacing property 2nd Library (Dreamweaver) line spacing line-height property 2nd line-through (decorating text) link-spacing bug (Internet Explorer) links 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th 16th 17th 18th 19th 20th 21st 22nd 23rd 24th 25th 26th 27th 28th 29th 30th 31st external graphics as navigation bars states styling 2nd tabs as underlining visited

L

liquid layouts List-O-Matic wizard list-style properties 2nd 3rd 4th 5th 6th 7th 8th List-U-Like CSS Generator lists bulleted 2nd 3rd 4th 5th formatting 2nd 3rd 4th numbered properties tutorials unordered

M

Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z] margin property 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th collapsing and 2nd floated inline elements and inline boxes and negative margins 2nd Opera browser and shorthand tutorial mat (simulated) max-height/width properties 2nd 3rd Maxdesign.com.au Media menu Dreamweaver media style sheets 2nd 3rd 4th and Internet Explorer media types media types menus drop-down pop-up min-height/width properties 2nd 3rd 4th Mollio.org monitor size Morgue File Mozilla multi-line link bug (Internet Explorer) multiple styles (cascading)

N

Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z] navigation 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th 16th 17th 18th 19th 20th 21st 22nd 23rd navigation bars 2nd borders and horizontal 2nd 3rd 4th 5th pop-up/drop-down menus and vertical 2nd navigation tabs 2nd 3rd tutorials negative margins 2nd 3rd 4th 5th 6th 7th double-margin bug (Internet Explorer) tutorial 2nd 3rd nested lists Netscape Navigator no-repeat (background-repeat property value) 2nd none (float property keyword) none value (display property)

O

Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z] oblique text Open Photo Open Source Web Design Opera browser padding property and projection media type and orphans property oswd.org outline property overflow property 2nd overflow: hidden property Web browsers and overlining overruling specificity

P

Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z] padding property 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th page-break properties 2nd paragraphs 2nd parent relationships (tags) paths 2nd document- and root-relative Pattern4u Pederick peek-a-boo bug (Internet Explorer) percentages background-position property and browser rounding margins/padding and RGB percentages (color) sizing text photo gallery (tutorial) 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th pixels sizing text Pixy method placement bug (Internet Explorer) plus sign (+) points (units of measurement) pop-ups menus messages positioning property 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th 16th 17th 18th 19th 20th 21st 22nd 23rd 24th 25th absolute positioning 2nd fixed positioning 2nd 3rd horizontal/vertical values in Internet Explorer bug and 2nd keywords

P

positioning strategies 2nd 3rd 4th 5th 6th 7th 8th 9th relative positioning tutorial positioniseverything.net 2nd pound symbols (#) preloading print (media type) print preview print style sheets 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th 16th backgrounds and links and page-break-before/after properties text styles and tutorial printing background images printing Web pages 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th 16th projection (media type) properties 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th background 2nd 3rd 4th 5th background-attachment background-color background-image 2nd 3rd background-position 2nd background-repeat border 2nd 3rd 4th 5th 6th 7th 8th 9th 10th border-collapse border-color bottom caption-side clear 2nd clip color 2nd 3rd 4th 5th content 2nd cursor display 2nd 3rd 4th 5th Dreamweaver names for (table) empty-cells float 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th 16th 17th 18th 19th 20th 21st 22nd 23rd 24th 25th 26th 27th

P

font 2nd font-family font-size 2nd 3rd font-style font-variant font-weight height 2nd inherited 2nd 3rd 4th 5th layout 2nd left letter-spacing 2nd line-height 2nd 3rd list 2nd list-style list-style-image list-style-position list-style-type 2nd margin 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th 16th 17th orphans outline overflow 2nd padding 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th page layout 2nd 3rd 4th 5th 6th 7th page-break position positioning 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th right table 2nd 3rd text 2nd 3rd 4th 5th text-align 2nd 3rd 4th text-decoration 2nd text-indent text-transform top vertical-align visibility 2nd white-space width 2nd 3rd word-spacing

P

z-index 2nd zoom 2nd 3rd 4th Properties pane (Dreamweaver) Property inspector (Dreamweaver) pseudo-class selectors 2nd 3rd 4th 5th :active :focus :hover 2nd 3rd 4th :link :visited 2nd Internet Explorer and specificity and pseudo-elements paragraph formatting and

Q

Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z] quirks mode 2nd

R

Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z] radio buttons red 2nd Reference panel (Dreamweaver) relative positioning 2nd 3rd 4th 5th 6th 7th 8th repetition (background images) RGB (red 2nd right (float property keyword) right property right-based positioning rollovers root-relative paths 2nd 3rd rows RSS feeds Rule Definition window (Dreamweaver) Rules pane (Dreamweaver) Rutter

S

Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z] Safari cache Web Inspector satzansatz.de screen (media type) scroll bars search engines 2nd Selectoracle selectors 2nd 3rd 4th 5th 6th 7th 8th 9th 10th :after 2nd :before :first-child :first-line :focus adjacent siblings advanced 2nd attribute 2nd child class 2nd 3rd 4th 5th 6th 7th descendent 2nd 3rd 4th 5th 6th 7th 8th 9th 10th group 2nd 3rd ID 2nd 3rd 4th inherited pseudo-class 2nd pseudo-elements specificity 2nd 3rd tag 2nd tutorial 2nd self-closing tags separate (border-collapse property value) showing hidden elements (visibility property) sibling relationships (tags)

S

sidebars rounding corners of 2nd 3rd 4th sIFR single quotation marks (') SitePoint.com sizing font Sliding Doors technique (tabs) small caps software Some Random Dude Son of Suckerfish (creating pop-up menus) source order search engines and spacing (text) span tag Dreamweaver and element positioning and specificity 2nd 3rd 4th breaking ties changing of pseudo-elements/class selectors overruling style sheets and speech (media type) Sperling.com square bullets (lists) 2nd Squidfingers stacking elements standards (HTML star html (* html) hack states 2nd 3rd static positioning stuffandnonsense.co.uk style (border property) Style Master style sheets 2nd 3rd 4th 5th 6th Design Time (Dreamweaver) external 2nd 3rd 4th 5th 6th 7th 8th

S

external vs. internal 2nd inheritance and internal 2nd 3rd converting to external media style sheets 2nd multiple 2nd organizing root-relative paths and styles 2nd 3rd 4th 5th 6th 7th 8th comments conflicts between 2nd determining which apply Dreamweaver and 2nd 3rd 4th editing in Dreamweaver 2nd 3rd 4th 5th 6th 7th formatting hybrid inherited 2nd 3rd 4th 5th inline 2nd links 2nd 3rd 4th 5th 6th 7th 8th naming guidelines printer-only properties selectors 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th 16th 17th 18th tutorial 2nd 3rd Styles panel (Dreamweaver)

T

Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z] table-layout property tables 2nd 3rd 4th 5th 6th alignment borders 2nd images and padding and properties styling 2nd styling (tutorial) 2nd tabs navigation 2nd tags block-level 2nd div (division) fieldset HTML 2nd 3rd 4th 5th 6th 7th 8th inheritance and 2nd 3rd 4th 5th 6th 7th inline 2nd legend nested 2nd 3rd 4th 5th 6th selectors span 2nd 3rd XHTML tanfa.co.uk tantek.com text 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th 16th 17th 18th 19th 20th 21st 22nd 23rd 24th 25th 26th 27th 28th 29th aligning as buttons base text size border property contrast

T

decorating first lines/letters (paragraphs) font properties 2nd 3rd 4th 5th fonts 2nd 3rd formatting (tutorial) 2nd 3rd 4th headings lists 2nd 3rd 4th 5th paragraphs 2nd printing and properties 2nd sizing 2nd 3rd 4th small caps spacing (letter and word) text-align property 2nd 3rd text-decoration property 2nd text-indent property 2nd 3rd text-transform property 2nd tiling images free patterns title attribute tooltips top property tty (teletype) media type tutorials background images 2nd 3rd 4th 5th 6th 7th 8th 9th backgrounds 2nd 3rd borders 2nd 3rd 4th 5th 6th CSS (westciv.com) forms (styling) images (photo gallery) 2nd 3rd 4th 5th 6th 7th inheritance 2nd 3rd internal style sheets links (styling) 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th lists margins 2nd 3rd 4th 5th navigation positioning page elements 2nd 3rd 4th 5th 6th 7th 8th 9th 10th selectors 2nd styles 2nd 3rd 4th 5th 6th

T

tables (styling) 2nd text 2nd 3rd 4th 5th 6th 7th 8th tv (media type)

Table of Contents

CSS: The Missing Manual By David Sawyer McFarland ............................................... Publisher: O'Re illy Pub Dat e: Au gu st 2 0 0 6 Print I SBN- 10: 0 - 5 9 6 - 5 2 6 8 7 - 3 Print I SBN- 13: 9 7 8 - 0 - 5 9 - 6 5 2 6 8 7 - 0 Pages: 4 9 4

Table of Cont ent s | I ndex

Copyright The Missing Credits Introduction Part I: CSS Basics Chapter 1. Rethinking HTML for CSS Section 1.1. HTML: Past and Present Section 1.2. Writing HTML for CSS Section 1.3. The Importance of the Doctype Chapter 2. Creating Styles and Style Sheets Section 2.1. Anatomy of a Style Section 2.2. Understanding Style Sheets Section 2.3. Internal Style Sheets Section 2.4. External Style Sheets Section 2.5. Tutorial: Creating Your First Styles Chapter 3. Selector Basics: Identifying What to Style Section 3.1. Tag Selectors: Page-Wide Styling Section 3.2. Class Selectors: Pinpoint Control Section 3.3. ID Selectors: Specific Page Elements Section 3.4. Styling Tags Within Tags Section 3.5. Styling Groups of Tags Section 3.6. Pseudo-Classes and Pseudo-Elements Section 3.7. Advanced Selectors Section 3.8. Tutorial: Selector Sampler Chapter 4. Saving Time with Inheritance Section 4.1. What Is Inheritance? Section 4.2. How Inheritance Streamlines Style Sheets

Table of Contents

Section 4.3. The Limits of Inheritance Section 4.4. Tutorial: Inheritance Chapter 5. Managing Multiple Styles: The Cascade Section 5.1. How Styles Cascade Section 5.2. Specificity: Which Style Wins Section 5.3. Controlling the Cascade Section 5.4. Tutorial: The Cascade in Action Part II: Applied CSS Chapter 6. Formatting Text Section 6.1. Formatting Text Section 6.2. Changing Font Size Section 6.3. Formatting Words and Letters Section 6.4. Formatting Entire Paragraphs Section 6.5. Styling Lists Section 6.6. Tutorial: Text Formatting in Action Chapter 7. Margins, Padding, and Borders Section 7.1. Understanding the Box Model Section 7.2. Control Space with Margins and Padding Section 7.3. Adding Borders Section 7.4. Coloring the Background Section 7.5. Determining Height and Width Section 7.6. Wrap Content with Floating Elements Section 7.7. Tutorial: Margins, Backgrounds, and Borders Chapter 8. Adding Graphics to Web Pages Section 8.1. CSS and the Tag Section 8.2. Background Images Section 8.3. Controlling Repetition Section 8.4. Positioning a Background Image Section 8.5. Using Background Property Shorthand Section 8.6. Tutorial: Creating a Photo Gallery Section 8.7. Tutorial: Using Background Images Chapter 9. Sprucing Up Your Site's Navigation Section 9.1. Selecting Which Links to Style Section 9.2. Styling Links Section 9.3. Building Navigation Bars Section 9.4. Advanced Link Techniques Section 9.5. Tutorial: Styling Links

Table of Contents

Chapter 10. Formatting Tables and Forms Section 10.1. Using Tables the Right Way Section 10.2. Styling Tables Section 10.3. Styling Forms Section 10.4. Tutorial: Styling a Table Section 10.5. Tutorial: Styling a Form Part III: CSS Page Layout Chapter 11. Building Float-Based Layouts Section 11.1. How CSS Layout Works Section 11.2. Types of Web Page Layouts Section 11.3. Float Layout Basics Section 11.4. Applying Floats to Your Layouts Section 11.5. Overcoming Float Problems Section 11.6. Handling Internet Explorer Bugs Section 11.7. Tutorial: Multiple Column Layouts Section 11.8. Tutorial: Negative Margin Layout Chapter 12. Positioning Elements on a Web Page Section 12.1. How Positioning Properties Work Section 12.2. Powerful Positioning Strategies Section 12.3. Tutorial: Positioning Page Elements Part IV: Advanced CSS Chapter 13. CSS for the Printed Page Section 13.1. How Media Style Sheets Work Section 13.2. How to Add Media Style Sheets Section 13.3. Creating Print Style Sheets Section 13.4. Tutorial: Building a Print Style Sheet Chapter 14. Improving Your CSS Habits Section 14.1. Adding Comments Section 14.2. Organizing Styles and Style Sheets Section 14.3. Eliminating Browser Style Interference Section 14.4. Using Descendent Selectors Section 14.5. Managing Internet Explorer Hacks Part V: Appendixes Appendix A. CSS Property Reference Section A.1. CSS Values Section A.2. Text Properties Section A.3. List Properties

Table of Contents

Section A.4. Padding, Borders, and Margins Section A.5. Backgrounds Section A.6. Page Layout Properties Section A.7. Table Properties Section A.8. Miscellaneous Properties Appendix B. CSS in Dreamweaver 8 Section B.1. Creating Styles Section B.2. Adding Styles to Web Pages Section B.3. Editing Styles Section B.4. Managing Styles Section B.5. Examining Your CSS in the Styles Panel Section B.6. CSS Properties Appendix C. CSS Resources Section C.1. References Section C.2. CSS Help Section C.3. CSS Navigation Section C.4. CSS and Graphics Section C.5. CSS Layout Section C.6. Browser Bugs Section C.7. Showcase Sites Section C.8. CSS Books Section C.9. Must-Have RSS Feeds Section C.10. CSS Software Colophon Index

U

Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z] Ultimate Drop-down Menu (udm4.com) underlining links unordered lists 2nd 3rd URLs @import directive and absolute

V

Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z] validating CSS HTML 2nd values 2nd 3rd 4th 5th 6th colors keywords Vertexwerks.com vertical navigation bars 2nd tutorial vertical placement (in positioning properties) vertical-align property 2nd viewport visibility property 2nd visible (overflow property keyword) visited links

W

Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z] W3C 2nd CSS 2.1 specifications w\idth property Web browsers box model and cursor property and fonts and form styling and 2nd inline element positioning and previewing Web pages quirks mode rounding percentages Web Developer's Toolbar Web pages adding graphics to 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th 16th 17th 18th 19th 20th 21st 22nd 23rd 24th 25th 26th designs (pre-built) printing 2nd 3rd 4th 5th 6th WesternCiv (Complete CSS Guide) white space white-space property width property 2nd 3rd columns and floated block-level elements and max-/min-width properties tables and word spacing word-spacing property 2nd wrapping content 2nd 3rd

X

Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z] x-axis XSLT fragments (Dreamweaver) XyleScope

Y

Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z] y-axis YADM (Yet Another Dynamic Menu)

Z

Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z] z-index property 2nd zoom property 2nd Internet Explorer and 2nd
Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree Cookies

and create a class style to format that cell. 10.2.3. Creating Borders The CSS border propert y ( Sect ion 7.3) works pret t y m uch t he sam e wit h t ables as wit h ot her elem ent s, but you need t o keep a couple of t hings in m ind. First , applying a border t o a st yle t hat form at s t he < t able> t ag out lines j ust t he t able, not any of t he individual cells. Second, applying borders t o cells ( t d { border: 1px solid black; } ) leaves you wit h a visual gap bet ween cells, as shown in Figure 10- 5, t op. To gain cont rol of how borders appear, you need t o underst and t he < t able> t ag's cellspacing at t ribut e and t he CSS border- collapse propert y. ● ● Con t r ollin g t h e spa ce be t w e e n t a ble ce lls. Unless inst ruct ed ot herwise, browsers separat e t able cells by a couple of pixels. This gap's really not iceable when you apply a border t o t able cells. CSS 2.1 gives you t he border- spacing propert y t o cont rol t his space, but since I nt ernet Explorer ( including I E 7) doesn't support border- spacing, you're bet t er off using t he < t able> t ag's cellspacing at t ribut e. Here's t he HTML t o insert 10 pixels of space bet ween each cell: < t able cellspacing= " 10px" > . ( Set t ing t he value t o 0 elim inat es t he space ent irely, but if you want t o do t hat , t hen use t he CSS border- collapse propert y, discussed next .) Elim in a t in g dou ble bor de r s. Even if you elim inat e t he cell spacing of a t able, borders applied t o t able cells double up. That is, t he bot t om border of one cell adds t o t he t op border of t he underhanging cell, creat ing a line t hat 's t wice as t hick as t he border set t ing ( Figure 10- 5, m iddle) . The best way t o elim inat e t his ( and elim inat e cell- spacing at t he sam e t im e) is t o use t he border- collapse propert y. I t accept s t wo valuesseparat e and collapse. The separat e opt ion is norm ally how t ables are displayed, wit h t he cell spaces and doubled borders. Collapsing a t able's borders elim inat es t he gaps and doubled borders ( Figure 10- 5, bot t om ) . Apply t he collapse value t o a st yle form at t ing a t able, like so: Section 10.2. Styling Tables table { border-collapse: collapse; } Note: HTML tags that are used to build tables include attributes that accomplish a lot of the same tasks as CSS. The border attribute can add a border to the table and each cell. In general, you should avoid these attributes: CSS can do a much better job with less code. 10.2.4. Styling Rows and Columns Adding st ripes, like t he ones in Figure 10- 6, is a com m on t able design t echnique. By alt ernat ing t he appearance of every ot her row of dat a, you m ake it easier for people t o spot t he dat a in each row. Unfort unat ely, CSS ( at least at t his point ) doesn't offer a way t o say, " Hey browser, m ake every ot her row look t his way! " The basic solut ion's t o apply a class ( like < t r class= " odd" > ) t o every ot her row, and t hen creat e a st yle t o form at t hat row: tr.odd { background-color: red; } Figu r e 1 0 - 5 . Br ow se r s n or m a lly in se r t spa ce be t w e e n e a ch t a ble ce ll. ( You pr oba bly w on 't n ot ice t h is e x t r a spa ce u n le ss you 've a dde d a bor de r , a s sh ow n h e r e , a t t op.) I f you u se t h e < t a ble > t a g's ce llspa cin g a t t r ibu t e t o r e m ove t h e e x t r a spa ce , you 'r e le ft w it h dou ble bor de r lin e s w h e r e a dj oin in g bor de r s t ou ch ( m iddle ) . Th e bor de r - colla pse pr ope r t y solve s bot h dile m m a s ( bot t om ) . Section 10.2. Styling Tables You're not lim it ed t o colors eit her. You can use background im ages ( see Sect ion 8.2) t o creat e m ore sophist icat ed looks like t he slight gradat ion in t he t able header row of Figure 10- 6. ( You'll see a sim ilar exam ple of t his in t he t ut orial in Sect ion 10.4.) You can use a descendent select or t o t arget cells in t hat row as well. This t echnique's great for when you st yle all of t he cells in one colum n wit h t heir own class and look: < t d class= " price" > , for exam ple. To creat e a unique look for t hat cell when it appears in an odd row, creat e a st yle wit h t his select or: t r.odd t d.price. Tip: For a quicker, JavaScript-driven approach to striping tables, check out www.alistapart.com/articles/zebratables/ . Form at t ing colum ns is a bit t rickier. HTML provides t he < colgroup> and < col> t ags t o indicat e groups of colum ns and individual colum ns, respect ively. You include one < col> t ag for each colum n in t he t able and can ident ify t hem wit h eit her a class or I D. ( See t he HTML code in Sect ion 10.1.) Only t wo set s of propert ies work on t hese t ags: widt h and t he background propert ies ( background- color, background- im age, and so on) . But t hey can com e in m ight y handy. When you want t o set t he widt h of all of t he rows in a colum n, you can skip any HTML at t ribut es and j ust st yle t he colum ns using t he < col> t ag: col#price { width: 200px; } Figu r e 1 0 - 6 . Alt e r n a t in g t h e ba ck gr ou n d color fr om r ow t o r ow in a t a ble m a k e s it e a sie r t o qu ick ly ide n t ify t h e da t a for e a ch r ow . Section 10.2. Styling Tables Of course, don't forget t o add a class or I D t o t he < col> t ag, like # price in t his exam ple. Likewise, t he < colgroup> t ag groups several colum ns t oget her. When you set a widt h for t hat t ag, a Web browser aut om at ically applies t he specified widt h t o each colum n in t he group. A t able displaying airline schedules m ight have several colum ns displaying t he different dat es a plane t ravels from Bost on t o Chicago. You can use < colgroup> t o organize t hose colum ns and apply an I D t o t he t ag t o ident ify it : < colgroup id= " dat es" > . Then, t o set each dat e colum n t o a set widt h of 10em s, you can creat e t his st yle: colgroup#dates{ width: 10em; } Even t hough t he widt h propert y here applies t o t he < colgroup> t ag, a browser act ually applies t he value10em t o each colum n in t he group. To highlight a colum n, you can use t he background propert ies: col#price { background-color: #F33; } Keep in m ind, however, t hat backgrounds for colum ns appear under t able cells, so if you set a background color or im age for < t d> or < t h> Section 10.2. Styling Tables t ags, t hen a colum n's background won't be visible. Section 10.3. Styling Forms 10.3. Styling Forms Web form s are t he prim ary way visit ors int eract wit h a Web sit e. By supplying inform at ion on a form , you can j oin a m ailing list , search a dat abase of product s, updat e your personal profile on MySpace, or order t hat St ar Wars collect or's plat e you've had your eye on. There's no reason your form s need t o look like all t he ot hers on t he I nt ernet . Wit h a lit t le CSS, you can st yle form fields t o share t he sam e form at t ing as ot her sit e elem ent s like font s, background colors, and m argins. There aren't any CSS propert ies specific t o form s, but you can apply j ust about any propert y in t his book t o a form elem ent . The result s, however, can be m ixed ( see Figure 10- 7) . Browser support for st yling form elem ent s varies great ly. Safari 2 and earlier lim it s st yling t o only a few form elem ent s like t ext fields and t he < fieldset > and < legend> t ags. I t won't let you change t he look of but t ons, checkboxes, radio but t ons, or pull- down m enus. Even I nt ernet Explorer and Firefox m ay display t he sam e form elem ent s different ly. The next sect ion t ells you which propert ies work best wit h which form t ags, and also list s which browsers int erpret t hem properly. UP TO SPEED Staying True to Form Even wit hout t he varying browser support for CSS- st yled form s ( Sect ion 10.3.1) , t here are good reasons t o t read light ly when alt ering t he look of universally recognized int erface elem ent s like Subm it but t ons and pull- down m enus. Most Web surfers are already very fam iliar wit h how form s look and work. The generic look of a Subm it but t on's t he sam e from sit e t o sit e. When people see it , t hey inst ant ly know what t hat but t on does and how t o use it . I f you alt er t he look of a form t oo m uch, you m ay m ake it harder for visit ors t o fill out your form correct ly. Adding a dot t ed border t o a form field can t urn an easily recognizable t ext field int o an easily skipped box. ( See t he exam ples at bot t om right and bot t om cent er of Figure 10- 7.) I f t hat t ext box is int ended t o capt ure em ail addresses for your newslet t er, you m ay lose a few visit ors who skip right over it . At t he very least , m ake sure people can recognize t he form s on your sit es as form s. 10.3.1. HTML Form Elements A variet y of HTML t ags help you build form s. You can form at som e of t hem ( like t ext fields) m ore successfully t han ot hers ( subm it but t ons.) Here are a few com m on form t ags and t he t ypes of propert ies t hey get along wit h: ● Fie ldse t . The < fieldset > t ag groups relat ed form quest ions. Most browsers do a good j ob of displaying background colors, background im ages, and borders for t his t ag. However, I nt ernet Explorer let s t he background flow up and over t he t op line of t he fieldset . ( Look at t he t op of t he m iddle im age in Figure 10- 7, left colum n.) Padding places space from t he edges of t he fieldset t o t he cont ent inside it . ( Alt hough I nt ernet Explorer unfort unat ely ignores t op padding, you can sim ulat e it by adding a t op m argin t o t he first elem ent inside t he fieldset .) Tip: Matt Heerema has found a way to prevent Internet Explorer from adding a background above a fieldset's top borderline. Read about it at www. mattheerema.com/archive/getting-fieldset-backgrounds-and-legends-to-behave-in-ie . ● ● ● ● Le ge n d. The < legend> t ag follows t he HTML for t he < fieldset > t ag and provides a label for t he group of fields. The legend appears vert ically cent ered on t he t op borderline of a fieldset . I f t he form elem ent s for collect ing a shipping address appear inside t he fieldset , you m ight add a legend like t his: < legend> Shipping Address< / legend> . You can use CSS t o change t he < legend> t ag's font propert ies, add background colors and im ages, and add your own borders. Te x t fie lds. The < input t ype= " t ext " > ( < input t ype= " t ext " / > in XHTML) , < input t ype= " password" > ( < input t ype= " password" / > ) and t he < t ext area> t ags creat e t ext boxes on a form . These t ags give you t he m ost consist ent crossbrowser CSS cont rol. You can change t he font size, font fam ily, color, and ot her t ext propert ies for t ext boxes, as well as add borders and background colors. I E, Firefox, and Opera also let you add background im ages t o t ext boxes; Safari 2.0 doesn't . You can set t he widt h of t hese fields using t he CSS widt h propert y. However, only t he < t ext area> t ag obeys t he height propert y. Bu t t on s. Form but t onslike < input t ype= " subm it " > ( < input t ype= " subm it " / > ) let your visit ors subm it a form , reset it s cont ent s, or set off som e ot her act ion t o occur. While Safari 2.0 and earlier doesn't recognize form at t ing of t hese elem ent s, ot her browsers let you go wild wit h t ext form at t ing, borders, and backgrounds. You can also align t he but t on's t ext t o left , m iddle, or right using t he t ext - align propert y ( Sect ion 6.4.1.2) . D r op- dow n m e n u s. Drop- down m enus creat ed by t he < select > t ag also give you a fair am ount of st yling cont rol. Safari 2.0 lim it s you t o font fam ily, color, and size, while m ost ot her browsers also let you set background color, im age, and borders. Figu r e 1 0 - 7 . Br ow se r su ppor t for st ylin g for m fie lds va r ie s. Sa fa r i 2 .0 ( r igh t ) h a s t h e st r on ge st Section 10.3. Styling Forms " k e e p you r h a n ds off m y u se r in t e r fa ce " policy. I n t e r n e t Ex plor e r ( le ft ) a n d Fir e fox ( ce n t e r ) a r e m or e t ole r a n t , bu t t h e r e a r e sign ifica n t diffe r e n ce s be t w e e n t h e m . I n t e r n e t Ex plor e r a pplie s ba ck gr ou n d color s a n d bor de r s t o ch e ck box e s a n d r a dio bu t t on s, w h ile Fir e fox doe sn 't . Th e be st you ca n do is de sign you r for m s ca r e fu lly a n d don 't e x pe ct t h e m t o look t h e sa m e on e ve r y br ow se r . Note: For more on the wide variety of browser results you get when applying CSS to form elements, visit www.456bereastreet.com/archive/200409/ styling_form_controls/ and www.456bereastreet.com/archive/200410/styling_even_more_form_controls/. Section 10.3. Styling Forms ● Ch e ck box e s a n d r a dio bu t t on s. Most browsers don't allow form at t ing of t hese elem ent s. Opera, however, let s you set a background color t hat appears inside t he box or but t on. I nt ernet Explorer adds a background color around t he box or but t on. Because browsers vary widely in how t hey t reat t hese elem ent s, it 's best t o leave t hem alone. POWER USERS' CLINIC Attribute: The Selector of the Future When it com es t o st yling form s, t ag st yles j ust don't cut t he m ust ard. Aft er all, t ext boxes, radio but t ons, checkboxes, password fields, and but t ons all share t he sam e HTML t ag< input > . While a widt h of 200 pixels m akes sense for a t ext box, you probably don't want your checkboxes t o be t hat big, so you can't use t he < input > t ag t o form at widt h. For now, t he m ost reliable way of form at t ing j ust t ext fields would be t o add a class nam e t o each t ext fieldlike < input t ype= " t ext " class= " t ext field" nam e= " em ail" / > and t hen use t he class st yle t o st yle it . Before long, you'll have a m ore advanced CSS select ort he at t ribut e select or. An at t ribut e select or t arget s an HTML t ag based on one of t he t ag's at t ribut es. The t ype at t ribut e is responsible for det erm ining what kind of form elem ent t he < input > t ag produces. The t ype value for a form t ext field is t ext . To creat e a st yle t hat m akes t he background color of all single- line t ext fields blue, you'd creat e t his select or and st yle: input[type="text"] { background-color: blue; } Changing t ext in t he above exam ple t o subm it creat es a st yle for subm it but t ons only, and so on. Since I nt ernet Explorer 7, Firefox, Safari, and Opera already underst and at t ribut e select ors, it won't be long before you can st art using t hem full force. They're not j ust for form elem ent s eit her. You can use an at t ribut e select or t o st yle any t ag wit h a part icular at t ribut e. Here's t he select or for st yling links t hat point t o ht t p: / / www.cosm ofarm er.com / : a[ href= " ht t p: / / www.cosm ofarm er.com " ] . CSS 3 prom ises even m ore elaborat e at t ribut e select ors, including t he abilit y t o select at t ribut es t hat st art wit h a part icular value ( like ht t p: / / ) or which end wit h a part icular value ( like .j pg or .pdf) . 10.3.2. Laying Out Forms Using CSS All it t akes t o creat e a form is adding a bunch of labels and ot her form elem ent s t o a Web page. Visually, t hough, you m ay end up wit h a chaot ic m ess ( see Figure 10- 8, left ) . Form s usually look best when t he quest ions and form fields are organized int o colum ns ( Figure 10- 8, right ) . Figu r e 1 0 - 8 . Th e diffe r e n t sh a pe s a n d size s of t e x t box e s, r a dio bu t t on s, a n d ot h e r for m obj e ct s don 't n a t u r a lly a lign w e ll w it h t e x t , oft e n ca u sin g a n u n ga in ly zigza g pa t t e r n . Th is for m isn 't j u st u gly, it 's h a r d t o r e a d ( le ft ) . Th e solu t ion 's t o or ga n ize you r for m s in t o colu m n s ( r igh t ) , u sin g e it h e r a n H TM L t a ble or CSS st yle s. Section 10.3. Styling Forms You can achieve t his effect in a couple of ways. The easiest approach is wit h an HTML t able. Alt hough form labels and fields aren't st rict ly t able dat a, t hey lend t hem selves beaut ifully t o a row/ colum n form at . Just put your labels ( " First Nam e," " Phone Num ber," and so on) in one colum n, and form fields in a second colum n. Using CSS, you can also creat e a t wo- colum n form like Figure 10- 8 ( wit h t he added benefit of less HTML code.) Here's t he basic approach: 1. W r a p e a ch la be l in a t a g. The obvious choice for a t ag is < label> , since it 's designed t o ident ify form labels. But you can't always use < label> t ags for all labels. Radio but t ons usually have a quest ion like " What 's your favorit e color?" followed by separat e < label> t ags for each but t on. So what t ag do you use for t he quest ion? I n t his case, you m ust resort t o wrapping t he quest ion in a < span> t ag: < span> What 's your favorit e color?< / span> . Then add a class t o each of t hese t ags: < span class= " label" > . Note: Visit www.htmldog.com/guides/htmladvanced/forms/ for a quick overview on the tag. 2. Floa t a n d se t a w idt h for t h e la be ls. The secret t o t his t echnique lies in creat ing a st yle t hat float s t he labels t o t he left and set s a widt h for t hem . The widt h value should provide enough space t o accom m odat e t he ent ire label on one line if possible. You can creat e a class st yle t hat looks som et hing like t his: .label { float: left; Section 10.3. Styling Forms width: 20em; } The widt h and float t urn t he labels int o lit t le evenly- sized blocks and let t he cont ent t hat followst he form fieldwrap on t he right side of t he label. 3. Adj u st t h e st yle . Just a couple m ore enhancem ent s com plet e t he j ob. You want t o align t he label t ext t o t he right , so each label appears next t o each form field. Also, adding a clear: left propert y clears t he float s ( Sect ion 7.6) , so t hat t he labels fall one below t he ot her inst ead of wrapping cont inuously. Finally, by adding a lit t le bit of right m argin, you can creat e a nice gut t er of whit e space bet ween t he labels and form fields. .label { float: left; width: 20em; text-align: right; clear: left; margin-right; 15px; } At t his point , you've got yourself a sim ple, neat form . You can m ake ot her enhancem ent s if you wish, like m aking t he labels bold and a different color. The t ut orial t hat st art s in Sect ion 10.1 provides a st ep- by- st ep exam ple of t his t echnique. Note: For a sophisticated demonstration of an all-CSS form layout, visit http://jeffhowden.com/code/css/forms/ . Section 10.4. Tutorial: Styling a Table 10.4. Tutorial: Styling a Table HTML is great for building t ables, but you need CSS t o give t hem st yle. As you can see in Sect ion 10.1, it t akes quit e a bit of HTML t o const ruct a sim ple t able. Lucky for you, t his book com es wit h a prebuilt HTML t able for you t o pract ice your CSS on. I n t his t ut orial, you'll form at t he t able's rows, colum ns, and cells, and give it an at t ract ive font and background color. To get st art ed, download t he t ut orial files locat ed on t his book's com panion Web sit e at www.sawm ac.com / css/ . Click t he t ut orial link and download t he files. All t he files are enclosed in a ZI P archive, so you need t o unzip t hem first . ( Go t o t he Web sit e for det ailed inst ruct ions.) The t able folder. files for t his t ut orial are in t he chapt er_10 1. La u n ch a W e b br ow se r a n d ope n t h e file ch a pt e r _ 1 0 t a ble t a ble .h t m l. This Cosm oFarm er.com page cont ains a sim ple HTML t able t hat rat es t his season's indoor lawn m owers. The t able has a capt ion, a row of t able headers, and eight rows of dat a cont ained in t able cells ( Figure 10- 9) . Figu r e 1 0 - 9 . For m a t t in g a t a ble w it h bor de r s, ba ck gr ou n d color s, a n d ot h e r CSS pr ope r t ie s n ot on ly m a k e s a dr a b H TM L t a ble ( t op) look gr e a t , bu t a lso m a k e s t h e t a ble 's da t a e a sie r t o r e a d ( bot t om ) . 2. Ope n t a ble .h t m l in a t e x t e dit or . You'll st art by creat ing a st yle t hat set s t he t able's widt h and t ext font . Section 10.4. Tutorial: Styling a Table Note: There are already a couple of external style sheets attached to this page, but you'll add your new styles to an internal style sheet. 3. Click be t w e e n t h e ope n in g a n d closin g < st yle > t a gs, a n d t h e n a dd t h e follow in g st yle : table { width: 100%; font-family: "Century Gothic", "Gill Sans", Arial, sans-serif; } Unless you set t he widt h of a t able, it grows and shrinks t o fit t he size of t he cont ent inside it . I n t his case, you've set a 100 percent widt h, so t he t able st ret ches t o fit t he ent ire widt h of it s cont aining < div> . ( I n t his case, it 's t he area of t he page cont aining t he headline " Feat ure: I ndoor Mower Roundup" and t he t able it self.) Set t ing t he font fam ily in t he < t able> uses inherit ance t o give all of t he t ags inside t he t able t he sam e font < capt ion> , t able headers ( < t h> ) , t able cells ( < t d> ) , and so on. Next you'll st yle t he t able's capt ion. 4. Add a n ot h e r st yle be low t h e t a ble st yle you j u st cr e a t e d: caption { text-align: right; font-size: .75em; } A < capt ion> t ag indicat es what a t able is about . I n t his case, it shouldn't be t he focus of at t ent ion, so you've shrunk t he t ext and m oved it t o t he right edge, out of t he way. When you read inform at ion across a t able row, it 's easy t o lose t rack of which row you're looking at . Good visual guides are essent ial. Adding borders around t he cells, which you'll do next , visually delineat es t he inform at ion. 5. Add t h e follow in g gr ou p st yle t o t h e in t e r n a l st yle sh e e t : td,th { font-size: .8em; border: 1px solid #73afb7; } This group select or form at s t he t able header ( < t h> ) and t able cell ( < t d> ) t ags wit h sm aller t ype and draws a border around each header and each cell. Browsers norm ally insert space bet ween each cell, so at t his point t here are sm all gaps bet ween t he borders ( Figure 10- 10, circled) . Bet ween t he gaps and t he borders, t he whole t able looks t oo boxy. You'll fix t hat next . 6. Add t h e bor de r - colla pse pr ope r t y t o t h e t a ble st yle you cr e a t e d in st e p 3 so t h a t it look s lik e t h is: table { width: 100%; font-family: "Century Gothic", "Gill Sans", Arial, sans-serif; border-collapse: collapse; } The border- collapse propert y rem oves t he spacing bet ween cells. I t also m erges borders t hat t ouch, which prevent s t hick, unat t ract ive borders. Wit hout border- collapse, t he bot t om border of a t able header and t he t op border of t he t able cell would double up t o m ake a 2pixel border. I f you preview t he t able now, you'll see t he dat a's bet t er organized visually, but t he inform at ion in each cell looks a lit t le cram ped. Add som e padding t o fix t hat . Section 10.4. Tutorial: Styling a Table 7. Add pa ddin g t o t h e gr ou p se le ct or you cr e a t e d in st e p 5 : td,th { border: 1px solid #73afb7; padding: 3px 5px 2px 5px; font-size: .8em; } While t he t op, t able- header row st ands out because of it s boldface t ext , t here are a few t hings you can do t o m ake it st and out even m ore and approve it s appearance. 8. Cr e a t e a n e w st yle be low t h e t d, t h st yle for for m a t t in g j u st t a ble h e a d ce lls: th { text-align: left; border-color: #14556b; } This st yle's a perfect exam ple of effect ive cascading. The group select or t d, t h defines com m on form at t ing propert ies bet ween t he t wo t ypes of cells. By int roducing t his t h- only st yle, you can furt her t weak t he look of j ust t he t able headers. Not ice t hat t he basic border propert ies, such as line st yle and t hickness, com e from t he group select or, but t he t h st yle overrides t he border color. That 's why you m ust put t his st yle aft er t he t d,t h st yle in your code. Ot herwise, t his new border color has no effect . The t able headers st ill don't have enough oom ph, and t he t able seem s t o recede int o t he background of t he page. A background graphic can provide t he necessary boost . Figu r e 1 0 - 1 0 . A br ow se r 's n or m a l displa y of a t a ble in se r t s spa ce be t w e e n e a ch ce ll ( t op) . I t a lso le t s bor de r s dou ble u p w h e r e ce lls t ou ch . Se t t in g t h e bor de r - colla pse pr ope r t y t o colla pse solve s bot h pr oble m s ( bot t om ) . Section 10.4. Tutorial: Styling a Table 9. Edit t h e t h st yle by a ddin g a ba ck gr ou n d im a ge , a n d ch a n gin g t h e t e x t color : th { background: url(images/th_bg.png) no-repeat left top; color: white; text-align: left; border-color: #14556b; } I n t his case, t he graphic int roduces a subt le t op- down gradient while a whit e borderline at t he t op and left edges of t he im age cont rast s nicely wit h t he darker t op and left borders around t he cells, giving t he cells a 3- D look. Tip: By the way, you could just as easily set the background color of these cells to achieve a similar effect. When t ables have lot s of dat a st uffed int o m any rows and colum ns, it 's som et im es hard t o quickly ident ify which dat a belongs t o each row. One solut ion designers use is t o alt ernat e t he color of every ot her row in a t able. You creat e t his effect wit h a class st yle t hat you apply t o every ot her t able row. 10. Add on e la st st yle t o t h e W e b pa ge 's in t e r n a l st yle sh e e t : tr.alt td { background: url(images/td_bg.png) no-repeat left top; } This select or places a background im age int o every t able cell ( < t d> t ag) , but only when t hat < t d> t ag is nest ed inside a t able row ( < t r> t ag) wit h a class of alt applied t o it . So, next you have t o apply t he class t o every ot her row for t his st yle t o have any effect . 11. I n t h e pa ge 's H TM L, look for t h e < t r > t a g t h a t pr e ce de s t h e < t d> con t a in in g " Sa m pson D e lu x e Apa r t m e n t M ow e r ." Add cla ss= " a lt " t o t h a t < t r > t a g, lik e so:

Sampson Deluxe Apartment Mower