Core CSS: Part I. Core CSS: Part I Get More Refcardz! Visit refcardz.com #19. By Molly E. Holzschlag. Get More Refcardz (They re free!

Transcription

1 #19 tech facts at your figertips Get More Refcardz! Visit refcardz.com CONTENTS INCLUDE: CSS Ratioale ad Use Uderstadig Style Rule Sytax Iheritace Style Sheet Types Applicatio Hierarchy ad Sort Order Hot Tips ad more... ABOUT CSS As Cascadig Style Sheets mature as a laguage of desig ad a tool of Web site ad applicatio maagemet, a deep uderstadig of how the laguage really works is essetial. However, most people have leared CSS the same way they ve leared HTML by viewig source, copyig template codes, readig books ad articles. While this bootstrap method of learig is ofte the best way to fid great techiques, it may ot be the best for kowig how to maage, debug, customize ad eve advace those techiques. What our traiig has t ecessarily provided are the core cocepts withi CSS. This is why the Core CSS series may cotai simple examples of thigs you already kow. You ll just get to kow them better here! I this foudatioal referece card, you ll fid ot oly a bit of history ad ratioale for use, rule structure ad sytax, but also a thorough resource as to the Cascade, iheritace ad specificity core priciples of CSS that will expad ad stregthe your professioal ability to work with CSS. CSS RATIONALE AND USE The idea behid CSS is ot a ew oe. We've see the separatio of presetatio before i desktop publishig, where master style sheets ca be created to cotrol the layout, typefaces ad colors used i a give desig. Cascadig Style Sheets were coceived to do exactly that: Remove the style from the documet ad place it separately from the code to be styled. The beefits, whe used carefully, ca be outstadig. Some beefits of usig style sheets iclude: Desig flexibility More image optios Better typographic cotrol Far more flexible layout optios Prit desig support Hadheld device desig support Easier site maiteace Oe style sheet, ifiite pages Desig chages are very easy Chages ca be made quickly Reduces time to lauch Measurable returs Faster loadig documets Far smaller documets User experiece improves Accessibility improves SEO (search egie optimizatio) improves The first proposal for CSS was made by Håkom Wium Lie, ow CTO of Opera Software. He worked with Bert Bos to co-author the first CSS specificatio, which believe it or ot, became a recommedatio i 1996! By 1998 CSS 2.0 brought us richer optios, as we fid later i advacig versios CSS 2.1 ad CSS 3.0. As CSS evolves, we fid it becomig more ad more importat for ot oly visual desigers i terms of maagig the esthetics of the site, but techologists workig o large web sites or lookig to create rock-solid applicatios. A Separate Piece By Molly E. Holzschlag Versio Date Implemetatios CSS 1.0 First proposed 1994, First specificatio i 1996 Still flawed CSS 1 portios i all CSS browsers CSS No full implemetatio CSS 2.1 CSS 3.0 (Modular) Not yet published as a complete specificatio Certai modules are ahead of others i developmet Some close to complete implemetatios Some CSS 3.0 features are implemeted i versios of WebKit, Mozilla ad Opera browsers Table 1. CSS Versios, Publicatio Dates ad Implemetatio The term for sites desiged usig table-based layouts ad HTML presetatio rather tha CSS are referred to as beig authored i presetatioal HTML. This meas that the presetatio (the desig, style, ad layout) is t separated from the markup (cotet with basic formattig). Cosider this header, which cotais elemets ad attributes that defie presetatio: <h1><fot size= 5 color= red face= Arial, Helvetica, sas-serif >Welcome!</fot></h1> Usig presetatioal HTML, every time you eed a ew fot size, color or face it has to be explicitly defied i that documet. Ad the redefied. I CSS, we ca set up presetatio ad have Get More Refcardz (They re free!) Authoritative cotet Desiged for developers Writte by top experts Latest tools & techologies Hot tips & examples Bous cotet olie New issue every 1-2 weeks Subscribe Now for FREE! Refcardz.com DZoe, Ic.

