Slashdot Mirror


CSS: The Missing Manual

Michael J. Ross writes "Ever since Cascading Style Sheets (CSS) first appeared on the Web scene in the late 1990s, a plethora of books have been written and published that purport to explain how CSS works, and how to make it work for you. So why would any publisher decide that what the technical world needs is yet another CSS book? Perhaps because they have taken a close look at the bulk of those available titles, and found them to be wanting — filled with overly theoretical explanations and sample code that is far too focused on some pet domain of the author. Such books may be adequate for the veteran Web developer, who has the time and inclination to separate the wheat from the chaff. But developers new to CSS need much more approachable material, with clear examples. Perhaps that is the thinking behind CSS: The Missing Manual." Read the rest of Michael's review. CSS: The Missing Manual author David Sawyer McFarland pages 494 publisher O'Reilly Media rating 7 reviewer Michael J. Ross ISBN 0596526873 summary An accessible guide to using CSS with HTML.

Written by David Sawyer McFarland, CSS: The Missing Manual is published by O'Reilly Media, as part of their Pogue Press series, under the ISBN 0596526873. It first came out in August of 2006. The publisher maintains a Web page for the book, where visitors can find a link to register their copy of the book (does anyone do that?), a page for submitting errata (none yet, as of this writing), a form for posting a review on the O'Reilly site (again, be the first!), and a sample chapter (Chapter 1: Rethinking HTML for CSS) as a PDF file. There are also links for purchasing the book in the U.S. or the UK, and for reading the online version, as a part of O'Reilly's Safari service.

The book's 494 pages are organized into 14 chapters and three appendices, grouped into five parts. In addition, there is an index, as well as a terse but meaty introduction, which even includes a summary of HTML. The humor for which the Missing Manual books are known, begins early, in introduction, though in this case probably not intentionally: Page 9 claims that the book "is divided into four parts," and then lists the five parts. Before commenting upon those five-ish four parts, it should be noted that the table of contents runs seven pages, listing the book's parts, chapters, sections, and subsections. Future editions of the book would benefit from an overview table of contents, similar to those used in an increasing number of technical books, to good effect.

The 14 chapters cover most if not all of the essentials: writing HTML for CSS; creating styles and style sheets; determining what to style; using inheritance; using cascading; formatting text; setting margins, padding, and borders; styling graphics; styling links and navigation bars; styling tables and forms; creating float-based layouts; positioning page elements; creating print stylesheets; and writing maintainable CSS code. The three appendices include a CSS property reference, a discussion of CSS use in Dreamweaver version 8, and a listing of CSS resources to supplement the book.

On the positive side of the ledger, the author does a commendable job of clearly explaining all of the essential topics that the typical developer would need to understand in order to begin developing a robust Web site based on HTML and CSS, or reworking an existing site that is in desperate need of an overhaul. The clear explanations and bite-sized examples demonstrate that David Sawyer McFarland is not only an experienced Web developer, but likely has spent considerable time explaining to others how to do the same — as a writer, trainer, and instructor. This book is not his first, for he has previously written Dreamweaver: The Missing Manual.

