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.

Comments

CSS, oh how I love thee...

[Just Some Guy]

I was hired at my new job in part to completely re-write the website that our customers use to access information in our database. Since I was starting over with a blank slate, I got to pick every detail of the platform, so we jumped in with FreeBSD, Zope, Python, and XHTML/CSS.

I truly don't understand why anyone is still using <font> tags. Instead of making the site design more difficult, strictly seperating appearance from content has made maintenance far easier. I'm still slightly amazed that I can completely re-do the appearance of my employer's website by editing a single file, and when my boss decided that he hated the way links looked, he was thrilled that it took me about 30 seconds to globally change them.

Seriously, this is the way web design was meant to be.

Re:CSS, oh how I love thee...

[bonkedproducer]

It's not hard in any of the major browsers to tell them to ignore the stylesheet of a site, or use your own - That's the beauty of CSS, even in a text-based, or non-compliant browser, you can degrade much nicer and still present content.

Something you can't do when you use stuff like javascript etc. to present your "brochur-a-fied" web site. CSS gives the designer more power and more flexability, and a good standards compliant browser allows that without taking the power to "view it your way" from the user - much better than huge nested tables.

I have sites that I rebuilt to be CSS/XHTML strict compliant after originally being built in tables, and saw file size reductions of 6KB (CSS) vs 24KB (tables/CSS hybrid) that could have a major impact of busy sites. AND, I began to get comments from those using screen readers etc. that the site was much easier to use. Plus, it is faster to recode one line of CSS than even an automated find/replace in any program I have tried.

CSS shouldn't be feared or downed because it is different, it is an useful tool, and one that is more capable of doing what we want - remember ZEALOTS different isn't bad, it's just different, but then again, this being /. I'm sure there is some here that are mad that web sites aren't delivered via punch card, because that's what they used back-in-the-day and are still happy with.

And Then There's IE

[Cruxus]

Cascading Style Sheets are all well and good--actually, I use them on my website, and I love them--but the painful part is ensuring compliance among browsers. I'm a self-taught, amateur geek, and I code my XHTML and CSS by hand. I don't read tutorials: I read the W3C recommendations. Anyway, I like to think I can interpret rather exacting writing such as Web specifications without misunderstanding, but I always seem to botch something so that things are out of alignment and so forth in this or that browser--usually Internet Explorer.

In summary, CSS is good, but it'd be better if all browsers actually followed the standards and interpreted any ambiguity the same way. That's all I want, so I can remain sane!

w3schools?

[cexshun]

Not to be flamebait or anything. An honest question...

What exactly does this book have that is not available at W3schools.com?

CORE CSS TEAM

[Anonymous Coward]

Someone for the love of god implement FLOAT MIDDLE

I mean geesh, just give designers a bit of help with a small FLOAT MIDDLE syntax.

Re:CORE CSS TEAM

[telbij]

I mean geesh, just give designers a bit of help with a small FLOAT MIDDLE syntax.

Considering the current problems IE has with rendering standard left and right floats, and the slow pace of new feature implementation, writing float: middle into the syntax would probably mean that you couldn't use it in Mozilla until about 2010, and you couldn't use it for public websites until 2020.

Also, why do you want float: middle? Having text run around both sides of an block doesn't serve much practical design purpose (especially in a variable width/font-size environment). If you want to center something just use margin: auto;

A much cooler feature would be alpha channel floats to make text run around more complex shapes.

Re:CSS Zen Garden

[TwinkieStix]

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.

But not totally usable. I'm using Mozilla 1.6, and as soon as I try to increase the font size on most of the themes in zengarden, I get overlapping text. It's useless when running at high resolution.

Re:CSS Zen Garden

[mattkime]

...unless you have a mostly mac audience, in which case Mac IE 5 barfs on many of the designs.