2 tech facts at your figertips 2 A Separate Piece, cotiued it used ot oly multiple times withi a give documet, but across literally millios of documets. So, if I istead had a separate style sheet with this rule: h1 {fot-size: 80%; color: red; fot-family: Arial, Helvetica, sas-serif;} Every sigle documet I wat to apply this style to ca be attached to this sheet. The, if I eed to chage a millio documets with a h1 of red to a h1 of gree, I simply go to the oe style sheet, chage the color i oe locatio, oe time, save the style ad istatly all the documets coected to the sheet will ow have gree h1 headers (this is the poit where you tell the boss it s goig to take all day to make the chage, grab your stuff, ad head to the beach)! So from the get-go the priciples of CSS suggest that we gai may beefits from separatig the techology layers that make up frot ed Web developmet: Documet, presetatio, behavior (Figure 1). HTML CSS JavaScript The three-layer cake of frot ed developmet Learig ad Implemetatio Curves, cotiued At first glace it s easy to thik that these are simple issues ad quickly remedied. But it is udeiable that the lack of clarity i termiology has led to a steeper learig curve tha usig a table (grid) ad the presetatioal elemets to work with that grid much more ituitive to desigers who were taught traditioal grid, color ad typographic desig. Hot Tip If you use Dreamweaver, avoid usig Dreamweaver's Layers (a term that's bee dropped from CS4, thakfully), as they use style i a less-tha best case sceario. While this feature ca be helpful for wireframig, it ca be dowright disastrous i live sites. Review topics such as positioig ad CSS floats for alteratives to this feature. That there s a lack of cosistet ad well-paced implemetatio i Web browsers ad other user software is sadly well kow, makig actual use of CSS a combiatio of good code riddled with workarouds, hacks, filters ad JavaScript patchwork to repair problems across browser ad browser versios. Error hadlig is a particularly frustratig part of this, particularly as Web browsers implemet differet versios of differet specificatios at differet times (Figure 2). Figure 1. Documet (markup+cotet); Presetatio (CSS); Behavior (JavaScript) Of course, just because we bake our three-layered cake separately, it all has to come together ad just be cake at some poit! This is where stadards-based desig ad best practices come sigificatly ito play, ad of course those skills rely i tur o quality learig i terms of both the laguages ad Web browsers we use. Learig ad Implemetatio Curves However, there s bee difficulty alog the road to adoptig, learig ad maagig CSS. This difficulty is due to a umber of iflueces, but two of the major cocers are a steep learig curve ad lack of cosistet browser implemetatio of specificatios. Especially of challege for visual desigers is that CSS omeclature ad cocepts are programmatic rather tha graphic-desig orieted (Table 2) ad there are o tools that ca fully replace desiger uderstadig. A fu, if ot frighteig metaphor would be to ask graphic desigers if they code i postscript, the uderlyig laguage for vector drawig i Adobe products. CSS Term Graphic Desig Meaig lie-height Leadig Space betwee lies fot-family Typeface Used to describe specific type faces such as Helvetica color Type color The color of the text characters layer Multiple meaigs withi software tools #FFF White White For Dreamweaver users, a layer is actually a absolutely positioed elemet. Table 2. Brief Compariso of termiology i visual desig ad CSS Figure 2. Error hadlig i browsers. I the first istace, if there s a mistake i the rule, the browser simply drops the erroeous rule ad reverts to the browser style. I the secod istace, the browser istead makes a attempt to fid a earest value ad apply the color to early disastrous results. This is why learig as much as you ca about how CSS works is so empowerig. As you begi to uderstad that most frustratio with CSS is ot your fault ad lear some techiques to work with some of CSS s complexities, you ll be able to reduce the frustratio caused by certai browser differeces, CSS implemetatio, ad be able to focus o the use of CSS for desig ad documet/applicatio maagemet. UNDERSTANDING STYLE RULE SYNTAX We ll take a look at rule sytax here, which will set you up to quickly uderstad the basic structure of CSS as we discuss rules i the cotext of other laguage issues. A CSS rule cotais at least oe selector ad at least oe declaratio withi a declaratio block. A declaratio is made up of a property ame ad a correspodig value. Declaratio blocks are defied by curly brackets {} ad declaratios are separated with a semicolo: h1 {color: red;} DZoe, Ic.