One valuable aspect of the book under review, is that McFarland discusses how to overcome the most commonly encountered browser problems, in which Web pages employing CSS are not being formatted as one would expect and as specified in the CSS standards, by misbehaving browsers (that means you, "Internet Exploder"). Moreover, the book is also one of the first to document the significantly enhanced, long overdue, and welcomed CSS support in version 7 of the most commonly used Web browser (yes, we're still looking at you, "Browser by Bill").

The book is one in a series of many so-called Missing Manuals, whose tagline is "The books that should have been in the box," and whose Web site characterizes them as "Warm, witty, and jargon-free, [with] enough clarity for the novice, and enough depth and detail for the power user." In many respects, McFarland's latest contribution matches that description. In addition to the straightforward and yet comprehensive discussions of each topic, the author imbues his writing with a bit of humor, without overdoing it, or trying too hard, as is sometimes seen in other books covering subjects that admittedly can be quite dry.

On the negative side of the ledger, someone — or, more likely, some committee — somewhere along the decision chain, stipulated that almost every page of the book should be formatted so that the outside 1.5 inches, which is the easiest for a reader to see, should be consumed by a mostly empty and useless gutter, the bulk of which is filled with a light gray bar. This pushes the text, which slightly more than 4.5 inches wide, further in, toward the book's binding, and thus more difficult to read. This is true even though O'Reilly has wisely chosen to use RepKover, a flexible lay-flat binding. This exasperating style of layout is not characteristic of O'Reilly's books, which are generally much easier to read, with more sensible margins and often larger font.

One of the first principles taught to those learning Web design, is to avoid using white text on a black background. Such Web pages usually try to appear cool and edgy, but instead often comes off as immature in the eyes of an Internet veteran, and sinister to the Internet newbie. It doesn't work on Web sites, and it doesn't work in Web books. Sadly, O'Reilly chose to use white-on-dark-gray for many of the book's sidebars, making them difficult to read, especially as the sidebar text font size appears to be a bit smaller than that of the regular text.

In a nutshell, the content of this book is excellent, while the presentation of that content leaves much to be desired — ironic for a book focusing on CSS, whose primary purpose is to modularize and simplify presentation, neatly separating it from content. Ranking the content and presentation on a scale of 1 to 10, I would give them 9 and 5, respectively. Yet on balance, just as is true for most Web pages, the content is more important than its layout and other aesthetic considerations. CSS: The Missing Manual is a well-written, lighthearted, up-to-date, and easily accessible guide to modern CSS and how to use it in the real world.

You can purchase CSS: The Missing Manual from bn.com. Slashdot welcomes readers' book reviews -- to see your own review here, read the book review guidelines, then visit the submission page.

14 of 151 comments (clear)

  1. The best CSS manual by Anonymous Coward · · Score: 2, Informative

    Here is the best manual, from W3C themselves:

    http://www.w3.org/TR/REC-CSS2/

    1. Re:The best CSS manual by soliptic · · Score: 2, Informative

      Obviously I can't argue with the spec as being definitive in theory, but in practice I find this the best manual:

      http://dezwozhere.com/links.html

      When I give people this link in response to CSS queries, I'm fond of adding "if you can't answer your CSS question within three clicks of that page, your question has no answer (or you chose the wrong three clicks)".

  2. Welcome to my hell. by iiii · · Score: 5, Informative

    CSS is a great idea, but doing it in practice blows because the browsers vary so much in their implementation.

    The most useful thing I have found to help is QuirksMode Browser Compatability Tests. I think this guy is insane to have spent so much time testing every single feature in (nearly) every browser, but it is very, very useful to see exactly which browsers support what.

    --
    Light cup, beer drink, thin so chain, neck turtle fat, man I won't say it again
    1. Re:Welcome to my hell. by 99BottlesOfBeerInMyF · · Score: 3, Informative

      I personally don't think pain is going to bring about change.

      But you'll never know because you will bend to MS's lock-in strategy.

      The actual functionality isn't an issue across browsers, but yeah the apps I make break in FF, Opera and Safari.

      Umm, then yeah it's an issue.

      That said we can't afford to not cater to IE users. They make up over 95% of clients.

      You must have an unusual site then. Most sites and statistical studies show all versions of IE combined at about 80% of Website hits. As for affording to not cater to them, it all depends upon how you market it to customers and the type of site you run. A simple, "This Web page uses advanced Web 1.5 features from the 1998 standards. Your current browser is out of date and may be insecure. Click here to upgrade if you want to view all formatting properly." might be viewed as a feature, rather than a nuisance, especially if a coalition of major sites decided to do it all at once, so they would no longer have to pay double the development costs to reach the whole market.

      I haven't yet heard a complaint or seen some feedback come through our form stating "omg I gotta use IE!!!"

      Really do you track that? I know I used to complain when any company I did business with tried to make me use IE only, although now there are more options for everything so I normally just assume they are incompetent and probably clueless. Given that, I don't want to trust any data to them, so I just go elsewhere. Try monitoring the number of hits you get using alternative browsers, which then don't hit again with IE from the same IP address. It is not hard with some basic statistical trackers that you can grab for free. You might be surprised how much business you're losing. The other issue is, alternative browsers often represent the more affluent parts of society. Apple laptops accounted for 20% of laptop sales last month and almost all of them will be using Safari. How many of those people are the ones with lots of disposable income? As I said before, it all depends upon what type of sites you make.

      Personally, I'm very happy I no longer have to bother working around all of IE's failures. It has cut my workload down to less than half of what it was. I just wish everyone could have the same easy development I do, without having to worry about anything but clearly documented standards.

    2. Re:Welcome to my hell. by drinkypoo · · Score: 2, Informative
      In practice, it definitely does not blow. If you know how to code properly and comply with standards set by w3c, IE has minimal problems.

      The fact that IE doesn't know where various pieces of CSS (like margins and borders) are supposed to be rendered and calculated pretty much puts the lie to your comment.

      --
      "You're right," Fisheye says. "I should have set it on 'whip' or 'chop.'"
  3. Amazon has it cheaper by heffel · · Score: 5, Informative

    As usual, Amazon has it cheaper than BN ($23.09 vs $27.99)

  4. Re:Grumble... by antiWack · · Score: 1, Informative

    Books:
    The Zen of CSS Design, Eric Meyer on CSS. Two excellent books to get you started. The concept of CSS layout design is the big hurdle, once you figure it out, it's a breeze and quite fun.

    Websites
    www.w3schools.com - Excellent for html too. Read up here about semantics. http://www.w3.org/Style/Examples/007/ - Something else from W3C. This shows you some stuff you will need once you start getting the concepts of CSS down.

    Here's some advice from me: Start with healthy HTML. If your HTML is not valid AND semantic, CSS will be very difficult to learn. If you are not familiar with xhtml semantics, I recommend you spend some time here: http://www.w3schools.com/xhtml/default.asp . If your code is not neat and organized, if you are not closing all your tags, CSS will not be nice to you.

    Semantics Using tags for their intended use only, following the rules of the code strictly, etc. You get the idea.

    I hope this points you in the right direction!

  5. Comma Chameleon by GreyDuck · · Score: 2, Informative
    "The humor for which the Missing Manual books are known, begins early, in introduction, though in this case probably not intentionally..." [...] "This pushes the text, which slightly more than 4.5 inches wide, further in, toward the book's binding, and thus more difficult to read."

    Speaking of "more difficult to read," while I'm as big a fan of using commas as the next talentless hack, maybe this review could've done without roughly half of the little buggers that are sprinkled throughout.

    --
    I'm only wearing black until they come out with something darker.
  6. Re:Grumble... by Kelson · · Score: 2, Informative
    no browser properly handles CSS. NONE. Except maybe Opera, which at least can pass ACID2.

    No, not even Opera. Keep in mind that Acid2 is not a compliance test. It tells you that the browser handles a certain set of HTML, CSS, protocols and errors properly, but it doesn't indicate full and/or proper implementation of any level of CSS.

    There's a great set of comparisons at WebDevout.net (surf around the site for more detailed tables). Opera 9 is certainly in the lead with 94% of CSS 2.1 by that site's metrics, compared to 90% for Firefox 1.5, 57% for IE7 and 51% for IE6. But none of the browsers makes it to 100%.

  7. CSS Zen Garden by cruachan · · Score: 2, Informative

    Manuals are fine, but most can be replaced by the various excellent websites around - w3schools is mentioned below and I'd agree with that.

    However for some inspiration about what CSS can do for you a trip to the CSS Zen Garden at http://www.csszengarden.com/ is worth a thousand pages of dry css scripts. The recently published book 'the Zen of CSS design' is also excellent - http://www.amazon.com/Zen-CSS-Design-Enlightenment -Voices/dp/0321303474/ref=sr_11_1/102-7311422-8694 536?ie=UTF8 and adds a lot to what's available on the site.

  8. Re:Now I know why IE has such bad CSS support. by falconwolf · · Score: 2, Informative

    Well, IE 7 reportedly only supports 50% of the CSS standard, so if Mac IE 5's CSS standard is worse than than IE 7's, then it would still be pretty awful.

    IE 5 for the Mac supported xhtml, ECMAScript, nearly all of CSS1, much of CSS2, and most of the DOM according to Jeffrey Zeldman. So, I guess IE 7 doesn't support standards as much as IE 5 for Macs did.

    Falcon
  9. Re:Now if only by Kelson · · Score: 2, Informative
    Just as an example that's on my mind right now, Mozilla does not properly support display: inline-block;. There are two alternate proprietary display properties, -moz-inline-block and -moz-inline-block. Neither one is quite right, but -box is the one that you have to use for inline-block if you want it to behave properly.

    Almost, but not quite right.

    It isn't that Mozilla doesn't properly support inline-block, it's that Mozilla doesn't support inline-block. Those proprietary display properties exist precisely because they don't quite match what inline-block is supposed to do.

    Mozilla has followed similar paths with opacity and outline. While they had preliminary code, they used the proprietary rules -moz-opacity and -moz-outline in order to avoid creating an incompatible implementation. Once they had it working right, they switched over to the standard properties.

  10. Re:Now if only by Bogtha · · Score: 3, Informative

    And why have two proprietary display values, and not support the ones that are supposed to be there?

    Because inline-block isn't supposed to be there. Not yet. The inline-block property was a proprietary Internet Explorer property. It has been added to CSS 2.1, but that specification is not yet finished - it's a working draft. So far, no finished W3C specification includes inline-block, it's still a non-standard Microsoft extension.

    --
    Bogtha Bogtha Bogtha
  11. Re:Oh, I forgot to ask... by soliptic · · Score: 2, Informative

    See "box within a box" at the CSS-wiki discuss page on the box model - as that page notes it's not without it's own drawbacks ("The only issue is that this is done within the HTML markup, rather than the CSS. Many people consider this to be bad practice, because years down the road, when a hack is finally cleaned from your code, a CSS hack is quickly removed, while markup hacks are scattered hither and yon. Plus it complicates the HTML, structurally speaking.") but I personally consider that a lesser of two evils.