Slashdot Mirror
CSS Cookbook
Michael J. Ross writes "Anyone involved with the coding of Web sites likely knows that Cascading Style Sheets (CSS) should be used for styling the content of their sites' pages — setting text sizes and fonts, setting background colors, sizing margins, positioning images, and more. CSS allows the Web developer to specify the visual appearance of the site, separately from the HTML, and thus to be able to make changes in the future within a single stylesheet, rather than hunting through the HTML and modifying every occurrence of each affected element. The benefits of CSS are many, but so too can be the frustrations when the developer turns for help to CSS books heavy on theory and light on practical explanations. For every Web site 'cook' feeling the heat in their cyber kitchen, there is an ingredient that can help: CSS Cookbook." Read the rest of Michael's review,
CSS Cookbook
author
Christopher Schmitt
pages
538
publisher
O'Reilly Media
rating
8
reviewer
Michael J. Ross
ISBN
0596005768
summary
Practical solutions to common CSS challenges
Written by award-winning Web designer Christopher Schmitt, this book is published by O'Reilly Media, under the ISBN 0596005768, and is in its second edition, having been updated for Internet Explorer 7 and Firefox 1.5. The book has its own Web page on the publisher's site, offering the book's table of contents, the index, Appendix D ("Styling of Form Elements," in PDF format), and links for reading and submitting book reviews/comments, as well as reading and reporting errata (there are none, as of this writing).
The book's 538 pages are organized into 12 chapters, which cover the major areas of interest to the Web developer: CSS overview, typography, images, page elements, lists, links and navigation, forms, tables, page layouts, printable pages, hacks and workarounds, and design considerations. Appendix A briefly describes some of the better online CSS resources, including tutorials, design guides, discussion groups, technical references, and tools, such as the W3C validators. The next two appendices cover CSS 2.1 properties, proprietary extensions, selectors, pseudo-classes, and pseudo-elements.
The fourth and last appendix, on the styling of form elements, details how 20 CSS properties affect eight form elements, as displayed within Windows Internet Explorer 5, 5.5, 6, and 7; Mac Safari 2; Windows and Mac Firefox 1.5; Windows and Mac Netscape Navigator 7.2; and Opera 8.5. The form elements considered are: checkboxes, file upload elements, radio buttons, text fields, multiple options, select elements, submit buttons, and text areas. The author does not explain exactly what page elements are meant by "File Upload" (at the beginning of the appendix) or "File Input" (the actual section title). Presumably he is referring to the file display field and Browse button, and not the file locator dialog box, which is determined by the browser and operating system. More importantly, he does not explain what is meant by "multiple options" nor "select elements," and neither term is listed in the book's index. Future editions of the book would benefit by beginning every element's section with an example, showing the code as well as the element's appearance on a Web page. Despite this obvious omission, this appendix could prove a godsend to anyone concerned with how these various types of elements are affected by CSS within these eight major browser versions. As noted earlier, the appendix can be downloaded for free.
HTML/CSS books generally fall into two broad categories: Introductory books are usually sufficient for beginners, because they cover the basics. But they are typically useless to the veteran developer who is struggling to understand why Internet Explorer is mucking up yet another page that looks fine in Firefox, Opera, and Safari — and how to work around the problem. Advanced books assume that the reader already has a relatively solid understanding of the technologies, and uses that basis as a foundation from which to explore sophisticated design techniques. But even those books prove inadequate for the developer who is simply wondering how to best use pure CSS to do such presumably straightforward tasks as positioning some images horizontally, with small captions centered underneath each one. In fact, many of those advanced books seem to have little interest in clearly explaining how the reader can do what the author has done, largely because the sample projects and their source listings are too long and involved, thus burying the critical HTML and CSS in pages of code.
There is clearly a great need for one or more HTML/CSS books aimed at the developer who already understands the basics, and wants to apply that knowledge for building robust Web pages, all while following defensible best practices. The O'Reilly "Cookbook" titles are intended to fill that gap, by presenting the material in the form of recipes, each comprising a brief statement of the problem to be solved, a summary of the solution, and a discussion of the solution's details. Oftentimes additional resources are referenced, in a "Sea Also" subsection, which might have one or more links to relevant Web sites. The discussion subsections usually have sample code, in addition to a figure showing the code's output.
Possibly the greatest benefits of the cookbook format, is that it forces the author to clearly state the purpose of each section, and then to get right to the point of how to achieve that purpose. This prevents the meandering seen in many of the advanced design books, which is the main reason why they can be so frustrating for the developer who wants to quickly find out how to perform a specific task on a Web page, such as the image positioning task mentioned earlier. Possibly the biggest downside to the cookbook format is that it results in contrived problem statements, such as the very first one in CSS Cookbook: "Problem — You want to use CSS in your web pages." Is that truly a problem? Is it not much more a goal or task, than some sort of problematic difficulty?
Yet aside from any misleading subsection titling, the recipe format does cause any (largely) expository material in a technical book to get chopped up into somewhat artificial pieces. It is more noticeable in the first chapter of this particular book, titled "General," in which Schmitt explains the fundamentals of CSS: selectors, classes and IDs, properties, the box model, style sheets, comments, shorthand properties, floating images, absolute and relative positioning, and using CSS with the more common page development tools. As the author gets into more advanced topics — for which individual subsections can stand more on their own — the recipe format works fine. One advantage is that the section titles end up being detailed enough that the reader can, in most cases, quickly find the relevant section to address their needs.
Overall, this book is a fine addition to O'Reilly's growing list of programming titles. However, like all books, it is not perfect. It does not cover all of the more common tasks that the average Web programmer might want to accomplish — but it does hit the bulk of them. Sadly, all of the figures in the book are in black and white, including those displaying colors on the sample Web pages. Shades of gray are just not optimal. Fortunately, in most cases, the crux of the technique is discernible. In addition, the sample code has too many instances where layout is achieved using tables, and not pure CSS. Lastly, the book's index — similar to that of so many other technical books nowadays — could certainly use some beefing up. After all, if the reader cannot find the desired material using the table of contents, the index is their last hope, before resorting to time-wasting page flipping.
In terms of HTML and CSS information, the topics are well chosen, and the coverage of browser hacks and workarounds is excellent. Also, the most critical parts of the code are helpfully bolded. For those readers completely unfamiliar with JavaScript, it is used only where unavoidable. The book's material is neatly presented, and the author's writing style is straightforward and approachable.
On balance, CSS Cookbook is to be recommended to any developer looking for a CSS guide that is concise, clearly written, well-illustrated, and addresses the most common challenges in building Web pages.
Michael J. Ross is a computer 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 Cookbook from bn.com. Slashdot welcomes readers' book reviews -- to see your own review here, read the book review guidelines, then visit the submission page.
Written by award-winning Web designer Christopher Schmitt, this book is published by O'Reilly Media, under the ISBN 0596005768, and is in its second edition, having been updated for Internet Explorer 7 and Firefox 1.5. The book has its own Web page on the publisher's site, offering the book's table of contents, the index, Appendix D ("Styling of Form Elements," in PDF format), and links for reading and submitting book reviews/comments, as well as reading and reporting errata (there are none, as of this writing).
The book's 538 pages are organized into 12 chapters, which cover the major areas of interest to the Web developer: CSS overview, typography, images, page elements, lists, links and navigation, forms, tables, page layouts, printable pages, hacks and workarounds, and design considerations. Appendix A briefly describes some of the better online CSS resources, including tutorials, design guides, discussion groups, technical references, and tools, such as the W3C validators. The next two appendices cover CSS 2.1 properties, proprietary extensions, selectors, pseudo-classes, and pseudo-elements.
The fourth and last appendix, on the styling of form elements, details how 20 CSS properties affect eight form elements, as displayed within Windows Internet Explorer 5, 5.5, 6, and 7; Mac Safari 2; Windows and Mac Firefox 1.5; Windows and Mac Netscape Navigator 7.2; and Opera 8.5. The form elements considered are: checkboxes, file upload elements, radio buttons, text fields, multiple options, select elements, submit buttons, and text areas. The author does not explain exactly what page elements are meant by "File Upload" (at the beginning of the appendix) or "File Input" (the actual section title). Presumably he is referring to the file display field and Browse button, and not the file locator dialog box, which is determined by the browser and operating system. More importantly, he does not explain what is meant by "multiple options" nor "select elements," and neither term is listed in the book's index. Future editions of the book would benefit by beginning every element's section with an example, showing the code as well as the element's appearance on a Web page. Despite this obvious omission, this appendix could prove a godsend to anyone concerned with how these various types of elements are affected by CSS within these eight major browser versions. As noted earlier, the appendix can be downloaded for free.
HTML/CSS books generally fall into two broad categories: Introductory books are usually sufficient for beginners, because they cover the basics. But they are typically useless to the veteran developer who is struggling to understand why Internet Explorer is mucking up yet another page that looks fine in Firefox, Opera, and Safari — and how to work around the problem. Advanced books assume that the reader already has a relatively solid understanding of the technologies, and uses that basis as a foundation from which to explore sophisticated design techniques. But even those books prove inadequate for the developer who is simply wondering how to best use pure CSS to do such presumably straightforward tasks as positioning some images horizontally, with small captions centered underneath each one. In fact, many of those advanced books seem to have little interest in clearly explaining how the reader can do what the author has done, largely because the sample projects and their source listings are too long and involved, thus burying the critical HTML and CSS in pages of code.
There is clearly a great need for one or more HTML/CSS books aimed at the developer who already understands the basics, and wants to apply that knowledge for building robust Web pages, all while following defensible best practices. The O'Reilly "Cookbook" titles are intended to fill that gap, by presenting the material in the form of recipes, each comprising a brief statement of the problem to be solved, a summary of the solution, and a discussion of the solution's details. Oftentimes additional resources are referenced, in a "Sea Also" subsection, which might have one or more links to relevant Web sites. The discussion subsections usually have sample code, in addition to a figure showing the code's output.
Possibly the greatest benefits of the cookbook format, is that it forces the author to clearly state the purpose of each section, and then to get right to the point of how to achieve that purpose. This prevents the meandering seen in many of the advanced design books, which is the main reason why they can be so frustrating for the developer who wants to quickly find out how to perform a specific task on a Web page, such as the image positioning task mentioned earlier. Possibly the biggest downside to the cookbook format is that it results in contrived problem statements, such as the very first one in CSS Cookbook: "Problem — You want to use CSS in your web pages." Is that truly a problem? Is it not much more a goal or task, than some sort of problematic difficulty?
Yet aside from any misleading subsection titling, the recipe format does cause any (largely) expository material in a technical book to get chopped up into somewhat artificial pieces. It is more noticeable in the first chapter of this particular book, titled "General," in which Schmitt explains the fundamentals of CSS: selectors, classes and IDs, properties, the box model, style sheets, comments, shorthand properties, floating images, absolute and relative positioning, and using CSS with the more common page development tools. As the author gets into more advanced topics — for which individual subsections can stand more on their own — the recipe format works fine. One advantage is that the section titles end up being detailed enough that the reader can, in most cases, quickly find the relevant section to address their needs.
Overall, this book is a fine addition to O'Reilly's growing list of programming titles. However, like all books, it is not perfect. It does not cover all of the more common tasks that the average Web programmer might want to accomplish — but it does hit the bulk of them. Sadly, all of the figures in the book are in black and white, including those displaying colors on the sample Web pages. Shades of gray are just not optimal. Fortunately, in most cases, the crux of the technique is discernible. In addition, the sample code has too many instances where layout is achieved using tables, and not pure CSS. Lastly, the book's index — similar to that of so many other technical books nowadays — could certainly use some beefing up. After all, if the reader cannot find the desired material using the table of contents, the index is their last hope, before resorting to time-wasting page flipping.
In terms of HTML and CSS information, the topics are well chosen, and the coverage of browser hacks and workarounds is excellent. Also, the most critical parts of the code are helpfully bolded. For those readers completely unfamiliar with JavaScript, it is used only where unavoidable. The book's material is neatly presented, and the author's writing style is straightforward and approachable.
On balance, CSS Cookbook is to be recommended to any developer looking for a CSS guide that is concise, clearly written, well-illustrated, and addresses the most common challenges in building Web pages.
Michael J. Ross is a computer 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 Cookbook from bn.com. Slashdot welcomes readers' book reviews -- to see your own review here, read the book review guidelines, then visit the submission page.
The review states that the book has been updated for IE 7 and firefox 1.5, but IE7 only came out very recently. How did they manage to get the book edited and checked so fast after IE 7 was released?
Anthropic principle: We see the universe the way it is because if it were different we would not be here to see it.
"For every Web site "cook" feeling the heat in their cyber kitchen, there is an ingredient that can help: CSS Cookbook.""
I'm thinking more "fast food" than cook.
<!--[if IE 7]> / / / /
<link type="text/css" href="stylesIE7.css" rel="stylesheet" media="screen"
<![endif]>
<!--[if IE 6]>
<link type="text/css" href="stylesIE6.css" rel="stylesheet" media="screen"
<![endif]>
<!--[if IE 5]>
<link type="text/css" href="stylesIE5.css" rel="stylesheet" media="screen"
<![endif]>
<!--[if lte IE 4]>
<link type="text/css" href="stylesIE4.css" rel="stylesheet" media="screen"
<![endif]>
Use of hacks? Sweet!
Hacks are a bad practice that has been challenged and debated for a while now. I though, and correct me if I am wrong, that conditional HTML statements were the best way to go. Nowadays, why would someone want a book that is going to lead you to write non-compliant code.
Invexi - a Phoenix, AZ based web design and web development company.
<!--[if IE 7]> / / / /
javascript:self.close()
<![endif]>
<!--[if IE 6]>
javascript:self.close()
<![endif]>
<!--[if IE 5]>
javascript:self.close()
<![endif]>
<!--[if lte IE 4]>
javascript:self.close()
<![endif]>
... is that it's FAR more valuable trawling the net for information, using forums etc. to get answers than have to to pour through so many pages searching for specific examples or answers to your problems.
;)
My work got me a few CSS books and when the boss asked if I'd read them, I indicated I'd used them briefly for reference, but no, not as such. He wasn't too impressed until I pointed out the recent sites I'd created, all validated, all exactly to spec and all AA accessible, not to mention extreme light weight CSS which works in *any* browser without resorting to hacks.
I'm sure it's a great reference point, but the web is by far the most immediate and effective learning medium - I never stop learning and improving my CSS skills, but I don't think a book like this would help me further my skills any quicker.
The simple fact is that if your looking for very specific requirements and answers, a book will seldom fulfil that goal.
On the flip side, if your new to CSS and HTML in general and don't have a damn tight deadline, it's worth the purchase.
For those whose career is web coding, the web itself is the most valuable resource.
Or, alteratively, if your like me, I prefer reading fiction
IE7 is compatible with most of the CSS stuff I use at least so usually there are only a few bugs that have to be worked out rather than the tons that I had to deal with under IE6. I suggest just making one standard style sheet that works with Firefox, Safari, and Opera, a IE7 stylesheet that tweaks the minor bugs out, and then a stylesheet for all outdated IE browsers which should make the site usable but plain. So long as the site is usable who cares if people still using IE4 like how it looks? If they haven't cared to update their browser then obviously they don't know the difference anyway.
At what price learning? At what cost wisdom? The price is a man's peace of mind, and the cost is his life.
I'm not trolling, I swear. But I've been playing with Firefox's DOM inspector lately, and I've noticed that every single major site I've visited and "inspected" has used a nested-tables layout. Reading Slashdot will lead one to believe that that's the greatest sin one can possibly commit in HTML design, yet it seems to be done everywhere, all the time. It's my personal opinion that some things are just way easier to do with tables than CSS, and that's why people keep doing it. Am I right?
I remember when Flash was the "thing" and everyone went whacky making website completely flash based and how that came crashing down. Now flash is used as an important component of websites. CSS feels the same way to me. Everyone's on the CSS bandwagon. But ultimately it's going to be no more than a really important component of good site design. CSS limits design.
As for why anyone would write non-compliant code, that's easy... most users will be using a non-complaint browser (some version of IE).
That sounds logical ... but it isn't. You can write perfectly compliant code which will display correctly in IE6 (a non-compliant browser). The way to do it is to use only those subsets of CSS and XHTML which are correctly interpreted by IE6. IE6 is compliant in many things.
This may seem limiting but it's a million times better than attempting "browser-sniffing."
Guess the browser wars are still alive. Hm, competition is supposed to be good for the consumer right? Usually it just means more work for the developer.
What the h*!! is wrong with bacon pizza? I love bacon pizza... Bacon and cream cheese, mmm
Barnes and Noble is selling this book for $24.46, but Amazon.com is only selling it for $24.12!
Save yourself $0.34 by buying the book here: CSS Cookbook. That's a total savings of 1.39%!
A book? on CSS? Why? Do you often find yourself writing CSS without Internet access?
Personally, the only way for me to know a particular cross-browser CSS approach works is to actually test it on every browser I can. Kinda hard to do that with a book.
And if these guys were real CSS gurus, they would have written their book in XML and CSS and used Prince to convert it and then open sourced the book code.
Its' doesn't exist.
Sure it does.
The book belongs to Samuel Its. It's Its' book; his name is written inside its cover.
-30-
you forgot 'Than' vs 'Then', but then again, no coder actually writes out > or
Conditional comments were first implemented in IE5.
The reason I linked to w3cschools was to illustrate how CSS is well-published. We all know WHO publishes CSS standards and who is responsible for them.
Besides, I find content on w3cschools much, much more practical and relevant to my work in web design. Most of the content on w3c.org seem more relevant to browser-app developers. (except for those working on IE7, of course) To their credit, they do have nice tips for beginners; you might want to try them out.
As to the (thin) implication that w3cschools is the source of CSS standards, I say "touché". (the implication was not my intent) As for your personal issues with w3cschools, I suggest you take it up with them.
Have some context with your crack... takes the edge off.
This post © Copyrite Duggeek, all rights reversed.
No, seriously. I know it must be heresy to say it on here, but, even without throwing IE into the picture, CSS caused me enough headaches to get out of web development. I mean, geez, you can do fancy things, but when the things that are no-brainers with tables take an entire afternoon to do with CSS, you have to stop and wonder what the guys who came up with it were on.
CSS 3 looks like it might finally be sane, but you know CSS 3-supporting browsers won't be widely for years and years. I don't blame people for sticking with tables.
The roots of education are bitter, but the fruit is sweet.
--Aristotle
Actually, I see people mistaking W3Schools for the W3C fairly regularly. Whether it is your intent or not, you help promote this misconception when you link the way that you do.
It's not just me that has a problem with them.
Bogtha Bogtha Bogtha
that HP sight uses conditional CSS for IE6, IE5 and IE. So I think hackless-CSS is not here yet.
Should simply read: Don't
Parent apparently didn't load any of the style sheets.
Dude, there are TONS of high-contrast basically-eye-gouging styles in which you can view http://www.csszengarden.com/ as well as styles with even lower contrast than the front page default style.
If you haven't loaded any of the style sheets, you're missing the point of CSS Zen Garden entirely...
One of the goals of CSS is to separate presentation from content. When I first got into web design, I drank the Web Standards Kool-Aid (coming from a programming background, I can't believe I let myself get suckered into using CSS hacks). I have since come to realize that there are other more efficient ways of achieving that separation without resorting to tableless layouts that require you to spend > 80% of the development time on 10% of the browsers out there. ASP.NET 2.0 master pages go a long way but you can also accomplish the same thing with either simple layout tables , a judicious use of SSI's and/or a good "web language" such as PHP.
The entire point of CSS is to "degrade well." You've confused "displays identically on mainstream browsers with large resolutions" for actually degrading gracefully. To take a single example I have a lot of experience with, those beautiful table layouts fall apart on small displays. Maybe you can reasonably assume modern laptops and desktops have a resolution of 800x600, but what about my phone (128 x 160) or my Palm (320x480). A table based layout falls apart. But a CSS based layout using floating sidebars degrade reasonably gracefully on my palm. My phone doesn't support CSS and I frequently disable CSS on my Palm for speed. In both cases the CSS based layout may be dull and sequential, but it's perfectly readable. For web sites about presenting useful information this is great. Table based layouts turn into hard to read messes. Now my Palm's browser has a great feature that tries to detect tables-as-layout and linearizes them, and it's pretty good, but it occasionally trashed actual tabular data. Because people use tables to mean two totally different things ("I want this thing exactly here for visual impact" vs "This is tabular data"), my Palm can't try to present a graceful degredation.
Search 2010 Gen Con events
speaking in my capacaty as a profesional websight develaper i find that css is a useless and unneccessary complication for the vast majorety of websights. seriously, somebody please tell me how:
. html[/URL]
<TABLE STYLE="FONT-FAMILY: Zapfino"><TR><TD>some text</TR><TABLE>
is bettar than the standard:
<TABLE><TR><TD><FONT FACE="Zapfino">some text</TR></FONT><TABLE>
css is just another example of netsacpe forscing thier proprietery and nonstandeard languages and ideas on us (along with their equally horrable x.html). css doesnt even run under INTERNET EXPLOER. seriously why make a program that wont even run in the browsar the internet is based on!??!!
i make all of my websights to microsofts standard html format, often with "Net 2.0" technologies like FLASH and so far i hav yet to see a situation where replacing standard font tags and tables with netscape divs and css could acomplish anything but giving me headaches.
when i graduate im going to wriet a book on how to make web pages the right way so new developers dont get sucked in by NETSCAPE and their crappy technology
-// NETLOCKE -//
[URL]http://www.geocities.com/larkspur10/neo/home
THE BEST MATRIX FANSITE ON THE NET!!!
From the review, I don't see any reason to jump out to purchase the book. Cookbook items are already provided ubiquitously. Even a casual search on google via the general terms "best css tutorial" returns some elegant recipes for free.
One of the other reasons for using CSS: to separate content from presentation. I work at a university where all sites must soon be accessible to students with disabilities. CSS is much better than tables, and as some posts have said, CSS will be easier when more people use it more often.
Just download it at alt.binaries.ebooks
Politics is the art of looking for trouble, finding it everywhere, diagnosing it incorrectly and applying the wrong fix.
Many designers would love to use conditional comments if they had CSS block granularity. Instead, the idiots at Microsoft only implemented them at the HTML level, making a maintenance mess.
Conditional comments would be so wonderful if you could put them in a .css file like this:
That way, the purpose of each MSIE-specific kludge is clear.
With conditional comments, you would need an additional CSS file for each version of IE you plan to support:
It's Microsoft's own fault for producing a browser that needs so many kludges. Their recommended way of managing those kludges is such a joke, they really don't have any right to complain when CSS designers resort to CSS hacks instead.
In an intranet, you do what works best for your intranet. But most people who discuss web authoring on Slashdot assume, before it is stated otherwise, that a public-facing web site is under discussion.
There are things that can be done with <table> plus CSS that cannot be done in all popular web browsers with only CSS.
Until you start dealing with parts of CSS that Microsoft products either ignore or completely misunderstand. The position of <table> advocates in this thread is that there are things that <table> plus CSS can do in IE that CSS alone cannot.
No it doesn't.
http://owl.english.purdue.edu/handouts/grammar/g_a post.html
The book belongs to Samuel Its. It's Its's book.
-- http://frobnosticate.com
Sorry but as far as I'm concerned CSS is a dead duck. Until all the major browsers fully support a common standard I'm not going to bother using it. I'm simply bored of all the hacks I have to do to get pages working.
Sadly it's far easier to put the code directly into the page and to use tables for most layout. This just works and it gives the client what they want in the fastest possible time.
Most of my clients don't care about accessibility or maintenance. I can hear the cries of horror from the Slashdot crowd but this is business. My clients want something that looks good and they want it now. They don't understand the technology and they simply don't care about the issues. All they're bothered about is whether it looks like they want it to and how much it costs.
I can do this using all the horrible inline font tags etc. in half the time it takes me to iron out even 20% of the hacking required to get the equivalent effects working using CSS.
Given that we mostly develop ASP.net applications there's also the issue of the IDE putting in all sorts of crap styling that it's almost impossible to remove. Yes you can do it but again it takes too long fighting against the IDE.
So I'd love to use CSS, I fully understand why it's a good thing, but I've just lost patience with all the hacking required to get the same effects in all browsers. Every minute spent fiddling with CSS is a minute I could have spent doing work that puts food on the table.
So I'm sorry until all the browsers support a common set of CSS standards I've given up on it.