3 tech facts at your figertips 3 Uderstadig Style Rule Sytax, cotiued This rule i tur has the browser fid a match to the h1 selector ad give it a color of red (Figure 3). Iheritace, cotiued Figure 3. Usig the h1 selector to apply the color red to a correspodig h1 elemet Additioal declaratios are simply added to the block: h1 {color: red; fot-size: 80%; fot-family: Verdaa;} this rule asks the browser to match ay h1, color it red, size it relatively to 80% ad apply the Verdaa typeface (Figure 4): Figure 5. Iheritace. Imagie pourig a bucket of blue pait oto the body elemet. Because color is a iheritable property, all text descedig from body will be blue util aother style overrides the iherited color. Some properties are ot iheritable, mostly those related to the box model (margis, paddig, box widths ad so o), however most are. Authors ca tap ito the power of iheritace by allowig iheritable properties to be iherited by their childre or descedets, or prohibit iheritace if so desired. STYLE SHEET TYPES Figure 4. Addig additioal declaratios to the rule. Grammar Purpose Examples Selector Declaratio Declaratio Block CSS Rule A selector chooses ( selects ) a elemet withi markup documets to be styled. There are may selector types i CSS 2.1, ad eve more to come i future years. A declaratio is made up of a CSS property ad a related property value. CSS properties are umerous ad defie various styles as they relate to colors, text, positioig, margis, paddig, ad positioig. A declaratio ca have as may property ad value pairs as you like, cotaied as a group i a declaratio block ad separated with a semi-colo ; Multiple declaratios related to a give selector are referred to as a Declaratio Block. A selector plus a declaratio or declaratio block makes a CSS rule. Table 3. Rule Sytax i CSS Oce agai, bear i mid that there are may selector, property, ad property value types. You ll work with may of them withi the series, ad be sure to look for the olie refereces provided so you ll have plety of resources. h1 #cotet.module :hover color: red; fot-variat: small caps; margi: 0 0 0; backgroud image:(my.jpg); {color: red; fot-variat: small caps; margi: 0 0 0; backgroud image: (my.jpg); }.module {color: red; fotvariat: small caps; margi: 0 0 0; backgroud image: (my.jpg); } Style Sheet Ay set of style rules (See Style Sheet Types later i this referece) INHERITANCE It s importat to kow that may properties ad associated values are iherited. It s a fairly simplistic cocept, simply relate it to what you kow about iheritace i livig beigs. I have my mother s curly hair, the shape of my father s eyes. Ad, just as we could map out a family tree ad see where some of those features came from, so ca we use the documet tree to do the same (Figure 5). There are three primary types of style sheets as follows: Browser. The browser style sheet is the default style of a give browser. It is either a actual.css file such as we fid i Mozilla browsers, or hard coded ito the software. Browser styles are differet betwee browsers ad versios, so beig aware of them is extremely importat. Wherever you do ot supply a style, the browser style will be used istead. User. User style sheets are a great cocept that has ufortuately ot bee brought to bear o a large scale. User styles are meat for accessibility purposes. My agig eyes require larger text ad higher cotrast, I ca write a quick style sheet to address my issues ad apply it via the browser. Author. The author is you! That is, author styles are those styles that the developer or desiger is i charge of creatig to create the desig ad maagemet scearios for a give Web site or applicatio. Hot Tip At some poit you might have come across the!importat (referred to as bag importat ) keywords. The proper use for!importat is to create a balace betwee author ad user style sheets, a ecessity for accessibility purposes. If used i a author style sheet but ot a user style sheet, the author s rule is cosidered to have more weight ad therefore will apply. Because of this,!importat is useful oly i two places: As a diagostic tool which you remove from the declaratio after debuggig a problem; ad i a user style sheet. Otherwise, please avoid usage at all costs. Author Style Sheets by Type There are three types of author style sheets: Ilie, embedded ad liked (exteral). Each is authored differetly ad has differet applicatios, beefits, ad cocers. Ilie Style Ilie style is style that is used directly i the markup documet to style oe discrete elemet. No matter what other style sheets DZoe, Ic.

