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.
What I have a problem with is the fact that the whole book, every example for every property, was completely embedded into the HTML itself. Their was a slight reference to externally described CSS but no examples to follow. The idea of the sheets is to set a number of parameters for most or all of your pages to follow. Embedding them into the HTML every time defeats the purpose. Also their were some mentions to multiple options techniques that never had any kind of example or visual of any kind to follow so you can see how this could be useful. In that sense the beginner user would be completely lost on something that can be helpful down the road.
Not when css can be defined inline with
<div style="color:red;"> </div>
And if I see a <center> tag one more time, I'm going to explode!
Ah, but is far more semantic, and with a declaration of span.error{color: red;} , you can change any of the error spans to any color, font, or style you wish with just a line of text, instead of hunting through KBs and KBs of code to search/replace any tags you might have missed.
But in the real world, how many people really try to code decent, standard-following web pages, and how many just code for IE6. Even if the job can be done the right way isn't it easier to be lazy and neglect everyone but IE?
Are Gecko and Opera having a practical impact, yet?
How about handheld devices?
The living have better things to do than to continue hating the dead.
CSS is still often not a practical solution when creating a web site. Unfortunately there are many things that are just too difficult to do with CSS - and I mean relatively simple layout issues.
CSS fanboys love to mock web sites that "still" use tables for their layouts. However, when you try to practically design a layout just using CSS and without tables, it proves pratically impossible. Even hardcore CSSers get all excited when they do simple things like layout pages in columns.
Try and find a big commercial web site that doesn't use tables for their layout. You won't find one. Is it because the web designers that work for these big multinationals are dumbasses, as some proponents of CSS will tell you? No. It's because CSS is crap for layout. I wish it wasn't but it is.
It's never easier to hardcode constants right into the middle
No offense, but never say never. Coding in part is about adapting and simplifying and sometimes, sometimes, it is easier and better to hard code something than to make it elegant.
I do with people would stop pointing to this site as a paramount of CSS design. While their work may be "rich, powerful and compliant", it is not, as you have noticed, "flexable".
What is so hard about using "em" as the base measurement for the layout? Also, the main content text size should always be 1em, i.e. not specified, allowing the browser's default size to be used.
I run at 2048x1536 on a 19" monitor. GNOME with a SVG based theme just looks really crisp. But then I go to some website that thinks that 10px is a good font size. And has their entire layout based around a fixed 600px center column. So if I do Ctrl-+ to bump up the font size to something I can see, I end up with like 5 words on each line.
Okay, I'm done...
For styling CSS is da bomb. For layout, template based pages are at least as (if not more) maintainable, have the advantage of being cross-browser compliant (including text-based browsers), and are, in most cases, easier to understand and maintain. If you're going for pixel-perfect positioning, you'll want CSS though.
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. Accept that fact that alterations to the sites HTML will require changes to the CSS and vice versa.
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.
Maybe CSS 3 will adress some of the issues. For the time being, I ain't real impressed. It's certainly a step up on font tags, but it's got a long way to go before it's usefull for positioning.
For example, suppose that you use red text to highlight error conditions in one part of the site, and red text to indicate mandatory form items on another part of the site. Later, you decide to change required fields to blue. With CSS, you edit the style for "td.mandatory", and every occurence of <td class="mandatory"> is instantly affected. Without CSS, you search for every match of "red" and decide whether or not to alter each one. Strangely enough, most employers aren't too thrilled with a 30-second change takes 3 hours.
Dewey, what part of this looks like authorities should be involved?
Am I the only one who feels as if this is only a teaser for a real review? The reviewer mentions a "table of contents below" and his "score" which I don't see. Have I just never noticed that there's some other link to click on to see a full review, or am I freaking insane, or wtf?
#19845
Well, actually, web design was meant to be was at browser level, allowing the user to alter the display to his own taste.
Companies, such as the one you prsumable work for, and the desktop publishing people charged with putting forth official company documents weren't happy about that arrangement, so times have changed.
That said, about two years ago I got my ass chewed out here for applying the old rules. Since that time I have come to appreciate CSS myself.
I'm still not crazy about the web being "brochurified" though.
KFG
This is probably the one time where I am perfectly comfortable saying "never". In my years programming, not one have I ever seen a situation where
wasn't much more understandable and maintainable thanUsing constants (or CSS) gives meaning to things that don't have obvious relationships. Seeingindicates that those two are somehow related. On the other hand,says nothing more than that the designer likes "red". "Hard" and "easy" are abstract concepts, until you're looking at your own code a year later and don't understand what you meant - then they're quite concrete.Dewey, what part of this looks like authorities should be involved?
Our website is actually very, very simple by most design standards. I built it from the ground up to be extremely lightweight and "clean" so that our customers, who spend their days filling in forms and submitting them, aren't distracted by anything that wasn't explicitly designed to make their work more efficient.
The huge win for us wasn't a gee-whiz-that's-amazing appearance; it was a well-structured architecture that we can build on and alter without tracking hundreds of embedded tags throughout the site. We don't do anything in CSS that couldn't be done directly in the HTML. We just do it far more efficiently than we could've otherwise.
Dewey, what part of this looks like authorities should be involved?
Up to a few weeks ago, I would have laughed at the idea of CSS being used in serious web design for anything other than simple color and theme coordination. On commerical sites, CSS seemed the exception to the rule, and I scoffed at sites that used and tags to layout their page.
But that was before I actually saw the power and wisdom of incorporating CSS.
I recently updated my personal test site to use full CSS for the structure and design, and was very pleased to learn about the two key benefits of CSS website design: structure and format.
Structure:
For ages my own coding methods involved nested table within nested table, until the complexity of my pages got so complex that a simple updates became a gamble of helping or shredding the resulting page. Nested tables are also nearly impossible to coordinate for pages that must be scalable for accessibility, or simply stretching the viewable resolution for more modern video display sizes. Tables were originally meant for one thing: formatting text data, not carrying the workload of page structure. The truth is, it is much easier and precise to define a site's structure using CSS positioning. I am a minimist at heart when it comes to my source code, and CSS has not only helped to reduce clutter in my source code, but in most cases has reduced the source size by about 20%.
Format:
Using relative font sizes and design templates for formatting text not only makes universal page design easy, but it also makes browser loading faster, since CSS can be cached by local browsers while hard-coded or code includes must be reloaded every time the user clicks a link or refreshes the browser. That means reduced server load and increased load speeds for the user, too.
Now I realize, CSS is not the end-all and be-all of web design. There are some weaknesses, and the typical cross-browser support that needs to be worked out. But for the serious web designer, you can't ignore the elegance and the design concepts that make CSS a very powerful (and in some cases, superior) design tool.
If you are interested, the W3C site has some great CSS howto's and examples on replacing table-based structure on your site.
Computers are useless. They can only give answers. --Pablo Picasso
Why not? It is important to know what extensions are aviable for the major HTML engines (Opera, Gecko, KHTML, Tasman, and Trident) for several reasons. If you're writing software specific for a particular web browser, then it becomes extremely important to know about such engines. Or when most browsers support part of the standard, and a simple hack can add the other one to the list. Or when you're writing software to add some CSS support to IE (like Dean Edwards does in IE7). When is a little more knowledge ever a bad thing?
It is impossible to enjoy idling thoroughly unless one has plenty of work to do.
- Jerome Klapka Jerome
Same problems here... but Explorer Exposed! helps me quite a bit. Good listing of IE CSS bugs and work arounds.
Escape Pod Films: Sketch Comedy and Web Series
"Even hardcore CSSers get all excited when they do simple things like layout pages in columns."
Indeed, not only because of the struggle involved, but because of the great flexibility in using CSS instead of tables. It's not just "thank god I made a nice layout with CSS, it took me 7 hours!" but also "thank god I made a nice layout with CSS, now I can adjust it much more easily in the future and have far greater control than with any table hacks." And they are just that; hacks. The table tag was originally meant only for displaying data in a grid-like format (keep in mind HTML was originally for scientific documents).
And also we're all still learning. How many tablers got excited when they first figured they could use tables for page layout? A lot I bet. Now complex table layouts are all old-hat. Soon matured CSS layouts will be too, with the simplicity of layouts like this (check out the CSS, doesn't look too scary does it?).
Perhaps the people at Microsoft should have gotten off their asses and finished implementing the six year old CSS 2 specification that they co-authored before coming up with proprietary add-ons. As it is, there are huge chunks of CSS 2 support missing or botched in Internet Explorer.
>What is so hard about using "em" as the base measurement for the layout? Also, the main content text size should always be 1em, i.e. not specified, allowing the browser's default size to be used.
Sheesh yes. This site also cranks my other pet peeve: contrast. Light grey text on white is hard to read, especially at smaller sizes. Here are some guidelines from Penn State:- Use a browser safe color palette (216 colors).
- Use contrast. Dark text on pale background is better on a computer than light text on dark.
- Avoid vibrating contrasts, especially red and green next to each other (color blindness) .
- Use bright or different colors for emphasis.
- Use the 3-Color Rule.
- Never use colors from the opposite ends of the color spectrum together.
Nothing like dark red, eight point type on a black background to help my eyes.Some mornings it's hardly worth chewing through the restraints to get out of bed.
No it isn't. It might be a bit more useful in site maintenance, but it means nothing to anybody outside of your organisation.
Replacing <font> with <span> is meaningless. Replacing it with an element type that actually means something, like <em> (emphasis) or <strong> (strong emphasis) would be productive. How useful is the meaningless <span> element type in situations where CSS is not used (Lynx, Google, etc)?
You mean element type, not tag, and it would be just as meaningless. The rest of the web doesn't know anything about your markup scheme. Throwing the magic word "XML" at it doesn't change this. <span class="error"> doesn't mean anything to any program outside your organisation, nor does <error>. The whole point of using a shared markup language like HTML is that eveybody understands what the markup means and can do useful stuff with it.
CSS is an optional component of the WWW; you are treating it as a required component. Using meaningless code and then being able to kludge a certain presentation so people can understand it is no better than using <font>.
The value of CSS is that you can use meaningful markup without worrying about the presentation. If you don't bother using meaningful markup, then you haven't progressed at all, and may in fact be taking a step backwards (for instance, some people start using <div class="heading"> elements and similar).
How is a search engine to know that things like <span class="important"> are important? They don't. They do, however, know that <em> elements mean emphasis, etc. The <div> and <span> element types should be used as a last resort, not in place of element types like <em>