Styling Web Pages With CSS 104
r3lody writes "Styling Web Pages with CSS: Visual QuickProject Guide, by Tom Negrino and Dori Smith, helps the beginning web designer learn how to use CSS in a simple, easy-to-follow format. This being my first exposure to one of the Visual QuickProject Guides by Peachpit Press, I was both pleased and disappointed when I received this slim volume. I was pleased in the presentation and clear descriptions given to each aspect of Cascading Style Sheets (CSS). I was disappointed in the brevity of the text, and the lack of downloadable materials to use to follow the examples in the book." Read below for the rest of Ray's review.
Each chapter starts with a brief explanation of its subject, followed by the major topics introduced via large, colorful titles. Finally, any "Extra Bits" provide follow-up explanations or point to where you can get further information.
| Styling Web Pages with CSS: Visual QuickProject Guide | |
| author | Tom Negrino and Dori Smith |
| pages | 144 |
| publisher | Peachpit Press |
| rating | 7/10 |
| reviewer | Ray Lodato |
| ISBN | 0321555570 |
| summary | A beginner's guide to the proper use of CSS |
Before any CSS is discussed, there is a general introduction including how the book is structured, the sample web site to be created, and what tools will be useful to create the site. For the tools, the authors recommend at least a text editor (not a word processor) and your favorite browser. BBEdit and TextWrangler are suggested for Mac owners, while Notepad is okay for Windows. I personally use Notepad++, which has styling cues for both HTML and CSS (as well as many others), so I would recommend it for Windows users. To insure compatibility with the browser, Tom and Dori say you should have Internet Explorer, Firefox, and Safari. Strangely, Opera is barely mentioned in the book. I tested the examples using the first two. Finally, a true CSS editor might be useful, as it will provide you with your options. They suggested MacRabbit's CSSEdit for Mac users, or WesternCIV's Style Master for either Macs or Windows. I used Style Master 4.6 for Windows during testing.
After the introductory chapter, CSS is explained starting with a chapter on the basics, with simple guidelines for their use. Classes (which can be used many times) are contrasted with ids (which can be used only once per HTML file), and the benefits of using external style sheets versus internal styles is explained.
The next three chapters build upon each other to provide gentle instruction on how to layout and style the text and images. Formatting menus, tables and headings are tackled next, followed by a chapter devoted to browser differences. Finally, alternative menu and page formatting and CSS debugging is discussed.
All of the major concepts of CSS are presented so that a beginner can easily understand them. While some ways of utilizing CSS properly can be the subject of debate, the authors have chosen a rational approach that serves the basic web designer well. The result is a set of web pages that follow a simply understood design, yet ensures that the layout and format is isolated to the CSS style document, rather than the HTML.
Over and over, Tom and Dori provide useful links to web sites with additional information on the intricacies of CSS, as well as providing suggestions for programs to help you with massaging images and references to other books for more in-depth coverage.
The best way to fully understand what Tom and Dori are trying to explain is to replicate the example web site (Alpaca Repo). Unfortunately, there is no link in the book or on PeachPit's web site to a set of downloadable images and html files. The only way I was able to replicate most (but not all) of the examples was to look at alpacarepo.com. It has six pages, two style sheets, and two photos. The book shows other photos and more complete pages, so it's a partial solution at best.
Overall, Styling Web Pages with CSS: Visual QuickProject Guide is a nice introduction to the potentially confusing topic of the proper use of CSS. Many of the fancier techniques are avoided for the more common and useful ones. The short length of the book allows the beginner to avoid the feeling of intimidation that can accompany reading a 1,000 page text that covers everything you never wanted to know. Even so, I felt less than satisfied after I finished. I wanted a little bit more than I was given. Even if the book doubled in size, it would still be accessible yet it could then leave the reader with a feeling of contentment. As this is the first QuickProject book I've read, that may simply be the target they were shooting for.
One final wish for Peachpit: please include downloadable files that the reader can access to duplicate the Alpaca Repo website. I was continually frustrated when I wanted to replicate what I had just read about, yet was missing JPEG files or extensive text that I could use. Consequently, I never felt as though I had actually gotten the hang of CSS.
You can purchase Styling Web Pages with CSS: Visual QuickProject Guide from amazon.com. Slashdot welcomes readers' book reviews — to see your own review here, read the book review guidelines, then visit the submission page.
Dont' bash CSS... (Score:5, Insightful)
I've found a lot of people who are stuck on table layouts are stuck because they can only think of HTML pages in terms of how tables work. You have to break free from that mindset and CSS design makes much more sense.
After designing sites for 10 years, 3 of those in the dark ages of tables, I wouldn't touch tables with 100 foot pole. But if using tables makes it easier for you, more power to you. It's just really sad to see people bash CSS because it's too hard for them to implement.
=Smidge=
The problem w/ CSS is complexity of use... (Score:2, Insightful)
Maybe in a few years CSS (and the browser base) with catchup, but the blue-sky designers of CSS did practically everything in their power to make CSS layouts difficult (if not impossible) to use.
Everything from the infamous box model (padding the INSIDE of a box requires a change in it's OUTSIDE dimensions? Excuse me, WTF?) to positioning nonsense (the height of an absolutely positioned object has no effect on its container) contribute greatly to the number of hacks and other measures needed to create even simple layouts.
Add cross-browser-specific nonsense and the whole thing simply bogs down.
Yes, separation of data and presentation is desirable. Yes, it's POSSIBLE to do so. But all too often it takes round-after-round of testing and retesting, only to find that the Opera patch breaks IE (again).
=Smidge=
Re:Dont' bash CSS... (Score:3, Insightful)
I've found a lot of people who are stuck on table layouts are stuck because they can only think of HTML pages in terms of how tables work. You have to break free from that mindset and CSS design makes much more sense.
After designing sites for 10 years, 3 of those in the dark ages of tables, I wouldn't touch tables with 100 foot pole. But if using tables makes it easier for you, more power to you. It's just really sad to see people bash CSS because it's too hard for them to implement.
I've not been doing direct web design for a while and I just use tables whenever something comes up simply because I know it works. I've tried looking into other techniques but it usually boils down to "I have enough time to do it a way I know works but not enough time to research a better way."
I know awesome stuff can be dones, Garden of CSS proves it, but I'm surprised I don't see those techniques applied on other sites anywhere. Where do the designers who created those templates go for work?
Re:Dont' bash CSS... (Score:1, Insightful)
You're right, there's nothing wrong with tables. We should be bashing people who use tables for layout. (Over the head with a blunt object, if necessary.)
Head Wrapper (Score:5, Insightful)
1. W3Schools is way useful.
2. browser differences make using CSS a pain in the butt.
3. using CSS makes for tight HTML that you can easily read and write without a WYSIWYG editor.
4. ie6 sucks
5. ie7 sucks
6. Make your site work with Firefox and then break it to work with IE.
7. Wrapping your head around CSS and all of the intricacies of floating elements, fluid site design and ADA considerations is a little tough and a lot frustrating, but once you understand it, you wonder why anyone would do it another way.
Re:Dont' bash CSS... (Score:4, Insightful)
Well for showing tabular data, HTML tables are what you should use. I think a lot of people hear "don't use tables" and don't hear the "for layout" at the end.
CSS layouts are actually quite easy until you want a non-trivial layout (there are some gotchas that have simple answers, and there are cross-browser compatibility issues with IE6 usually), and the latter is unlikely to happen for a person who isn't doing web design as the primary role. It's worth investing a few hours to learn it, it makes the HTML so much quicker to write, and easier to read.
Re:The problem w/ CSS is complexity of use... (Score:4, Insightful)
Maybe in some (or even most cases), but with the complaint about padding and the box model, he's spot on... it's right there in the spec and it's absolutely ridiculous.
Re:Dont' bash CSS... (Score:4, Insightful)
CSS isn't the problem, broken browsers are.
Re:W3 Schools (Score:2, Insightful)
Re:The problem w/ CSS is complexity of use... (Score:2, Insightful)
Re:Dont' bash CSS... (Score:0, Insightful)
If you are still using tables you are not able to write semantically correct HTML, which is a must IMO for SEO and accessibility/ADA compliance. It's not about "utopian css purists". there is a real benefit to separating content from layout.
Re:The problem w/ CSS is complexity of use... (Score:2, Insightful)
(sigh) The content area is the core box. Padding, border, and margin are optional areas, and adding any areas adds to the effective layout size. But the specified width and height of the box always applies to the content area. It cannot apply to anything else because everything else is optional.
It's only logical. People who don't get it somehow think the border, an optional visual element, delineates the "edge" of a box.
CSS itself is difficult because it's powerful. So be it - the architects had to make layout code that would work across unknown viewport sizes. We've never had to do this before in any media. It's a hard concept to deal with as designers. Getting pissy with the architects for delivering (quite quickly) excellent code for this new reality is incredibly stupid.
Real-world CSS is a fucking pain in the ass because our browser makers have consistently given us incomplete and broken CSS support, year after year since 1996. Take three browsers with three unique failures and we've lost nine key elements of a language of expression. Don't blame the CSS architects for that. It's a tribute to how powerful they made CSS that we've been able to use it at all.
I mean my god, we still don't have full support for absolutely crucial expressions like min-width and max-width. It's a disgrace.
What can be argued about is whether CSS was designed properly from the point of view of creating editors. The orginal idea was that your "browser" would be your editor. One port to view and to publish. You can do that with HTML. I suspect it's impossible to make WYSIWYG for correct CSS, and that's a real problem.
This have given us the current web of professional publishers and amateurs using templates -- Flickr, WordPress, etc etc. In the end you've got to know how to hand-code CSS if you're going to make correct code. That's a big problem.
I'm reluctant to blame the architects because of the timeframe they had to work in. The sudden explosion of table-layout meant they had to provide working code fast. And they did. How to make WYSIWYG for it was left for the future to figure out. But I don't see light at the end of the tunnel for that problem.
Anyway, not trying to flame you directly Smidge. As you well know, dealing with this crap tends to make the passion rise.
Re:Dont' bash CSS... (Score:2, Insightful)
I don't care who's fault it is, I just want to code something once and have it look *reasonably similar* all platforms. Hacky code that is short and simple is better than complicated, "elegant" solutions.
I've been using CSS for years and am one of the "complainers". It seems to have been conceived *by* graphics artists, *for* graphics artists. Look at the terms they use: "styling pages", like it's hair or something. I *BUILD* pages out of nerdy, reusable components that need to render cleanly in lots of different combinations.
I don't mind separating presentation from layout, etc. And there's a lot about CSS to like. But you shouldn't have to use "tricks" just to get basic things to work. It shouldn't be so "touchy". You shouldn't have to get it just right. It should be robust, tolerant and forgiving just like the HTML is was designed to augment.
And most important of all to me, you should be able to tightly bind a style directly to an element such that it's guaranteed to apply AND nothing else will apply or override based on magical rules and priorities.
CSS has its problems (Score:3, Insightful)
Even in browsers where the support is great, CSS has its problems when it comes to layout. There are some things broken in the spec.
It's a fantastic tool, I'd rather have it than not, but sometimes, tables are a better tool, and they'll likely remain that way.