4 tech facts at your figertips 4 Author Style Sheets by Type, cotiued might be ifluecig the documet, a ilie style is cosidered more specific ad therefore will apply to that elemet o matter other coflictig styles. Cosider the followig paragraph elemet: <p>this paragraph is styled oly by default browser styles</p> The style is placed withi the style attribute as a value: <p style= color: blue; >This paragraph will ow have a blue color.</p> Figure 6 shows the compariso. So as with ilie style, we re left lookig at a type of style sheet that, while hady i some cases, does t provide the beefits we re lookig for. With the style elemet i the head portio of the documet, we do achieve slightly better separatio of presetatio from our documet s cotet ad structure, but oly i that same documet. Table 5 provides some isights ito the best ways to use embedded style. Sceario Issues Best Practice Embedded style i small versus large Web sites If you have a weblog with oe template documet that cotrols your etire site, it is feasible to use embedded style i this istace. However, i ay professioal site or app developmet, avoid usig embedded style, for it, like ilie style, ca cotribute to cofusio whe debuggig. Avoid i professioal practice. Figure 6. Applyig style to a discrete elemet usig ilie style. If you re thikig but that code really looks just like presetatioal markup! give yourself a big pat o the back. I recet years, may people, icludig those at the W3C resposible for advacig markup ad CSS, have advised that usig this techique is t really separatig presetatio from the documet at all! So what beefits does ilie style really offer? Table 4 provides some best practice isights as to whe to avoid ad whe to use ilie style. Embedded style for debuggig ad workflow purposes Embedded style as quick fixes (aka laziess) As with ilie styles, if you re tryig to isolate why a give style is t applyig, you ca use embedded style to work through some coflicts. Aother use that I fid helpful is that durig developmet, I like to work i oe documet, embeddig my styles ad buildig out the cotet ad markup all i the same place. Where is that style? What if you wat to use it agai more efficietly? Table 5. Best Practices: Embedded Style Though ot ideal, embedded style ca be used to debug ad fid coflicts i the case of multiple style sheets. Workflow advatages as described ca be useful, the oe caveat i all istaces of professioal sites: Remove your embedded styles out to appropriate exteral styles after you re doe workig, test, ad you re good to go. Avoid publishig embedded style sheets. Sceario Issues Best Practice Ilie style i small versus large Web sites Ilie style for debuggig purposes Ilie style as quick fixes (aka laziess) If you have a very small site (10 documets or less) the risk of losig track of ilie styles is less tha if you are workig o very large sites, where it s easy to lose track of ilie styles uless they are meticulously documeted. Ad who does that? As the sectio o specificity will demostrate, a ilie style has the highest specificity of ay other rule that might be tryig to style the elemet i questio. If you are havig trouble gettig to the heart of the matter, droppig a ilie style ito the elemet you are havig trouble with ca help determie that i fact, there s a coflict. There are very few beefits from usig ilie style, but oe I fid that s great is for quick fixes ad blog posts, which you ca do o the fly. Table 4. Best Practices: Ilie Style Avoid use of ilie style i almost all professioal web sites, ad i particular those sites which are large or expected to grow sigificatly. Use ilie style whe ecessary to debug. Typically, if you are able to apply a style ilie that you d bee strugglig with before meas you have rules coflictig somewhere that eed to be foud. Fid the coflicts, repair the rules, ad remove the diagostic ilie style prior to publishig! Despite the fact that I do this myself, it s ot somethig I d recommed, particularly for professioal sites. Embedded Style Embedded style is used to cotrol the style of a sigle documet. I this case, the style elemet is used to defie the embedded area for the documet s style as follows: <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN > <html xmls=" <head> <title>core CSS I: Examples</title> <style type="text/css"> p {color: blue;} </style> </head> <body> <p>i this case, all paragraphs o the page will tur blue.</p> </body> </html> Liked (Exteral Style) Liked style is the true holy grail of style sheet types. It provides us with the broadest applicatio of style; allows us to maage the presetatioal aspects of a site from a hadful of style sheets; performace is faster due to the browser placig the styles ito memory (cache); ad the worst of coflicts are avoided. Liked style sheets are separate text documets cotaiig your style rules, saved with a.css file extesio ad liked to from the HTML documets you wat to style usig the lik elemet i the head portio of your markup documet: <head> <lik rel= stylesheet type= text/css src= style/ global.css > </head> I almost all cases, the liked style sheet is the oe you will be workig with most. Hot Tip Be careful with case matchig betwee your CSS ad HTML documets. If you create a selector H1 i upper case, the it will oly select h1s i upper case withi the markup documets. Best practices suggest keepig all HTML elemets ad attribute ames i lower case (this is required i XHTML) ad keepig CSS lower case as well, helpig to avoid potetial case-related coflicts. Also, while may programmers fid camel case (class= ModuleTwo ) ituitive, this also ca cause casematchig problems, particularly i larger-scale sites, particularly those beig maaged by multi-perso teams. DZoe, Ic.

