CSS: The Definitive Guide 160
Michael J. Ross writes "Every Web developer knows that Cascading Style Sheets (CSS) makes it possible to separate the contents of Web pages from the styling of the elements on those pages. This in turn confers tremendous advantages, such as allowing site-wide changes of appearance to be made just once, in a single stylesheet file, rather than in all of the pages containing the affected elements. The syntax and proper usage of CSS is not as simple as implied by many HTML/CSS books, most of which fail to provide enough detail as to how CSS is applied to page elements. Web developers relying upon these books soon find themselves hitting those limits, and becoming frustrated when trying to debug Web pages. CSS: The Definitive Guide, authored by CSS expert Eric A. Meyer, aims to fill that gap." Read on for the rest of Michael's review.
CSS: The Definitive Guide | |
author | Eric A. Meyer |
pages | 536 |
publisher | O'Reilly Media |
rating | 9 |
reviewer | Michael J. Ross |
ISBN | 0596527330 |
summary | A comprehensive CSS reference guide. |
Published by O'Reilly Media in November 2006, this title is now in its third edition. The first edition appeared in May 2000, and the second in January 2004 — with each one establishing the book as an immediate favorite among hard-core Web programmers. Each revision brought it up to date with the evolution of CSS as a standard, its support among the most popular Web browsers, and its usage within the Web development community. This latest edition covers CSS2 and CSS2.1, but does not include the CSS3 modules, including those that have reached Candidate Recommendation status, because their implementation is largely incomplete among most of the browsers.
Web veteran Eric Meyer presents the book's material in a methodical manner, starting with an overview of CSS's purpose and advantages, and quickly moving into the details of the technology: selectors, structure, inheritance, values, units, fonts, text properties, visual formatting, padding, borders, margins, colors, backgrounds, floating, positioning, tables, lists, and generated content (e.g., bullets of unordered lists). The last two chapters address user interface styles (system fonts and colors, cursors, and outlines) and non-screen media (such as paged and aural content). The book's 536 pages are organized into a total of 14 chapters and three appendices. The first appendix is a complete CSS property reference, spanning more than 40 pages, with visual, page, and aural properties grouped separately. For each property, Meyer explains its purpose, its valid values, the initial value, what elements it applies to, whether it is inherited, its computed value, and additional notes (if any). The second appendix is a reference for the selectors, pseudo classes, and pseudo elements. The third and final appendix is much shorter than the first two, but no less interesting, as it discusses a sample HTML 4 stylesheet, which is presented in the CSS2.1 specification as the recommended style sheet for developers to use.
As with all of their other titles, O'Reilly Media offers a Web page devoted to this book, where visitors will find links to online versions of the book cover, table of contents, index, registration form, reader reviews, and errata (of which there are none, as of this writing). In addition, the page has offers to receive a volume discount, and to read the book online as part of O'Reilly's Safari service.
Anyone who is considering purchasing this book might initially be concerned by the dearth of feedback on the Web sites of the publisher and the major online booksellers — in the form of few reader comments, and no reported errata. The prospective reader may wrongly conclude that this indicates a lack of interest in the book, and thus it must be unpopular — probably for good reason. But just the opposite is true, as demonstrated by the book's sales rank on Amazon.com alone: #4631, as of this writing. Unlike far too many of the other HTML/CSS books available, this one does not engender scathing reviews by customers angry with the books' shoddy writing and sloppy mistakes. Rather, Meyer's contribution is the type of solid reference book that the discerning Web developer will quietly place on their desk or bookshelf, within easy and frequent reach — possibly displacing a dog-eared first or second edition of the same title. Furthermore, the absence of errata should suggest that most if not all kinks have been worked out of the book, and not that the book is failing to receive careful readings.
CSS: The Definitive Guide benefits not just from its multiple revisions, but also from Eric Meyer's clear and complete writing style. Unlike his more advanced books, this one is far more approachable, making it possible for the reader to easily jump into the midst of any topic and quickly pick up the thread — as is essential for any technical reference work. The theoretical discussions and the sample code demonstrate his abundant experience in using CSS in the real world, discovering or verifying its idiosyncrasies, and pushing it to its limits. Most of the critical visual and positioning topics are well illustrated with diagrams and sample output, few of which are weakened by the lack of color in the grayscale figures. Last and certainly not least, readers should be pleased that the book's material has been updated for Internet Explorer 7, which promises to fix many inexcusable problems in earlier versions of the browser.
Rarely does one come across a programming book that has no significant flaws, and will likely become a favorite resource for developers everywhere. CSS: The Definitive Guide is a comprehensive, well-written, and welcome addition to the library of any Web developer who wishes to understand and utilize CSS better.
Michael J. Ross is a Web consultant, freelance writer, and the editor of PristinePlanet.com's free newsletter. He can be reached at www.ross.ws, hosted by SiteGround.
You can purchase CSS: The Definitive Guide from bn.com. Slashdot welcomes readers' book reviews -- to see your own review here, read the book review guidelines, then visit the submission page.
My experience (Score:4, Informative)
Re:My experience (Score:5, Funny)
Re: (Score:2)
Apt (Score:1)
Re: (Score:2)
Re: (Score:2)
Hmm, interesting. I haven't bought an O'Reilly book for awhile, but this is good to know. I did some googling, and the binding style is called RepKover. Apparently they stopped using this binding as a cost saving measure in 2001 after the dotcom bust, a
Re: (Score:1)
Re: (Score:1, Offtopic)
Re: (Score:2)
It's probably cracked by design [oreilly.com], so that it lays flat. (Credit: I had no idea O'Reilly books did this until reading reading a sibling post about an O'Reilly Python book; I'm just being more explicit and providing a link).
A wonderful book (Score:5, Interesting)
designer not developer (Score:1)
Re:designer not developer (Score:5, Insightful)
The web makes that distinction hazier and hazier. Many of us end up doing both in spite of the fact that we're not really suited to it, unfortunately. Of course, the software lets us get decent results easier and easier all the time, so that helps.
But even just talking about CSS, is doing CSS really just design? With all the stupid CSS tricks you have to play, it seems to me more like cross-platform programming than anything else.
I realize that CSS is not a programming language. More's the pity; if it were a little more like a language then a lot of things that are very hard to do in CSS and require dynamic styles (or at least assignation of styles) to do properly would be very easy. For example, I should be able to say that an element is n% minus the width of another element... But since I can't I have to figure out how many units (typ. pixels) are in n%, then figure out how many units wide the other element is, and then set the width of the element I was trying to size accordingly. And if the element I'm trying to fit in next to is sized in ems instead of px, I have to recalculate this data and resize elements every time the font size is changed.
Re: (Score:2)
Re: (Score:2)
span:lang {font-style:italic}
body:lang(en) span:lang(en),
body:lang(es) span:lang(es),
body:lang(fr) span:lang(fr),
body:lang(dk) span:lang(dk) {font-style:normal}
paint with broad strokes, then carve out the exceptions.
(and check the syntax; I've never styled arbitrary xml documents, just ordinary HTML.)
Re: (Score:2)
Yes, I wish CSS had support for if statements.
Hell, I'd be happy with just named constants for colors and numbers (and maybe even for whole or partial selector expressions?).
And now that we're dreaming here I'd be extra happy with math expressions for numbers especially if they could reference properties from other elements. That is starting to get a little like duplicating the DOM scripting stuff though.
Re: (Score:3, Funny)
Microsoft CSS thought about this... (Score:2)
My initial response was what the hell does that do? But it actually locks this table entry within a parent div tag.
It's basically like the behavior in Excel where you freeze the top columns or something like that. So it's not
Re: (Score:2)
for just the top row there is an easier way to do it, though, but IE doesnt support it: separate the header of the table using a thead and set it to position: static, i believe.
Re: (Score:2)
Especially with all the crappy designers out there who use Dreamweaver and really haven't a clue about CSS and could care less.
We're all stuck with
.
.
.
Re: (Score:2)
I'd frankly be happy with some pretty damned simple expressions. I just want to be able to refer to elements by ID (and offset or otherwise manipulate them) so that I can base certain values on values in other elements. Is that so wron
Re: (Score:1, Interesting)
Re: (Score:2)
Re: (Score:3, Insightful)
So if you're using this book, you're a developer, not a designer.
Re: (Score:2)
Re: (Score:3, Insightful)
Re: (Score:1)
My question (Score:4, Interesting)
Re:My question (Score:5, Informative)
Css browser support [webdevout.net]. Pretty good guide. If you design for FF or Opera and don't use any hairy CSS, it should look pretty good in IE7 (assuming you're using a decent DOCTYPE) and can be tamed in IE6 with a few tweaks to fix things like the broken box model and such.
Interesting thing I noticed when scrolling through the guide linked above - the level of css support between IE6 and IE7 isn't all that different (maybe a handful of new items supported). So, IE7 was mainly a bugfix release. Five years and they finally fixed the CSS engine. Way to go MS.
If you can't see the sarcasm dripping from above, check your glasses.
Re: (Score:2)
Can't see any sarcasm dripping of my glasses neither...
Re: (Score:2)
Suppose you have some background images, alpha png of course, and you want to do rollovers. Well, the right way to do it is to put all the images into a single image file, so that they'll all load at once, and help conserve bandwidth and http connections. You use background-position and width/height to specify which portion of the image to display where ever whatever.
Of course, 3 months later and IE7 is still lingering in the 15% of all unique vi
Re: (Score:2)
Re: (Score:3, Informative)
Good question, each browser has different levels of support. If you check out some browser usage [w3schools.com] you can see a decent estimate of what browsers are most used. Then you can check out browser CSS compatibility [quirksmode.org].
Besides IE6 (I'm not supporting IE5 Mac), I do not see issues across (modern or heavily used) browsers very often, unless I'm trying to do some sophisticated, multi-column, nested, floating DIV
Re: (Score:2)
You don't know much about Joe Sixpack, do you?
Good Book. Bad Index. (Score:5, Informative)
The book is, as the OP states, excellent.
The problem lies with its index. Actually using the book is very difficult because the Index is so non-inclusive of the subjects within the book.
Worth getting, but be prepared to flip through it a whole lot more than you would if the Index was well written.
My 2 cents.
Re: (Score:2)
The index in the pocket reference is good. It's got everything I need. But if it didn't, I could give them feedback: there's a line at the bottom saying "We'd like to hear your suggestions for improving our indexes. Send email to index@oreilly.com."
I think I'll send them an
Simplify CSS development (Score:1, Insightful)
Re: (Score:3, Interesting)
Re: (Score:2)
Re: (Score:2)
Actually, there is the Internet Explorer Developer Toolbar [microsoft.com] which is quite useful for debugging IE's quirks.
What does this book offer... (Score:3, Insightful)
Re: (Score:3, Insightful)
Re: (Score:2)
Some of us prefer hardcopy to read and work through or for reference. I am one, if I read too much on a monitor I get sore eyes and headaches. This doesn't h
Re:What does this book offer... (Score:4, Insightful)
What does this book offer... ... that all the free online resources [do not] offer?
Just one thing: Eric Meyer's insights into the theory and practice of CSS. A web developer reading one of Meyer's books is sort of like an aspiring novelist reading Steven King's book On Writing.
IE is the roadblock (Score:4, Interesting)
Re: (Score:2, Informative)
There is, of course, some compromise, but it sure beats developing with tables, which is just a mess.
Re: (Score:2, Informative)
Hey, don't knock conditional comments. While I'm all for semantics, the ability to target IE7 and IE6 and serve them their own stylesheet is immensely useful when you're handling things like IE6's penchant for doubling the margin on floated elements.
And yes, while it isn't a perfect solution, I'm just one find/replace away from tossing the IE6 stylesheet the minute its market share drops low enough.
Re: (Score:1)
Re: (Score:2, Informative)
XHTML is not appropriate [hixie.ch] on Internet Explorer. I use XHTML 1.0 Strict on my site, but I also know that the vast majority of my regular visitors are using Firefox. I'd certainly never suggest using XHTML to make things easier on IE. You can get the same advantages, and avoid the complications, if you just use semantic-meaningful HTML 4.01 and CSS, making sure each validate.
Re: (Score:1)
Re: (Score:3, Informative)
that, or have your site change the content-type in a script, depending on what the browser sent in the Accept header.
if you're not using application/xhtml+xml in development, you might as well stop using XHTML all together, because chances are there are errors all over the place.
Re: (Score:2)
but there are certain things (most) validators wont even catch, but your browser will. e.g., in XHTML, CSS is case sensitive. took me a while to figure out that one.
Re: (Score:1)
The IE conditional includes are a nice idea - I wish other browsers did that as well, because it would make working around the bugs a lot easier. The majority of your code goes in a normal cs
Re:IE is the roadblock (Score:5, Informative)
If your DOCTYPE tag at the start of your HTML starts with something like:
[!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"] (in angle brackets, thanks Slashdot!)
Then IE/FF will render it in a fairly similar way. If you don't include the URI of the DOCTYPE ("http://www.w3.org/TR/html4/strict.dtd", above) then you're stuck in quirks mode hell.
That said, IE still sucks at CSS.
Re: (Score:2)
You work with CSS and you can't figure out how to escape <angle brackets>? It's < and > if you use "HTML Formatted". Well, at least you previewed :)
Re: (Score:2)
Re: (Score:2)
Re: (Score:2)
And not to dig back or anything, but I spent about a week trying to get the page to work before deciding I had better things to spend my time on. Using tables I got it rendered in a few minutes. Right now the rewards are just not big enough to justify this effort. For layout changes, Dreamweaver will proliferate them throughout the site. Might not be as slick as CSS, but it works. Sometimes
Re: (Score:2)
Not the only positive of CSS. (Score:3, Funny)
Or in the case of MySpace, CSS allows a user to make a website with no content look better by overdosing on the style.
Re: (Score:2)
Might be worthwile (Score:4, Insightful)
Re: (Score:3, Interesting)
Re: (Score:2)
I've never once had a client that actually cared about what I did with the code or if I used 100% kosher W3C-approved code. The only thing that all of my clients have wanted to hear is, "This works to solve the problem at hand and it will always work reliably."
I don't like to write kludgy code if I can help it because I consider
Re: (Score:2)
Re: (Score:2, Informative)
Re: (Score:2)
#COLUMN1 {
position : absolute;
top : 10px;
left : 10px;
width : 20%;
}
#COLUMN2 {
position : absolute;
top : 10px;
left : 25%;
right : 25%;
}
#COLUMN3 {
position : absolute;
top
Re: (Score:2, Insightful)
How about the circumstance that you want something after the 3 columns? The absolute positioning screws that up. How about the circumstance that the window is resized? At smaller widths, the columns overlap each other. How about the circumstance that you want all 3 columns to have the same height? Every 3 column css/div layout I've seen fails at some of the above or require multiple layers of non-intuive divs and css hackery that make a table layout seem elegant.
Tables are overused, but they're less p
Re: (Score:2)
Some more experimentation leads to the following:
max-height : 400px; overflow : auto;
The widths are defined as percentages. If your window is small enough to break that, then it's small enough that nothing will look good.
Re: (Score:2)
Re: (Score:2)
Re: (Score:2)
Nothing's wrong with CSS on its own terms... but I still don't understand why people think that Cascading Style Sheets should be used for layout.
Granted, HTML wasn't designed with layout in mind, either, but it's a hell of a lot simpler to make a table with HTML than it is to futz around with CS
Re: (Score:2)
It may have something to do with a standard called CSS-P where the P stands for Positional. Weirdest thing, you tell people they can position things and they go all nuts about wanting to, you know, position things.
Re: (Score:2)
Not saying I wouldn't end up using it if I could, but it just seems hard to knock table layouts when the ideal solution is making css render something as if its a table.
Why?!? (Score:1, Redundant)
Remember folks... (Score:1)
Is CSS a Failure? Use wysiwyg web editors? (Score:2, Insightful)
If you need a 536 page book to "Master" such a trivial part of web development as page and text formatting then CSS is a failure. Are there any wysiwyg "Html editors" that produce portable CSS? If so, then the book is obsolete.
As any Word(tm) user knows, page layout and text formatting should be done Visually. I don't code in assembler any more. And I shouldn't have to write text-formatting codes. Troff was obsolete years ago! CSS is just Troff on steroids.
CSS is such a pain in the butt we should
Re: (Score:2, Insightful)
Even Adobe Imageready (as of CS2) uses a obsolete and backwards apprach to creating rollovers from image slices. This can be done with CSS, but even the latest version of Imageready uses a badly depecated table & java
Re: (Score:2)
CSS is such a pain in the butt we should all go back to using tables. I really think it's easier.
Go back? I never stopped. I use CSS for text/form styles, and that's about it. Good old
:)
fashioned HTML tables are where it's at. I'm perfectly happy sticking with what works.
CSS is pretty much the one thing developer-wise that really gives me that 'dinosaur' feeling.
Just don't see the need for those massive CSS files that try and lay out an entire site for
you. I'm not sure whether I'm just getting old and curmudgeony, or there really isn't a good
reason for laying out stuff in CSS.
Hell, might be both.
Re:Is CSS a Failure? Use wysiwyg web editors? (Score:4, Insightful)
What any Word(tm) user with any experience knows, is page layout and text formatting should be done in anything other than fricking Word, except you have to send in a fricking Word file and exporting Word from any other applications almost works. At least OpenOffice is annoying and buggy for free.
Bearing in mind the web was invented by a bunch of physicists its a wonder that it uses HTML and not LaTeX Now, that would be fun: a default page design reflecting the acme of the typographers art (LaTeX output is really beautiful) and a vertical learning curve if you wanted to change that style.
Re: (Score:2)
CSS is such a pain in the butt we should all go back to using tables. I really think it's easier.
As I was learning CSS, I used to think this, too. In some ways it's true: using tables to get your layout done is easy because the form is apparent from the table itself. CSS obscures that to some extent with floats and margins.
But some things are possible in CSS that just cannot be done in HTML tables. For example, I can say something like "Unvisited ypertext links contained in a "navigation" div should b
Re: (Score:2)
You're confusing "style" with "layout," sir. Here's an example that us
Re: (Score:2)
Oh, but you are, and it does. The comment to which you replied makes its scope very clear:
Page layout and text formatting. Sounds more like "layout" than it does "style."
Re: (Score:2)
You're quoting very selectively and distorting the original context. In particular, the OP makes reference to Troff. From the OP:
Troff, my garrulous interlocutor, is for text-formatting.
You are correct that tables don't style text, but the point the OP is making is about t
Re: (Score:2)
Mea culpa. The OP is talking about layout, not "formatting" which I mistakenly took to be "styling."
I have confused the argument from the word "go."
TheGreek: 1, mistersquid: 0
Re: (Score:2)
IMO, people who bitch about CSS haven't used it long enought to get it. It's not that terrible, and once you get in the swing of it, you'll realize it's vastly more powerful than the clunky old table.
Re: (Score:2)
Layout is not trivial. Clearly you have no concept of a) what you're talking about here, nor b) the power inherent in CSS.
There is no such thing as "WYSIWYG HTML". The "What You See..." part is CSS. HTML is not now, nor was it ever, intended to have anything to do with what
ummm (Score:1)
ProgrammingBooks.org (Score:2)
http://www.programmingbooks.org/ [programmingbooks.org]
For example, here are the top ranked CSS books: http://www.p [programmingbooks.org]
MOD PARENT DOWN. Referral spammer (Score:1, Informative)
Next time, (Score:2)
Re: (Score:2)
It's not a huge deal to me, but it may be to some people.
Re: (Score:3, Interesting)
Its when someone decided "Woooo, lets divide the page in 2, the logical structure and the layout!" that it got to become hell (aka: CSS2. For this post, I'll talk as if CSS2 was implemented at 100% in all browsers, to avoid some bozo saying "its microsoft's fault if you hate CSS blah blah blah).
Since CSS came abou
Re: (Score:2)
Re: (Score:2)
One page you'll have a menu of elements ala Windows Control Panel, bunch of floated stuff. The next you'll have a master detail or
Re: (Score:2)
You might want to make sure your fly is zipped.
Re: (Score:2)
Re: (Score:2, Insightful)
As many have said in this string of posts, without the use of tables, it is no longer a job for the general web creator to create a three column lay out, without being a complete CSS guru and even for them it gives them headaches.
It's very easy and requires less code than using a table.
In my estimation, what the designers of CSS have managed to do is crush the life out of the promise that once was the a usable, if slightly clumsy, way to present information.
In my estimation, they've given the web
Re: (Score:2)
The ol' World Wide Web has moved on from static lists of your favorite websites that you put up on your 5MB of University webspace.
Re: (Score:2, Insightful)
Usually I'm content just to read other people's comments and letting the Slashdot market-force correct misconceptions, but you, sir, have forced my hand. I know there's already an good reply by another poster, but here's my take.
As many have said in this string of posts, without the use of tables, it is no longer a job for the general web creator to create a three column lay out, without being a complete CSS guru and even for them it gives them headaches.
Umm.. no. Among the many ways one can do this, one of the simplest one will take all of.. four divs, 1 parent and 3 contained siblings. If you want more precise controls, then of course, you have to delve deeper into the levels of complexity - but how is this different from so
Re: (Score:3, Informative)
CSS isn't a content language, its a styling langua