Slashdot Mirror
The CSS Anthology
Author's credentials
Andrew is a long-term member of the Web Standards Project (WaSP) and programmer, technical project manager, technical team leader/senior developer and webmaster, according to her own bio.
Who's the book for?The book's subtitle is somewhat misleading. There probably are 101 tips'n'tricks (I didn't count) but it's not the random miscellany that it implies. The information is structured so that a n00b could become proficient by reading the book from start to finish (I tested this out on a colleague). The tips'n'tricks structure does allow you to find what you're looking for in a hurry. The table of contents is easily scanned, and there is an excellent index.
The book doesn't offer advice on how to sex up the beauty of your site. That's fine for me; my current work involves replicating someone else's designs using xhtml and CSS, and as a coder I'm pathologically unable to design the type of showcases that you see at the CSS Zen Garden. A graphic designer might therefore find this book hard work; it jumps straight into a discussion of syntax, and there's occasional geek-directed statements (CSS supports multi-line C-style comments). Similarly, if you're completely new to html, this book probably isn't for you; there's lots of references to pre-CSS ways of working which could potentially be mystifying. Unusually for CSS books, there's a refreshing lack of polemic telling you why you should use style-sheets. If I read another history of the browser wars in a technical book, I shall scream.
So the book's constituency would seem to be those who know how to present information via html, and wish to take advantage of the smaller filesizes, greater flexibility and logical separation of the presentation layer from the mark-up that the (x)html/ CSS combination offers. The logical purity is my personal reason for moving to Web Standards; the trauma of writing text processing applications with VAX Fortran in the late '80s left me with the propensity to weep when I see html as sorely abused I mangled dear old Fortran.
Are you sitting comfortably? Then I'll begin.Anthology kicks off in the conventional way for CSS books - controlling fonts and colours, styling hyperlinks, headings and the like. Each chunk is structured as a problem (How do I remove the indented left margin from a list?), a solution and sample code, and generally a discussion of related applications of the code, compatibility issues, accessibility notes etc. This is a pretty compact method of explication, and the basics of styling, syntax, pseudo-class order and the like are romped through in 40 pages, but not glossed over. The key to this is that Anthology assumes you know what you want to do, and shows you how to do it.
Chapter 4 (Navigation) is where the real meat begins - making navigation menus that are solely html unordered lists (because a menu is logically a list of links) and styling with CSS, adding rollover effects, styling navigation as buttons, changing the styling to a horizontal navbar, or even Amazon-style tabs without changing the mark-up. I suspect that, although these are techniques that can be found in most CSS books, the brevity and simplicity of the explanation will be revelatory to many. Chapter 5 (Tabular Data) may come as a surprise to those who mistakenly believe that web standards disallows the use of html tables, as it shows how to style tabular data - the examples are a spreadsheet and a calendar. Chapter 6 repeats the trick with that most mundane aspect of web development, the form.
Chapter 7 (Browser and Device Support) is about real-world CSS development. Unlike most books which instruct you to test in loads of browsers and leave it at that, this chapter lists all the main permutations of OS and browser (including tips on installing multiple versions of IE/ Win), and begins discussion of the tried and tested hacks to hide styles from Netscape 4, IE etc. All of this information is available on the web -- but for a newbie who isn't yet aware that it's possible to hide styles from certain browsers, it's a great way to introduce them to the murky practices of real-world CSS development. What's also refreshing in a computer book for n00bs is a discussion of how to seek help on lists and forums, with a guide to etiquette.
Chapter 8 (CSS Positioning and Layout) is where the stuff that stumps many a table-based designer begins. Along with fonts and colours etc, CSS can lay out the stuff on your page. I'm unsure about the success of this chapter; the Q&A structure is great if you're looking to build one of the sites that are explained (and the list is pretty comprehensive), but I came to the chapter hoping to cure a couple of bugs I'd found in a project I'd previously semi-successfully laid out with absolute positioning (A.P.).
Generally, I layout using floats as I also write the html, so it's easy to ensure that the markup spits out <div>s (sections) in the left-to-right, top-to-bottom order that I want to lay them out in. Suddenly, I had two projects that required A.P. for the first time, as it was not cost-effective to change the way that the client's CMS spat out the markup, so AP was required to position sections on the page regardless of where they appeared in the markup.
Anthology served me fine until I tested the page in IE and the layout was off. Nothing in the book gave me any pointers, and in the end I gave up Googling and just used a hack which exploits an IE parser bug to serve different co-ordinates to IE, after finding the hack co-ordinates through trial and error:
#APthing {position:absolute; top:34px; left: 758px; width:108px; height:88px;}
* html #APthing {position:absolute; top:19px; left: 785px;} /*for IE */
OK, so there may be a simple mistake I'm making -- but then, as far as absolute positioning goes, I'm the kind of newbie at whom this book is aimed, and I imagine that others will make the same mistake that I did. If the book had explained where I was going wrong, or given me the above hack, I'd've spent less time with Google and more time with Guinness.
Chapter 9 (Experimentation, Browser Specific CSS and Future Techniques) is successful, except for one small gripe. I'm glad that the author, although a member of the Web Standards Project, isn't an uber-purist. (I'm of the opinion that a little invalid code, if it's the only way to get the job done, isn't a hanging offense). So she shows how to implement IE-only proprietary CSS that can make colourful scrollbars, should you wish to do this. There's also a Mozilla-only CSS trick to allow curved edges to CSS boxes, which I implemented on my homepage that very evening.
However (here's the gripe), the most useful technique shown is one which allows fully-CSS flyout menus that don't rely on JavaScript. The author notes that it won't work for most people, as IE incorrectly restricts the hover pseudo-class to <a> tags only, while the CSS requires hovering over <li> elements.
Well, Yes and No. There's a well-documented and elegant hack which allows a proprietary Microsoft behaviour to be attached to the CSS that attaches a small JScript that corrects the IE bug, and thus allows this extremely useful CSS-only flyout menu to work in IE. I've used the technique myself when required to mimic the look and feel of a client's site while making it DDA/ADA accessible, and it works perfectly. To me, the omission of the IE hack from Anthology is an unfortunate oversight.
SummaryThere's a couple of flaws in the book, though I suspect that in order to explain them, I've over-emphasised them. All in all, it's a solid, professional no-B.S. way for someone with a code-oriented mind to get them up to speed, satisfactorily and quickly; a motivated reader could be churning out standards-compliant, bandwidth-friendly sites after a few hour's experimentation. Ordering the book from the publisher's website was a good experience and, unusually, they have a money-back guarantee. As I said, I wish that I'd had access to Anthology when I was learning.
You can purchase The CSS Anthology: 101 Essential Tips, Tricks & Hacks from bn.com. Slashdot welcomes readers' book reviews -- to see your own review here, read the book review guidelines, then visit the submission page.
Ok, let's take up a collection for Rob et. al. to get this book....
www.eFax.com are spammers
layout 4 life.
by TheSpoom (715771) Uncaring Linux user here. I have nothing to add to this but please continue. *munches popcorn*
The added bonus of the online tutorials is that you can see the code in action and edit it yourself as you go. Not sure who would plonk down good money when so many thorough tutorials are online.
It is one of the few CSS resources I've found that assume that you know what you're doing except where CSS is concerned, and doesn't try to teach you inane things like how to make a link to another document. I've got a copy that's rapidly becoming worn and well-used.
This flies in the face of science.
Drill baby drill - on Mars
With...
It fits more with the philosophy that colors and other styles should be in once place and one place only. CSS follows that OK right now, that is, we can put all those things in the same document, but wouldn't it be great if the document itself adhered to the same principle?
That problem seems to me one of the biggest in CSS. It makes things cluttered, take up 10 times as much space as they otherwise might, and makes for an illogical thought process. The designer doesn't think: I'll go through each element in the page and make them blue, but rather: I want this this and this to be blue. Anyway, just a thought.
Quid festinatio swallonis est aetherfuga inonusti?
Africus aut Europaeus?
Since when you need a book to play Counter Strike: Source?
Actually for the experienced person I would recommend learning from the actual "Standard" of CSS at W3C.
CSS 2.1 Specification
If you want to see the upcoming CSS 3 standard, or learn more about CSS, you can go here:
http://www.w3.org/Style/CSS/
CSS virgin
Would that be someone who:
First CSS encrypted DVDs, now CSS encrypted books? What's this world coming to? Looks like I won't be able to co^h^hread my books now. ;)
a.blue, span.blue, div#back {
color: blue;
}
Not sure who would plonk down good money when so many thorough tutorials are online.
When you need to get things done FAST, and learn while not in front of your computer monitor, or maybe even have a quickreference handy, you need to buy books. Hey, what if suddenly your internet connection drops?
I'm a customer of Sitepoint (the company that published the book), and I purchased the "build your own... website using PHP and MySQL". I keep it always handy on my job desk.
Also, having a manual handy (either printed or downloaded, such as the PHP reference) saves you lots of trouble. I've talked with many people who just use the online PHP manual, and they keep asking me stupid questions they could have answered themselves had they downloaded the reference in CHM format.
Never forget that time is money, and learning online "for free" might cost you lots of hours that you could have well spent designing a website and getting paid.
a.blue, span.blue, div#back {color:blue;}
you can assign a set of attributes to multiple IDs and classes.
also remember that the "cluttered look" and extra space is not really such a bad thing. as long as the style sheet is external, "readability" and ease of use and editing is more important.
many people can make CSS do cool stuff, but few are using it properly - too many IDs, setting IDs when a class would suffice, using inline styles repeatedly, hacks and whacks with margins and negative padding to fix display issues instead of using the proper assignments.
I love that CSS is gaining so much popularity, but people are already starting to crap out poorly planned and non standard code that is almost as bad as tables and "shims" (spacers, transpix, whatever).
CSS should make sitewide changes easier and quicker, read the spec! follow the spec! check the W3C! dont just follow the hacks of blogs and sites, learn to use the great tools properly, sure you can pound nails with a wrench, but when you have a pneumatic hammer - why bother! just wait for CSS 3! (and wait ^3 times longer for browsers other than Moz to comply with the standard)
how hypocritical, i say to my self as I look at all the crappy "s" i have strewn about this post
-nappingcracker
It is "firmly pitched at the coder", but it has to explicitly state that it "assumes that you're not scared of mark-up"?
If you're "scared" of mere markup, I would hate to see your actual coding.
As folks have pointed out, you can set a class for blue text or you can use the comma-separated list to apply the color.
.info{ .att{
What people haven't mentioned (I didn't see anyway) is the fact that you can apply multiple classes to a single element. So you can have your "blue" class for blue colored text (although that is a very bad class name...think about if you change the color to green). So you can do...
color:blue;
}
font-weight:bold;
}
a{
text-decoration:none;
}
div#back{
border:1px solid red;
}
Then in your HTML...
<div id="back" class="info">
<p>this is some text</p>
</div>
<p class="info att">This desrves special attention, it should be bold and blue.</p>
The ability to add multiple classes to a single element is awesome!
I don't want to lose my CSS virginity.
im saving myself for marriage
Comment removed based on user account deletion
Comment removed based on user account deletion
CSS fucked up beyond all recognition
Comment removed based on user account deletion
Comment removed based on user account deletion
I'll leave aside whether it's a good idea to have a dynamic web page made up of three *different* scripting systems in one document, and just go on to mention two of the things that bug me most:
Firstly, it does not seem to be possible (unless I just haven't found it yet, please feel free to correct me) to say that I want style FOO to be the same as style BAR except with these changes. i.e., true hierarchical styles. Any word processor worthy of the name supports this. It allows you to make sure that each important style property is defined in exactly one, central place.
Secondly, CSS' styling system is very, very limited. How do you say, I want this container to be big enough to fit this string into? You can't. This means that any kind of layout where you have sized objects with text in them --- such as columns, or a header --- has to be specified in fixed values. You can't say, I want a graphic followed by a line of text followed by something that fills all the rest of the space. (You've got ems and ens and points but frankly, they're not useful.)
I do think that CSS is currently the best thing around for formatting HTML; I've also used it with moderate success for formatting raw XML. It just makes me cringe when I think how good it could be, and how lousy it actually is... I keep having this urge to write my own formatting engine in Javascript, and that's never good.
Comment removed based on user account deletion
There's a little script I found that I use on my web page, though I know it doesn't all quite work, but then Windows users can all go install Firefox.
I noticed that the publisher (sitepoint) is giving away a CSS reference poster through their Website as a free bonus with this book. Anyone seen seen the poster? Is it any good?
I'd get the book just for the free reference poster if I knew it was thorough and most importantly, accurate.
- http://css-discuss.incutio.com/
- http://css.maxdesign.com.au/
- Layout-o-matic
- firdamatic
- http://www.quirksmode.org/index.html?/css/condcom
. html - http://www.devguru.com/Technologies/css/quickref/
c ss_index.html - CSS Quick Reference
- 181 Manually selected references
A couple of tips from me - Build and test your pages in Mozilla first. Even though MSIE still has a huge lead in mkt share, Slashdotters will be surprised to find out that Explorer is a stagnant sun dried dog turd, full of buggy, half-assed standards implementation. It's much easier to do it right first, then insert workarounds so the CSS displays correctly in Explorer. It's easier to achieve the results you want if you start at zero. Null the defaults so that all the implicit layout collapses. * { margin: 0; padding: 0; borders: 0; } If you find these links useful, please pay me back by checking your work on a Mac too. As a website user, I get really sick of seeing display wackiness - especially lines of type with squashed leading or running beyond the container div because nobody bothered to test in a Mac environment too.How do you make the inference that books are faster? Can you search a book with Ctrl+F? Care to take a bet that my Ctrl+F is faster than your index?
Firstly, it does not seem to be possible (unless I just haven't found it yet, please feel free to correct me) to say that I want style FOO to be the same as style BAR except with these changes.
What?? It is called Cascading Style Sheets for exactly that reason, it cascades!
Secondly, CSS' styling system is very, very limited. How do you say, I want this container to be big enough to fit this string into? You can't.
Big enough to fit what string? A container can fit any string with a proper overflow property.
This means that any kind of layout where you have sized objects with text in them --- such as columns, or a header --- has to be specified in fixed values.
This is simply not true. It is fairly simple to generate tabular layouts using pure CSS (that is what display:table-row and whatnot are for!)
You can't say, I want a graphic followed by a line of text followed by something that fills all the rest of the space.
Try this:
Seriously man.. CSS has lots of limitations (some of which will be addressed in V3, some of which aren't), but nothing like what you are spewing. I really suggest you read up some on the spec before you start bashing it so hashly.
Thanks for the pointer to whateve:hover.
Every nifty CSS techniques require work around for one browser or another.
Every browser got flaws, but IE breaks on purpose. Bill Gates should be prosecuted and order to pay restitution...
Name them for what they are, not what they look like.
This is good advice sometimes, but not all the time. I've designed lots of tables where the creative department says, "Use the gray box there," or "Use the red table there." Since I was writing a lot of reports, was I less wise to choose to name the class, "grayBox" and have all the reports use it rather than name each one of 14 reports by its proper name? As it turned out, no, it wasn't.
So I think the answer here is to use your best judgement. Sometimes it's wise to name elements/classes based on what they look like, and sometimes it's not.
I don't make the rules. I just make fun of them.
If you're "scared" of mere markup, I would hate to see your actual coding.
Calling CSS "markup" is disingenuous at best. I think the reason why said "markup" is frightening to programmers is because it is necessarily replete with obscure logic and pretends as hard as it fucking can that it doesn't have any logic within it and there is NO CLEAN WAY TO DEBUG IT.
CSS is as friendly to programmers as a circular saw is to a man's penis.
I don't make the rules. I just make fun of them.
Which is to say, "blue" is a terrible class name, while "important" or "author" or "definition" or whatever are good ones,
I don't buy it. In my last job, I heard a lot of, "Use the gray box there" (as opposed to the red, green, or gold boxes which were used elsewhere). The box that surrounded the area was never indicatedt o be "important," or regarding an "author" or "defintion." They wanted it to be gray.
So what's wrong with in this case? I caught a lot of the, "Always use semantic class names or the Angel of Death will certainly kill you and all your children, you dumbass ingrate," and I'm not so impressed by the threats any more.
I don't make the rules. I just make fun of them.
A dictionary for the slashdot team
(Yes, it's a referral link. Any proceeds go towards actually buying the book for them. Shipping, if any, and the second half of the cost is out of my pocket.)
I've had this sig for three days.
I tried telling Taco about CSS and his reply?
"Phht. The Lion, The Witch, and The Wardrobe sucked.
It's not offtopic, dumbass. It's orthogonal.
something along the lines of
.foo { background-color: red; color: green; }
.bar { inherits: .foo; color: blue}
.bar is based on .foo in every single place you use it. Much less useful.
and that applying <div class="bar"> would then set the bgcolor to red and the fgcolor to blue. In your example you still have to remember that
HAND.
" has anyone seen a review of a book that doesn't get an 8, 9, or 10?
also, does anyone review books that aren't pussy books on perl, php, css, etc.?"
Very well said. I was thinking the same. There is an ugly truth probably though: Books on almost any aspect of computing tend to be aimed at consumer dweebs.
There is so much free tutorial and info on CSS I can't understand some gullible fool bothering to buy a book and read about it
I mean really, who on Earth needs a book to teach themselves CSS as if it were C++ or something.
Konqueror, opera, and the Big 3.
Man I'm rusty. Haven't posted to slashdot in a long time. Let's see if this message works better using extrans...
What's wrong with that is that the guy who said "use the gray box there" will change his mind and want the box to be blue next week. Then your HTML that says <div id=grey"> will be used to display a blue table. It's not a threat, it's a reality that design changes and it's a shame if you have to change your HTML every time it does. Might as well be using font tags and bgcolors in tds again.
That the angel of death will kill you and your children is also not so much a threat, as a promise. That your boss is never going to change her mind about colors is as likely as you and your children living forever. It may not happen tomorrow, but you cannot argue that death will not eventually happen.
bad sig...no donut.
"I wanted to scream as people dickered over whether 0xCCFFEB was better than 0xCCFF8B for a background color, ... just pick one of them, dammit!"
/never/ /ever/ heard coders bicker about which storage structure to use, or which object organisation is best.
And of course, you've
In my opinion, the reason most geeks suck at design is because they think they're special somehow. Graphical design skills, just like coding skills, are cultivated. That kid in primary school that always wowed everyone with nifty drawings of superheroes? He became that good because he spent tons of time practising. Sure, he probably had a little helping in the fine motor skills department, but that's not what made him good. And digital tools mean you can try and change and practice without having to take a new piece of paper every time.
Most of the people here will have been programming way before ever having any computing class in school. And they'll be lightyears ahead in terms of coding skill than the average CS graduate who knows all the "best practices" by heart. Knowing how to code does not make you good, doing it does. You cultivate your sense of good and bad code over the years, just like graphical designers cultivate their sense of proportions, curvature, light/shading/shadows and spacing.
If you're a geek, take the geeky approach: look at shapes in terms of curvature and torsion (calculus!). Making nice flowing shapes is nothing but making sure the derivatives are continuous. Lighting and shadows? Vector math and phong/radiosity/gi. And most 2D pixel operations are nothing but signal processing.
Every person has a sense of aesthetics, all you need to is turn it from a feeling into a practical guide. You need to learn that when your brain tells you "something does not look right", whether it is due to lack of contrast, too little/too much spacing, lack of depth, etc.
So, fire up The Gimp, Photoshop, Paint Shop Pro, or whatever you're comfortable with, and start making mockups (don't try to design directly with XHTML/CSS, it's inpractical). Try out tons of variations. Feel free to imitate the CSS Zen Garden (without copy/pasting) as this is a good excersise in discovering the many almost invisible details that turn them from good design into great design.
It does take time and practice, but then, there's no such thing as a free lunch.
i was currious, where did you hear 'are you sitting comfortable? then ill begin.' (one of your headers in the review) it is almost certainly my own ignorance. but the only connection i make(and it has personal significance) is to a record 'the voyage of happiness stan' by the small faces- the second half of the record(with the happiness stan story) begins 'are you all sitty comfortable 2 square on your body? then ill begin.' im looking at the anthology now, thanks for the tip. and if you have no idea what im talking about- please disregard.
It helps if the semantic approach is used from the beginning.
Exactly my point. I think that the decision to use the semantic approach from the beginning is a *religious* decision, not a *technical* decision.
is gold new stuff? Does red indicate breaking news?
Those types of questions didn't apply in this case. In some cases, the red looked better than the gold. It's just the color of the box and doesn't necessarily have to imply anything else than what just happens to look good with the other colors on the page.
I don't make the rules. I just make fun of them.
In which case I would have changedintoI know this happens to violate the "don't name classes in the Evil Way" rule, but seeing as how millions of babies and kittens would NOT die from this decision, I don't feel so worried.
Then your HTML that says div id=grey" will be used to display a blue table. It's not a threat, it's a reality that design changes and it's a shame if you have to change your HTML every time it does.
This sounds like scare-mongering for the purose of protecting the strong desire to be "right" and "correct." In the real reality, it was more likely that the entire site would be redesigned than the grayBox may change into a blueBox. Granted it was not a large site, but there are many such "not large sites" which hire programmers like me, and the "Never name classes according to how they look" is *not* a valid universal rule.
Might as well be using font tags and bgcolors in tds again.
No, classes are still better than font tags and bgcolors. Even when I do it the Heathen(TM) way.
That the angel of death will kill you and your children is also not so much a threat, as a promise.
A promise of the "unfulfilled" variety.
That your boss is never going to change her mind about colors is as likely as you and your children living forever. It may not happen tomorrow, but you cannot argue that death will not eventually happen.
And yet changing "grayBox" to "blueBox" (which never had to happen, which was exactly according to my predictions) would have solved that world-peace destroying problem quite nicely. It seems like the only rule I'm violating is a religious one.
I don't make the rules. I just make fun of them.
css can consume your life...
Get your torrents...