5 tech facts at your figertips 5 APPLICATION HIERARCHY AND SORT ORDER Of course, most workig Web developers ad desigers are well aware that workig with CSS just ca t be that straight forward! There are may reasos why CSS is as broad i scope as it is, but flexibility ad power are two of the most credible reasos for why you ca approach a give problem with umerous solutios. With freedom comes resposibility, ad the same is true for professioal Web developmet. I order to visualize why CSS ca quickly fall from powerful fried to chaotic foe, cosider Figure 7. The Cascade Revisitig the browser, user, author relatioship, we ca take a look at how rules cascade from oe style sheet type to aother. Here s the geeral rule of thumb: All explicit styles override browser style A user style sheet, whe properly authored, will override author style A ilie style overrides a coflictig embedded style A embedded style overrides a coflictig liked style Rule Order The order i which rules are sorted becomes critical i resolvig coflictig rules. May readers are likely to have heard the rule closest to the cotet wis which is somewhat accurate but also a bit misleadig. Sort order, the term that is used to describe the sortig of multiple CSS rules, is the process by which a Web browser sorts the rules it is give. If we have a sceario where there are two liked style sheets, a embedded sheet i the documet i questio, ad a ilie style, the browser has to sort through those ad resolve sort coflicts. Cosider this XHTML : <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN > <html xmls=" <head> <lik rel= stylesheet type= text/css src= style/global.css /> <lik rel= stylesheet type= text/css src= style/local.css /> <style type= text/css > p {fot-family: Times;} </style> </head> <body> <p style= fot-family: Arial; >Which fot will this be?</p> <p>what about this paragraph?</p> </body> </html> Fie Arts Biology Mai Ui Buildig Psychology Figure 7. Imagie a global style for the Uiversity itself. The, each idividual departmet wats its ow idetity. This is a very commo large-orgaizatio issue, ad oe which ievitably leads to multiple styles all over the site, poorly documeted ad maaged whe i fact some itelliget coordiatio could be used to maage the site s presetatio much more efficietly. Rule Order, cotiued If you imagie all the rules withi global.css expadig out, the the local.css expadig out, the the embedded style added oto that, you get oe log style sheet. If somewhere i the first two I had coflictig rules that styled paragraphs usig the Geeva fot, the sort order process will see the last style i that log sheet as Times. Therefore, Times will be used i all istaces of p as defied withi our scope with the exceptio of the elemet cotaiig the ilie style. As metioed earlier, ilie styles are more specific, ad therefore will always trump aother style i a sceario like this. Specificity There is oe fial deal-breaker for the rules of Cascade ad sort, ad that is the specificity of a give selector. I ve kept the examples here simple for a reaso as selectors are complicated ad actually take up about a third of the Core CSS series. Specificity is a algorithm with a broad base that allows a author to create very specific rules. These rules ofte ivolve a umber of selector types, ad are calculated based o the selectors i use i the rule. If a rule is foud to be more specific tha oe that comes later i the sort order the more specific rule is applied o matter where the rule resides i the sort. Cosider the followig rule: #cotet p {fot-family: Garamod;} This is a combiatio of a ID selector (#cotet) ad a elemet selector (p). The space betwee the two selectors idicates a descedet. So, let s say I have this rule i global.css. Because it is more specific, ay paragraph that desceds from a elemet with a ID of #cotet will ow be i Garamod, ot i Times. Specificity is oe of the terribly misuderstood ad udertaught portios of coflict resolutio withi a CSS applicatio hierarchy. Uderstadig how to calculate specificity is easier if you have a table available to work through a give coflict, the cout up the types of selectors that exist i your rules i the exact order show i Table 6. Example Cout # of ID Selectors Table 6. Calculatig Specificity Cout # of Class Selectors ul 0, 0, 1 #cotet ul li 1, 0, 2 #cotet ul li ul li 1, 0, 4 We ca ow see that the most specific rule is the last oe. Therefore, ay list item style that is ot as specific will ot apply to a ested list item withi the documet area with a ID of cotet regardless of where that more specific rule resides i the sort. There s oe specific specificity exceptio here. Remember that I metioed ilie style has the highest specificity? Table 7 shows how ilie style comes ito play: Example Presece of Ilie style i elemet Cout # of ID Selectors Table 7. Specificity ad presece of ilie style Cout # of Class Selectors ul 1, 0, 0, 1 #cotet ul li #cotet ul li ul li 1, 1, 0, 2 1, 1, 0, 4 Cout # of Elemet Selectors Cout # of Elemet Selectors If t here are ilie styles withi the elemet, a cout of 1 goes ito the first (optioal) colum, skyrocketig the specificity of the give elemet. This is why ilie style is really so powerful. DZoe, Ic.

