Slashdot Mirror


Core CSS (2nd ed.)

Simon P. Chappell writes "It used to be that a website could be standards compliant or it could be attractive and impressive to prospective customers, but it could almost never be both. Now with the rise of CSS compliant browsers, a new generation of web designers are finding that the old wisdom is ready to be retired. CSS technology allows a website to have both excellent, semantically indicated content and attractive layouts. Core CSS (2ed.) positions itself as a complete guide to all of this standards based goodness." Read on for the rest of Chappell's review. Core CSS (2nd ed.) author Keith Schengli-Roberts pages 818 (10 page index) publisher Prentice Hall rating 6 reviewer Simon P. Chappell ISBN 0130092789 summary A flawed diamond

What is CSS? Cascading Style Sheets (the CSS part of the book's title) are a way to separate the content and presentation of a web page. The CSS file holds the presentation instructions, leaving the HTML to hold only the content. While CSS is a formal World Wide Web Consortium (W3C) standard, the adoption has been somewhat slow, with browsers only reaching full compliance with the base level of the standard within the past year or so. So why is CSS useful? CSS shines when it is used to define the style of a whole site. Want all of your headings to be the right shade of your corporate blue? No problem. Want every page to have the corporate logo on it's background? No problem. Whoops, got bought by GlobalMegaUberCorporation Inc. and need to change the colours and background logos in a hurry? No problem, just change the CSS definitions and your new corporate identity will shine out for all your customers to see. What do I know about CSS? I am a relative newcomer to CSS, having been laying out websites using tables since 1995. I had decided that it was time to learn how to bring my personal website up to speed with the latest standards, when I was offered the chance to review this book, so I took Prentice Hall PTR up on the opportunity. This review then, is from the perspective of one who knows HTML well enough to develop a couple of sites using only vi and who has decided to learn CSS. Overview The back cover blurb claims that Core CSS 2nd Edition is a comprehensive guide that shows both beginning and expert web developers all they need to know to achieve great results with the latest style sheet properties. It also claims to be ... the most complete and up-to-date CSS reference available. This review will explore those two claims. What's To Like The first thing to like about this book is that it does cover almost everything that it's possible to write about Cascading Style Sheets. I have included the table of contents below so that you can get a feel for the breadth that this book aims at covering. The writing style is clear and explanatory with an underlying conversational tone, quite suited to this manner of book. It is also obvious from the text that Mr. Schengli-Roberts does understand his subject matter very well indeed.

The biggest thing to like about this book, for me, is appendix B, an alphabetical listing of the defined CSS properties and values. This list covers 92 pages and is a key part of the whole book. Importantly, it doesn't feel like filler and gives an impression that care has been taken in devising this very useful resource. Each entry in the appendix gives an example of correct usage of each property, which as a CSS neophyte I appreciated greatly.

What's To Consider This book carries a 2004 copyright, yet it feels old when you view the list of browser compatibilities for each property. While it does give compatibility information for Microsoft Internet Explorer 6, it only covers Mozilla 1.0, it mentions Konqueror without any version details and completely omits Apple's Safari browser. This spotty coverage seems at odds with the rest of the book and really felt like a glaring omission to me. Summary This is a good book -- and if you're in the process of learning to use Cascading Style Sheets, you should certainly consider it for your collection. It is flawed by a poor selection of browsers for it's compatibility lists; while this may not be an issue for you, I found it quite irksome. This explains my review score and my description of this book as a flawed diamond.

Far more information than most people could ever want to know about Simon P. Chappell is available at his personal website. You can purchase Core CSS (2nd ed.) from bn.com. Slashdot welcomes readers' book reviews -- to see your own review here, carefully read the book review guidelines, then visit the submission page.

37 of 314 comments (clear)

  1. CSS Zen Garden by cmstremi · · Score: 5, Informative

    csszengarden.com is a great example of CSS can be rich, powerful and compliant.

    1. Re:CSS Zen Garden by chrisgeleven · · Score: 4, Informative

      For those who say CSS doesn't work right in IE or Mozilla, the CSS Zen Garden will prove them wrong. Almost every design on this site works with IE5+ and Mozilla. To see such beautiful, fast, standards-compliant, and workable designs not break for 95% of web browsers on the web today is quite amazing.

    2. Re:CSS Zen Garden by Anonymous Coward · · Score: 2, Informative

      From the CSS2 specification:
      "Pixel units are relative to the resolution of the viewing device, i.e., most often a computer display. If the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values."

    3. Re:CSS Zen Garden by Laebshade · · Score: 2, Informative

      It's not that they're using a fixed width that is the problem, and the main reason they're using it is so users won't see it smaller than it really should be. Instead of using width (like I assume they're using) they should be using min-width. As the name implies, this would set a minimum width (as I use on my website's CSS.

      HTML is for structuring the document, CSS is for styling it.

  2. Content and Layout - Uh Oh by RetroGeek · · Score: 5, Informative

    both excellent, semantically indicated content and attractive layouts.

    Well I don't like the layout, but that is subjective.

    But click on Full CSS Browser Compatibility Chart and you get Warning: mysql_connect(): Access denied for user: 'corecss_corecss1@localhost' (Using password: YES) in /home/corecss/public_html/properties/full-chart.ph p on line 38

    Oops...

    --

    - - - - - - - - - - -
    I am a programmer. I am paid to produce syntax not grammar. Deal with it.
  3. A Roadmap to Standards by huphtur · · Score: 4, Informative

    Comprehensive, informal, and somewhat long-winded roadmap for anyone who has heard about web standards, thinks they might want web standards, but doesn't know where to start.

  4. Avoiding Piracy by Eberlin · · Score: 5, Informative

    As an act of rebellion, I ran all my web pages through deCSS and now I've got the MPAA after me!!!

    On a more serious note, I do like CSS as it is very handy when it comes to making site-wide changes. The big thing about it, though, is that it has to be there from the very beginning. Not that planning is a bad thing, but when you inherit site maintenance from someone that apparently heard Frontpage was "da bomb" and those FONT tags are everywhere, it hurts.

    I'm still having problems doing positioning with CSS, but I figure that comes with actually trying it out and working through various browser issues. Tables are still a very convenient way to get layout going...and it's a bad habit that needs to be fixed.

    For anyone who's starting a web project, DEFINITELY look into CSS. Even though it's got a bigger initial time investment, it pays off greatly in maintenance. Especially when the marketeers ask for a blue that's 3 shades lighter than what you currently have on 100 or so pages.

    1. Re:Avoiding Piracy by telbij · · Score: 2, Informative

      FONT tags are everywhere

      Meet my favorite regexp:

      s!</?font[^>]*>!!ismg

      Good for dealing with other types of annoying tags as well. I export HTML from Excel all the time, but you wouldn't know it from looking at my pages.

    2. Re:Avoiding Piracy by telbij · · Score: 4, Informative

      Even something as simple as "center this element on it's parent" is impossible without absolute positioning.

      Try margin: auto;

      Sure, you also need the parent to have a text-align: center for it to work in IE PC, but you'll usually have all your text in lower level block elements that can be defined with text-align: left to smooth things out.

      The whole seperation of content thing is crap, though. The structure of the HTML still affects both the layout and the formatting, so there's no way you can get a totally clean break.

      I definitely agree with this, though the only reason it really comes up is as a backlash against the horrendous practices that developed during the browser wars.

      The cross-browser issues are a real pain with CSS - it's worse than the hacks we all used back in 93 to make stuff render correctly. IE may be broken and non-compilant but it's still got the 80-90% market share and if you're doing any large-scale site it MUST render correctly on IE. That means giving up on a whole ton of CSS functionality, and especially if you're using it for positioning. One more reason to stick with tables for another couple years.

      The table hacks seem to make more sense, but in many ways I think it's just the familiarity that makes them seem better. Some of the CSS hacks ARE ugly, but a) there's a ton of stuff you can do without any egregious hacks and b) a little server-side IE detection can clean things up immensely.

      There is a ton of functionality that we do have to give up on for IE, but on the same token, there is a ton of stuff that works and is not possible using tables.

      I'm only concerned that my pages work in IE. Frankly, I'd much rather have them look better in Mozilla or Safari, to give Microsoft an incentive to further their CSS support. I've gotten several people to switch to Firefox after simply coming into my office and saying "wow, your web looks so much cooler!".

      I still do use tables for many common purposes (forms, certain types of alignment where floats break down, etc.), but now is definitely the time to start learning CSS-P techniques. Once you get a handle on some of the major IE bugs it gets a lot easier, trust me.

  5. Almost by Hard_Code · · Score: 4, Informative

    Well, I went on a CSS bender and discovered that while it is great for pretty much all mundane styling problems, it still sucks when trying to layout content in table-like columns. Simple things like just getting a three column layout with various justifications, or getting divisions that occupy as little space as possible (since you can't tell it to "occupy as little space as possible" you have to rely on hacks like saying, "ok, bound yourself by margin parameters which eat up all empty space") is heinously difficult and requires bizarre hacks. I had to fall back on tables in some cases just to get a simple header including centered text with justified (left and right, respectively) flanking images.

    --

    It's 10 PM. Do you know if you're un-American?
    1. Re:Almost by gooser23 · · Score: 2, Informative
      I had to fall back on tables in some cases just to get a simple header including centered text with justified (left and right, respectively) flanking images.

      you mean something like:

      <div>
      <img style="float: left" .../>
      <div style="margin: 0 auto;">hello</div>
      <img stlye="float: right" .../>
      <div style="clear: both;"/>
      </div>

      It's not good enough to use CSS, you gotta make good use of CSS, and valid (X)HTML. It also helps if your target audience uses a standards compliant browser, which in my opinion is why most of the web still uses tables for layout -- its just easier than to deal with browser quirks.

      --
      "Dying tickles!" -- Ralph Wiggum
  6. Re:CSS, oh how I love thee... by Just+Some+Guy · · Score: 2, Informative
    I completely disagree. It's never easier to hardcode constants right into the middle of a block of code than to pull them into their own section, and that holds true for HTML, too.

    At some point, you will want to change that to <font color="blue"> (also note that quotes are mandatory in all recent versions of HTML); when you do, your definition of "easier" will change to be more like mine.

    --
    Dewey, what part of this looks like authorities should be involved?
  7. What in God's name...? by TrentL · · Score: 4, Informative

    From the book's website:

    The "CSS" in the title stands for "Cascading Style Sheets", a highly flexible way of formatting Web content. Core CSS, 2nd Edition takes a practical, pragmatic look at CSS, showing not only how you can make CSS1, CSS2 and Internet Explorer CSS extensions work for you now...

    I can't imagine a serious book on CSS talking about IE CSS extensions. People interested in this topic should get Zeldman's book, or the latest O'Reilly CSS guide by Eric Meyer.

  8. Re:CSS, oh how I love thee... by Neon+Spiral+Injector · · Score: 2, Informative

    Well "div" is a block level elment, you'd want a "span" in this case. Also the trailing ';' is not needed and actually invalid for the style attribute to a tag.

  9. Hybrid Layout by TrentL · · Score: 5, Informative

    The more sensible CSS zealots seem to accept the "hybrid layout" concept. It's OK to use a table here and there if CSS browser bugs are causing too many problems. But the days of tables nested 10 levels deep and spacer gifs and crap like that are gone.

    1. Re:Hybrid Layout by Just+Some+Guy · · Score: 2, Informative
      Now all you hear is "ooh tables are bad, all tables are bad"

      All tables are not bad

      First, I agree with your main point. I use a lot of tables on my website to display, well, tabular data. However, I haven't heard anyone say that using tables are bad. The usual assertion is that using tables for layout is bad. There's a subtle but important difference.

      --
      Dewey, what part of this looks like authorities should be involved?
  10. Re:CSS is crap for layout by pubjames · · Score: 2, Informative

    CSS is still often not a practical solution when creating a web site.

    Just to be clear - I'm talking about layout. CSS is great for font colour/styles etc.

  11. Re:CSS, oh how I love thee... by ejaw5 · · Score: 3, Informative

    For anyone who maintains websites with a text editor (myself included) the value of CSS is greatly appreciated. As you've mentioned, all you have to do is edit one css file and you can change the appearence of a whole website, or at least all the pages that use that particular CSS file. The problem is with those using WYSIWYG editors like FrontPage and Dreamweaver who have no idea of CSS, or in some cases basic HTML for that matter. I've seen how Dreamweaver (4) handles page "themes". Make one change like change link colors, and then the software traverses through each and every file and makes the changes in them. Not very efficient.

    --

    $cat /dev/random > Sig
  12. Re:CSS is crap for layout by Caleb+Rutan · · Score: 5, Informative

    Okay. Here's a couple:
    AOL.com - go ahead and laugh, but their site is classy and the layout is table-free.
    Sprint.com - ditto. They use tables, for tabular data, like their stock quote info, but that's what tables are *for*.

    Commercial sites, especially big ones, are deep and take a lot of work to redesign and recode. Most of those probably aren't being torn down and rebuilt with CSS because there isn't an enormous return in doing it yet. This doesn't mean it cannot be done, nor does it mean that if you're starting a new site, or re-doing an existing one, that CSS can't do the job.

    In fact, I'll bet it can. See the Zen Garden for a hundred or so examples of what can be done with only CSS.

    --
    -- caleb
  13. Cool CSS version 3 features coming up by PurifyYourMind · · Score: 3, Informative

    The CSS3 Color Module includes an alpha value which can apply to all elements! I wonder how long it'll take browsers to implement it, though.

    1. Re:Cool CSS version 3 features coming up by Anonymous Coward · · Score: 1, Informative

      Well, Mozilla 1.7 and Safari 1.2 both support the opacity declaration. You give it a value between 0 and 1 and it defines the alpha of the element.

  14. Re:Quality by nazh · · Score: 2, Informative

    yup, and they even got the wrong order of the psuedo-classes

    a:link
    a:visited
    a:active
    a:hover

    should be

    a:link
    a:visited
    a:hover
    a:active

    and they aslo use properitary css, speaking of the scrollbar "css". propitary css which is not properly marked with vendorname Vendor-specific extensions
    and to qoute w3.org: Vendor/organization specific extensions should be avoided

  15. Just Started This Weekend... by quantaq · · Score: 3, Informative

    I just started learning CSS this past weekend, and I love it. The review of this book seems rather serendipitous to me, then. And yes, w3schools is a great place to get started.

  16. Re:CSS is crap for layout by t_allardyce · · Score: 2, Informative

    Not true, a div can be positioned anywhere with pixel, percentage or em/ex accuracy. It can overlap others, and basically do anything a table can do but better. The only reason you hear people spending hours on basic formatting is because they want to do it absolutely correctly, collapse well (which tables don't) and want it to work in all browsers (which would be made easier if browsers bloody well worked properly). If you don't care about W3C correctness, then a div can be positioned anywhere and anyhow, i cant see how your logic works: a div can be positioned anywhere like a table cell, but with the added advantage of being able to specify exact co-ordinates, its as simple as that, it can make use of all the same hacks and dirty work-arounds that tables can use if they want.

    --
    This comment does not represent the views or opinions of the user.
  17. Re:CSS is crap for layout by medeii · · Score: 5, Informative

    Yup. Wired certainly isn't a "big commercial website." Neither is ESPN, apparently. Or AOL, Inc.com, the PGA Open Championship, Sprint PCS, Phish.com, Quark.com, the U.S. Mercedes-Benz site ... the list goes on. Did you even think to Google for any of the myriad discussions about all of these sites switching to a better layout -- or did you just feel like pulling generalizations like "You won't find one." out of your ass?

    There are very, very few things that HTML can do, that CSS cannot -- and what's more, it's simple to design a site that works around those limitations. For every incompatibility or limitation CSS has that causes an extra five minutes of design headache, it saves fifty minutes through its simplicity.

    But, who am I to tell you that? Why don't you discover it for yourself? Start here.

    --
    got standards? --- http://www.w3.org/
  18. Re:CSS is crap for layout by Yosho · · Score: 2, Informative

    Neither Mozilla nor Opera's homepages use tables, but they do use CSS.

    --
    Karma: Terrifying (mostly affected by atrocities you've committed)
  19. Re:And Then There's IE by Tin+Foil+Hat · · Score: 2, Informative

    Unfortunately, simply knowing and understanding the standards just doesn't go far enough. You also need to know the most serious quirks of all of the major browsers. The W3C is not going to help you with that.

    Reading and understanding the W3C recs is good, even commendable, but it's only part of the equation. Tutorial sites can tell you things that the W3C cannot. Things like how Internet Explorer messes up the box model (your alignment promlem is most likely here), how IE 6 changed it, why it's still wrong, and what you can do about it. I pick on IE because it's easy, but there are various bugs and mistakes in all the other browsers as well, some of them are serious and can bite you in the butt. Tutorial and web design sites are good places to look for such information.

    Oh, and by the way, sanity is for wussies ;)

    --
    No matter how many of my rights are taken away, somehow I still don't feel safe. -Frigid Monkey
  20. Re:And Then There's IE by Anonymous Coward · · Score: 1, Informative

    In case someone diddnt know.. IE behaves much much better when there is a proper doctype declaration. With out a doctype, IE goes into HTML4.0 quirks mode so that pages adapted to flaws in earlier versions(like the broken box modell) are displayed correctly. With a XHTML1.0 doctype, the box model is correct. (AFAICT)

  21. Dreamweaver by mnemonic_ · · Score: 4, Informative

    Dreamweaver MX 2004 (which follows DW MX, which followed DW 4...) has excellent CSS support. It knows when to use div and when to to use span and has an easy interface for creating comprehensive CSS styles. It interprets CSS shorthand flawlessly. It has a convenient CSS reference. It also knows the difference between styles, pseudo-styles, and re-defining tags using CSS.

    The WYSIWYG can display CSS elements far better than GoLive or FrontPage, though I mostly use the Code view.

    Maybe you should try a more recent version of Dreamweaver. Also, you might be interested in the Dreamweaver Task Force which helped bring DW to greater standards compliance.

  22. For those to cheap to buy a book by ubergnome · · Score: 2, Informative

    I find this link useful http://msdn.microsoft.com/library/default.asp?url= /workshop/author/dhtml/reference/dhtml_reference_e ntry.asp

    Yes, I know we all hate microsoft -- but the reference clearly explains (at the bottom of each entry) whether the widget is CSS1/CSS2/IE-only compliant.

    I could do my job without a reference like this, but it's nice to have something to peek at when you start feeling insecure about your abilities

  23. Why settle for second best? by veg_all · · Score: 3, Informative

    I haven't read this CSS book, but I've read a few, and the best ones always seem to have the same author. I can't imagine how one could be more clear and complete than Eric Meyer's Definitive Guide. He's also published a useful reference to CSS 2.0.

    --
    grammar-lesson free since 1999. (rescinded - 2005)
  24. Re:crap for layout - NOT! (well, not entirely) by JimDabell · · Score: 2, Informative

    a word in favor of tables: they're NOT deprecated for tabular data, and DESPITE the "zealots'" insistence that they are inherently EVIL for layout, they ARE still "legal" there.

    The HTML 4.01 specification directly contradicts you:

    Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.

    It seems pretty clear that <table> elements aren't legal for layout purposes, with or without quotes around the word "legal".

    There are still issues: fonts are (render?) slightly larger in Moz 1.4 than in ie5.5 or 6.

    This is the web; font sizes will vary depending on a whole range of factors and if you are expecting any particular size, then you are doing something wrong.

  25. Re:PS by Anonymous Coward · · Score: 1, Informative

    Firstly, named colours aren't bad, using non-existent colours is.

    Secondly, I don't think you are in any position to criticise when you don't even understand the difference between properties and attributes (FYI: CSS doesn't have attributes).

  26. Excellent CSS tutirials by $exyNerdie · · Score: 4, Informative


    Since this discussion relates to CSS, here is a site with two excellent tutorials on CSS (bookmark it even if you don't use CSS now):

    - CSS Positioning (5 pages)

    - Using Style Sheets (7 pages)

    These two might help save you money on buying a CSS book

  27. Book's Author on Safari, IE Extensions, Etc by CaptMondo · · Score: 2, Informative

    Woo hoo - I've been Slashdotted. And with a decent review! ;-) Fourth book lucky I suppose...

    Okay, some explanations are in order for some of the questions I've run across:

    Why Safari isn't covered: Safari was only available as a pretty buggy pre-release version while I was writing the book, and it only became 1.0 during printing (figures). I didn't think it worthwhile to include information on this browser until it became more stable, especially since it was obvious that many of its CSS-related bugs were being worked out in successive beta releases. Instead I've covered that info in the Web site, which also includes info on more recent versions of Konqueror and OmniWeb to which it is related through a common rendering engine.

    Somebody mentioned that dealing with IE extensions was daft, and shouldn't be taken seriously. I decided to add them into this edition of the book in order to be thorough, and because somebody on Amazon had complained about the lack of any such listing in the first edition. The commentator is probably thinking about the various transition and filter effects thrown into the early editions of IE, which for the most part are about as useful as the beloved tag (they *are* covered however, at the end of the book). Far more interesting are the CSS extensions that have been added primarily for internationalization/localization issues. The CSS extensions Microsoft has added for dealing with things like Ruby layout for the Chinese-Japanese-Korean languages definitely should be taken seriously, as they are genuinely useful. What's more, many of MS' CSS extensions in this area have led the way towards what has become (or will likely become) the official standard. MS does get a basting for seriously jumping the gun on the W3C process, but if you want to starting working now on some CSS3-related code, there's plenty of IE extensions that lead the way that you can play with now.

    And my apologies to those who have run into the database errors on the book's supporting Web site -- this is now fixed. Turns out my ISP had changed servers on me, which was the original cause of the problem.

  28. Re:CORE CSS TEAM by seney · · Score: 2, Informative

    Assuming this AC is talking about centering an element, this post is not "interesting".

    Yes, you can float: left; or float: right;, but it's not accomplishing just an alignment. It's taking the element out of the normal flow of a document. In order to align to the center set the margin to margin: auto;

    Zeldman's "Designing with Web Standards" is a wonderful book on CSS. I've read plenty and his was by far the best.

    http://www.zeldman.com/dwws/

  29. Borrowed from an reply I read earlier... by Denyer · · Score: 2, Informative
    "Designing for 90% of browsers is our policy? Here's a question. If I answered 10% of the sales calls with "hello [companyname], could you please fuck off", how would that affect our sales?"

    I realise you're just trolling, but it's a point that deserves to be beaten into the heads of as many web designers as possible: if that one in ten is a guy who doesn't see too well, who surfs from work in a browser his IT tech has locked down settings in, or whatever, if he is the one in ten who thinks "hey, these people are nice enough to cater to me" and buys the product... your unfriendly website just got its ass handed to it by the competition.

    Good designs work for everybody, and they give you a business advantage.

    --
    Ph-nglui mglw'nafh Gates M'dna wgah'nagl fhtagn.