Yes, yes, Apple now makes Safari, but its going to take a long time for the more clueless users to switch. (I know, I've tried...)

Gradients

[thpdg]

Has anyone else noticed the sudden rise of gradients and high-color icons and logos? They have begun appearing in huge numbers in webpages, software, and in new OSs. I installed Fedora Core the other day and was amazed by the beauty of it, but I wonder what the load is on the PC.
I remember reading this whitepaper in 2001 about how to do this, and why, and I wonder if it is powering the entire phenomenon.
With websites, correct layouts are even more critical to the look, and it looks like the techniques in this book would really assist with that.

Read the Recommendation

[Milo Fungus]

I may be a bit strange in this, but I learned most of the CSS I know by reading theW3C Recommendation. I started reading W3C recommendations when I wanted to learn how to code SVG. Tutorials and examples were relatively rare on the web, so I just found the specification and went from there. I find W3C recommendations to be very readable, and I've since read the recommendations for CSS and every HTML since 4.0. My web design has changed dramatically (and my dislike for IE has deepened).

Has anyone else learned a web technology strictly from the specs?

Re:Read the Recommendation

[Neon Spiral Injector]

I learned XHTML from the DTDs. I thought I knew HTML, but was having trouble consistantly writing valid XHTML. Like does a "form" go inside a "p", or the other way around? After printing out the DTDs and keeping them in front of me for the next couple of sites I designed I learned a lot.

And of course I learned CSS from the rec. also. I was reading over the SVG specs a couple weeks ago. But after coding up a few samples and seeing the state of SVG support (period, I don't care about which browser you use), I have put it on the back burner for now.

PS

[TrentL]

The book's site doesn't validate, either. That isn't a huge sin in my book, but I see that the site uses named colors (black, gold, navy) for attributes. This is a no no.

site does not validate

[chris_mahan]

88 errors in the html when validating with validator.w3.org/ in HTML 4.01 Transitional.

You'd think they would have done a better job, no?

Oh, and as someone mentioned before, css does not validate either.

Re:What in God's name...?

[arkanes]

For what it's worth, most of the IE extensions are usefull, and should be absorbed into the spec/implemented by other browsers. The ones I miss most often are overflow-x and overflow-y, but the layout options for non-Western character sets are neat too. According to MS, most (althought not all) of the extentions have been submitted to the W3C, so they should get off thier asses and add them to the spec so Mozilla devs can support them without feeling naughty.

CSS - Reality in my eyes

[DroppedAtBirth]

I have never used only CSS to design a website solo for the fact it is still browser dependent. I find a good mix of common CSS, good old HTML, and common sense works best.

Re:crap for layout - NOT! (well, not entirely)

[schodackwm]

but first... 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.

... that said, the time it took to absorb (for example) position: relative; top: -2.5em; was really worth while for (dayjob=webmaster) me. As one tutorial (sorry, can't recall which) pointed out, with css one can position elements on a page with single-pixel precision... and make that work across most browsers (ie>5.5, moz>1.3, recent NS, Konqueror, Opera).

There are still issues: fonts are (render?) slightly larger in Moz 1.4 than in ie5.5 or 6. And fonts that look fine in Moz or ie>5 at 1024x768 on a 'doze box (read: MANY of our customers) look dreadful at a different rez on some other OS's. Browser makers still don't use identical DOMs, which makes margin:auto; or padding-left: nn; unreliable.

So, for now at least, you still do have to run a pragmatic test for x-resolution, x-browser, x-OS anomalies. But -- IM(not so)HO, css doesn't deserve the kind of condemnation the parent and others offer. With a little study, one can work around most browser glitches...

Did I sleep through IE becoming complient?

[Christianfreak]

Oh yeah it isn't.

Seriously there are so many bugs and missing stuff from IE's implementation even of CSS 1 I fail to see how anyone can claim that its even remotely complient.

Here's just a few things off the top of my head:

• No support for min-width, max-width. Wrongly treats the width property as min-width.
• Can't clip background images to anything other than the body
• Tons of just plain bugs related to padding, and boxes, incorrectly clips fonts, even full words in some cases
• No support for :hover, etc on elements other than a making it impossible to do dynamic effects without Javascript
• No support for overwritting classes (ie .class > .someOtherClass { })

The list goes on! And don't even get me started on the implementation of the DOM in IE, not to mention the security problems and other 'features' that also come along with it.

Why oh why can't it just go away!? If you don't believe me, google for this stuff, its all out there complete with hacks to get around some of it (though most of htem use non-standard MS extensions)

why not XSL?

[DrEasy]

Bare with me, I'm not a web designer. I have a candid question: why not use XML + XSLT instead of HTML + CSS? This way you would completely separate content from presentation, and you could also generate tables or whatever floats your boat in the resulting HTML.

I guess the two approaches aren't incompatible: you could use XSLT to generate an HTML document that makes use of CSS... OK I guess I answered my own question... :)

Comments?

<font> is just as useless in Lynx/Google

[brownpau]

If this were XML, we could define an or tag or even ; but this being X/HTML, we want to use id and class attributes to identify a line of text/code within given standards. The example given in parent, , usually means "error" or "important," so using class="error" or class="important" is far more meaningful to the coder than a deprecated tag, and can be made meaningful in any manner to the general audience with CSS.

>How useful is the meaningless element type in situations where CSS is not used (Lynx, Google, etc)?

- In Lynx, about as useful as the <font> tag, eh? But proper structure and hierarchical markup with headers, paragraphs, and properly identified <div> blocks will work wonders: making clear to searchbots what text is important, and giving disabled users an easily-navigable nonvisual UI. Then, the document can be easily (?) styled for prettiness in normal browsers, while still retaining an intelligible structure for other environments.

Even plain, unclassed <span> tags are useful when nested inside parent blocks, since these can be styled as descendant CSS selectors without suffering from acute classitis. Plus, <span> is standards-compliant, and <font> is deprecated.

Re:Almost

[Laebshade]

You didn't look hard enough. The same CSS positioning I mention on my website using a combination of left, right, top, and bottom, along with overflow: {scroll|hidden|auto} and position: {absolute|relative}. You can view the CSS too. If you look at my site you will notice that the width for the content expands as the page expands in size but the width of the menu does not expand horizontally only vertically (as needed). It is very possible to do what you want to do. Here's what you need to do:

Enclose the images and text in a div tags. Assign an id to the div so it can be identified in a external CSS file. Enclose each item - image, text, image - in a div tag too with an id to identify them. The HTML should look something like this:

<div id="header"><div id="img1">[image]</div><div id="htext">[text]</div><div id="img2">[image]</div>

Then the CSS should look something like this:

#header {
position: absolute;
left: 0;
right: 0;
}

#img1 {
position: absolute;
left: 0;

}

#htext {
position: absolute;
left: 0;
right: 0;

#img2 {
position: absolute;
right: 0;
}

I haven't tested that but it should work. Of course you'll want to play around with it and modify it, but you get the idea.