6 tech facts at your figertips 6 FIND MORE ONLINE The followig olie refereces will be helpful additios to the learig i this refcard. Referece CSS 2.1 Specificatio CSS Discussio List CSS-D Wiki (Lots of helpful iformatio ad liks) CSS Ze Garde (Beautiful showcase site) Table 8. Olie Refereces URL NEXT STEPS It should be clear that CSS has uaces that oly time ad experiece ca reveal. Well, that ad good refereces! Look for the remaiig Core CSS series ad go ito depth with selectors, the box model, floats, positioig ad the z-idex. Soud excitig? I thik so too! More Core CSS Refcardz: I October 2008 II November 2008 A B O U T T H E A U T H O R R E C O M M E N D E D B O O K Molly E. Holzschlag Molly E. Holzschlag is a well-kow Web stadards advocate, istructor, ad author. She is a Ivited Expert to the W3C, ad has served as Group Lead for the Web Stadards Project (WaSP). She has writte more tha 30 books coverig cliet-side developmet ad desig for the Web. Curretly, Molly works to educate desigers ad developers o usig Web techologies i practical ways to create highly sustaiable, maitaiable, accessible, iteractive ad beautiful Web sites for the global commuity. She cosults with major compaies ad orgaizatios such as AOL, BBC, Microsoft, Yahoo! ad may others i a effort to improve stadards support, workflow, solve iteroperability cocers ad address the log-term maagemet of highly iteractive, large-scale sites. A popular ad colorful idividual, Molly has a particular passio for people, blogs, ad the use of techology for social progress. Web Site With Sprig Ito HTML ad CSS you'll master today's best practices: the real uts ad bolts, ot theory or hooey. You'll lear through dozes of focused HTML, XHTML, ad CSS examples: crafted for simplicity ad easy to adapt for your ow projects. BUY NOW books.dzoe.com/books/sprig-html-css Get More FREE Refcardz. Visit refcardz.com ow! Upcomig Refcardz: Available: Core Seam II Hiberate Search Equiox EMF XML JSP Expressio Laguage ALM Best Practices HTML ad XHTML Essetial Ruby Essetial MySQL JUit ad EasyMock Gettig Started with MyEclipse Sprig Aotatios Core Java I PHP Gettig Started with JPA JavaServer Faces Struts2 Core.NET Very First Steps i Flex C# Groovy NetBeas IDE 6.1 Java Editor RSS ad Atom GlassFish Applicatio Server Silverlight 2 Visit refcardz.com for a complete listig of available Refcardz. FREE Desig Patters Published Jue 2008 DZoe commuities deliver over 4 millio pages each moth to more tha 1.7 millio software developers, architects ad decisio makers. DZoe offers somethig for everyoe, icludig ews, tutorials, cheatsheets, blogs, feature articles, source code ad more. DZoe is a developer s dream, says PC Magazie. DZoe, Ic NW Mayard Cary, NC Refcardz Feedback Welcome refcardz@dzoe.com Sposorship Opportuities sales@dzoe.com Copyright 2008 DZoe, Ic. All rights reserved. No part of this publicatio may be reproduced, stored i a retrieval system, or trasmitted, i ay form or by meas electroic, mechaical, photocopyig, or otherwise, without prior writte permissio of the publisher. Referece: Sprig Ito HTML ad CSS, Molly E. Holzschlag, Addiso-Wesley Professioal, April 22, ISBN-13: ISBN-10: X Versio 1.0 $7.95