Beta
×

Welcome to the Slashdot Beta site -- learn more here. Use the link in the footer or click here to return to the Classic version of Slashdot.

Thank you!

Before you choose to head back to the Classic look of the site, we'd appreciate it if you share your thoughts on the Beta; your feedback is what drives our ongoing development.

Beta is different and we value you taking the time to try it out. Please take a look at the changes we've made in Beta and  learn more about it. Thanks for reading, and for making the site better!

The CSS Anthology

timothy posted more than 9 years ago | from the good-and-useful dept.

GUI 169

Bruce Lawson writes "I've read a lot of CSS books, but this one is the one I wished that I'd read when I was learning, and I suspect that other slashdotters may concur. It is firmly pitched at the coder rather than the designer, takes you from CSS virgin to upper intermediate level, with good attention to the process of (re)designing with CSS, legal issues such as Accessibility (section 508), and assumes that you're not scared of mark-up." Lawson offers this disclosure: "I should immediately disclose that I've worked for two different companies that have published the author, Rachel Andrew, but I have no connection with the publishers, or this book." Read on for the rest of his review.

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.

Summary

There'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.

cancel ×

169 comments

Sorry! There are no comments related to the filter you selected.

Ok, let's take up a collection (5, Funny)

wowbagger (69688) | more than 9 years ago | (#11509196)

Ok, let's take up a collection for Rob et. al. to get this book....

Re:Ok, let's take up a collection (5, Funny)

The Ancients (626689) | more than 9 years ago | (#11509260)

Small steps.

We need to get them help with their spelling and grammar, first.

Re:Ok, let's take up a collection (0)

Anonymous Coward | more than 9 years ago | (#11509415)

Small steps.
We need to get them help with their spelling and grammar, first


Some sort of dupe control before that.

Re:Ok, let's take up a collection (1)

The Ancients (626689) | more than 9 years ago | (#11509484)

Some sort of dupe control before that.

As I said - small steps.

Re:Ok, let's take up a collection (2, Informative)

Anonymous Coward | more than 9 years ago | (#11509537)

It's been [alistapart.com] done [alistapart.com] , but because it "won't scale" or some other bogus reason, it will never happen.

I guess it's just easier to block the W3C validator [w3.org] instead.

Tables... (1, Funny)

future assassin (639396) | more than 9 years ago | (#11509227)

layout 4 life.

Re:Tables... (0)

Anonymous Coward | more than 9 years ago | (#11509256)

This book review has been pwnt already!

Learn online for free (2, Informative)

Anonymous Coward | more than 9 years ago | (#11509246)

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.

Re:Learn online for free (1)

Gorffy (763399) | more than 9 years ago | (#11509342)

feel free to point us to a few really, really in depth tutorials online, as I've yet to find one.

Re:Learn online for free (2, Informative)

Khuffie (818093) | more than 9 years ago | (#11509402)

http://www.alistapart.com.

Might not be newbie friendly, but its got an extensive list of resources.

Re:Learn online for free (2, Informative)

someonewhois (808065) | more than 9 years ago | (#11509531)

Hey look, w3schools [w3schools.com] teaches it for free too! And look, they're linking to another Sitepoint book...

Here's a handful of good CSS resources (5, Informative)

mmmuttly (631983) | more than 9 years ago | (#11510783)

I spent about 30 hrs this week working the CSS. Here are some of the couple dozen sites I visit regularly. They're not all tutorials, but all are useful. There are a lot of place where standards and the real world usage clash. 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.

Re:Learn online for free (1)

gardyloo (512791) | more than 9 years ago | (#11509405)

Not sure who would plonk down good money when so many thorough tutorials are online.

I would. I keep going through monitors like crazy. IT says I'm not supposed to underline things with ballpoint on the screens themselves. Anyone have some soft #1 pencils they can send me?

Re:Learn online for free (0)

Anonymous Coward | more than 9 years ago | (#11510866)

What is this amazing and mysterious "IT" you speak of?

Free? What about the time factor? (5, Insightful)

Spy der Mann (805235) | more than 9 years ago | (#11509438)

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.

Re:Free? What about the time factor? (0)

Anonymous Coward | more than 9 years ago | (#11509633)

Internet connection dropping? No problem, you have already downloaded a local copy of the CSS specifications so you have quick access to them on your own machine / lan.

Re:Free? What about the time factor? (1, Informative)

Anonymous Coward | more than 9 years ago | (#11509731)

Books have their uses, but some of your arguments aren't really good:

When you need to get things done FAST, and learn while not in front of your computer monitor...

Um, this is CSS we're talking about, there's no use for CSS when you're away from your computer. The only time a book is better is in a meeting, when someone asks if such-and-such is possible with CSS...

Hey, what if suddenly your internet connection drops?

As already mentioned, download useful websites to your local computer.

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.

Sure, there are two problems here. (1) Most of us don't have so much work that we can't take some time learning without losing billable hours. (2) You lose billable time learning anyways, whether it's from a book or online, you're making the wrong assumption that online resources are worse than books, there is no such correlation.

Look, for some people books are better, for others websites are better. Live with it and stop making half-assed arguments for one or the other.

RE: slashdot book reviews (-1, Flamebait)

Anonymous Coward | more than 9 years ago | (#11509255)

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.?

thanks

Re: slashdot book reviews (-1, Flamebait)

Anonymous Coward | more than 9 years ago | (#11509333)

Hey, I got an idea.

Why don't you fucking go to http://books.slashdot.org/ [slashdot.org] and find out for yourself? PWNED!

Re: slashdot book reviews (-1, Offtopic)

Anonymous Coward | more than 9 years ago | (#11509340)

Why don't you fucking go to http://books.slashdot.org/ and find out for yourself? PWNED!

...maybe i did, and maybe that's what made me ask my question in the first place.

I like it.... (5, Interesting)

ZiZ (564727) | more than 9 years ago | (#11509265)

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.

Good review, but... (5, Insightful)

fiannaFailMan (702447) | more than 9 years ago | (#11509273)

as a coder I'm pathologically unable to design the type of showcases that you see at the CSS Zen Garden
I wish people would get out of this mindset that you must be either a coder or an artist and never the twain shall meet. I work quite comfortably on both sides of that fence and I have met plenty of renaissance people in this industry who are just as comfortable with code as they are with a graphic design tool like Photoshop. It's that kind of thinking that leads to the most creative solutions IMHO. Back in the days of Leonardo DaVinci there was no Berlin Wall seperating technical and creative people, it's a relatively recent addition to our culture and a bit of an unhelpful one.

Re:Good review, but... (0)

Anonymous Coward | more than 9 years ago | (#11509373)

I think it's fine to have an itch and scratch it, in the CSSZenGarden sense, but I think it does take a Graphic Artist to make it look good.

Having has to sit through a couple of website design discussions as an innocent bystander, I wanted to scream as people dickered over whether 0xCCFFEB was better than 0xCCFF8B for a background color, because I'm of the mindset of, "well, you haven't given them any option on it, so they'll be none the wiser, just pick one of them, dammit!", but I kept my mouth shut.

I'm of the "coder" mindset. Sure, I can help lay the technical foundation, but don't ask me to make it pretty, all by myself.

Re:Good review, but... (0)

Anonymous Coward | more than 9 years ago | (#11509466)

I've read when I was learning, and I suspect that assumes that you must be either a coder or an artist and "never the twain shall meet". I work quite comfortably on both sides of this but must disclose I work most comfortably with legal issues such as Accessibility using a graphic design tool like Photoshop. It's that kind of nonsense that leads to the published the author, Rachel Andrew, but I have no connection with the process of (re)designing graphics code as they might be with CSS. I'm assuming that they're not scared of mark-up. Lawson offers this disclosure: "I shouldn't be here." You should consider doing the same.

Re:Good review, but... (1)

fiannaFailMan (702447) | more than 9 years ago | (#11509679)

Huh?

Re:Good review, but... (0)

Anonymous Coward | more than 9 years ago | (#11509723)

I think you know what I mean...

Re:Good review, but... (1)

fiannaFailMan (702447) | more than 9 years ago | (#11509802)

Actually I haven't a clue what you're trying to say. No offence, but I can't understand you.

Re:Good review, but... (0)

Anonymous Coward | more than 9 years ago | (#11510027)

OK, I try again. Myself being more skilled in the programming area, I find I have jumped head first into creating a site that one time. But when I look at sites and applications they're already familiar with, well you get the picture. Yes, back in the programming area, I find I have created such beautiful designs at best. And, for most creative solutions, users shouldn't find I have created CSS-based layouts several years ago. My problem however, is not having the "design eye" that I did. If the book had explained where I was going wrong, or given me the ability to claim what you often see in CSS Zen Garden... It's easy to say that I did, half the time or most of the time with too much Guinness. I don't know about that. Myself a professional in programming area, I find I have a very difficult time with the most accessible solutions, but rather with the most of the book is aimed, and I imagine that I did. If the book is aimed, then I imagine that I would try to claim that one. But when I look and feel just like all remember how well those other sites functioned, right? OK, so you maybe make a simple mistake in the ability to claim what you often see in CSS Zen Garden. It's easy to say that I would consider you "professional designer and an amateur programmer at best". What you think there, renaissance man?

Oh, and happy Iraqi election day.

Re:Good review, but... (4, Insightful)

fuw (823023) | more than 9 years ago | (#11509479)

I don't know about that. Myself being more skilled in the programming area, I find I have a very difficult time creating a site that I would consider "professional looking". I mean, I love CSS and have jumped head first into creating CSS-based layouts several years ago. My problem however, is not having the "design eye" that gives folks the ability to create such beautiful designs that you often see in CSS Zen Garden.

Sure, I *want* to create a well designed site, but until I get that knowledge (school) it just ain't going to happen (not for me, anyway).

> I work quite comfortably on both sides of that fence

It's easy to say that about yourself, sure I even would try to claim that one. But when I look at sites I have created and compare them to sites done by a *real* graphic designer (web designer), there *is* a huge difference.

I'd consider myself a professional programmer and an amatuer designer at best.

Re:Good review, but... (2, Insightful)

fiannaFailMan (702447) | more than 9 years ago | (#11509659)

I don't know about that. Myself being more skilled in the programming area.....
I probably should have explained myself a bit better. The point of my original post was that there are people out there who make good designers and good coders at the same time, regardless of what you personally as an individual are good or bad at. It is possible.

Re:Good review, but... (1)

poot_rootbeer (188613) | more than 9 years ago | (#11509558)

I have met plenty of renaissance people in this industry who are just as comfortable with code as they are with a graphic design tool like Photoshop. It's that kind of thinking that leads to the most creative solutions IMHO.

And, most of the time, user interface issues should not be solved with the most CREATIVE solutions, but rather with the most PEDESTRIAN solutions. Users shouldn't find any surprises in the interface of your site or application -- it should look and feel just like all the other sites and applications they're already familiar with.

Yes, back in the days of Da Vinci design and engineering overlapped quite a bit. And we all remember how well his helicopter designs functioned, right?

Re:Good review, but... (0)

Anonymous Coward | more than 9 years ago | (#11509653)

You mean we should all go back to Win3.x, CUA and Motif-based designs, or do you want even more pedestrian than that, like, say, IBM 3270 terminal emulation, one screenful at a time?

There is always room for a *little* differentiation and change, but not a lot. And it's subjective for everyone.

WordPerfect was very successful because what one learned in previous versions generally carried over into newer ones, all the way down to the keystrokes and macro commands.

But WP couldn't really compete in the Windows UI environment, when it mattered most.

And eventually, doing everything with the mouse became the "common man's tool", not memorizing all the keystrokes, and WP has essentially become irrelevant.

I guess I'm thinking of not switching verbs on the same action, even if the "new" version does "lots more Better!". File->Find should have stayed File->Find. Sure, the semantics of the command is that it's Searching for things, but, dammit, I want to Find it.

I can't wait to see all the funny little isms that get broken or transmorgified when Longhorn is unleashed upon the world.

"You thought you 'knew' computers, eh? Well, guess what? You don't know $hit!"

Re:Good review, but... (1)

fiannaFailMan (702447) | more than 9 years ago | (#11509754)

user interface issues should not be solved with the most CREATIVE solutions, but rather with the most PEDESTRIAN solutions. Users shouldn't find any surprises in the interface of your site or application -- it should look and feel just like all the other sites and applications they're already familiar with.
I'm confused. How on earth do you get "bad interface design" from "creative solutions? I never even mentioned interfaces, I was talking in general terms about design. In any case, a rennaissance man is more likely to produce a more usable interface. Get a pure designer to design a user interface and you frequently get stuff that looks like a million dollars but well nigh impossible to use. Get a pure coder to produce an interface and it may work but it'll look like crap.
back in the days of Da Vinci design and engineering overlapped quite a bit. And we all remember how well his helicopter designs functioned, right?
The technology to provide enough power did not exist and the basic aerodynamics and mechanics of helicopter flight were unheard of to say nothing of being understood. His designs were still pretty creative for their time though, wouldn't you say? And his work in the Sistine Chapel wasn't bad either.

Re:Good review, but... (1)

version5 (540999) | more than 9 years ago | (#11510468)

...user interface issues should not be solved with the most CREATIVE solutions, but rather with the most PEDESTRIAN solutions.

Not really. The majority of UIs out there are plain awful, so the most pedestrian solution is usually a very bad one. Because each application presents different information, different types of information, different levels of detail, differently-sized data sets and different kinds of end users, each UI should be creatively designed to accomodate all of this variability. If you are saying that people shouldn't re-invent the wheel I agree, but that is not the same as saying that they shouldn't be creative, any more than saying people shouldn't write perl scripts in assembly takes the creativity out of that.

Not re-inventing the wheel doesn't mean that creativity is out, only that things that work should not be changed. Unfortunately, people are accustomed to awful UI design, but what works for them is almost incomprehensible to a new user. In most cases, I think you gain more users than you lose by using good, creative UI that fits well with people's most natural way of interacting with data, and doesn't force them to interact in ways that are only natural to a computer.

Re:Good review, but... (1)

sv0f (197289) | more than 9 years ago | (#11510134)

I wish people would get out of this mindset that you must be either a coder or an artist and never the twain shall meet.
[...]
Back in the days of Leonardo DaVinci there was no Berlin Wall seperating technical and creative people...


I accept "coder" and "technical" as synonyms for the purposes of this discussion, but not "artist" and "creative."

Re:Good review, but... (0)

Anonymous Coward | more than 9 years ago | (#11510281)

i think its funny that html monkeys consider themselves "coders"

Re:Good review, but... (1)

aardwolf204 (630780) | more than 9 years ago | (#11510744)

that always made me laugh too. but what do you think about "php coders"?

CSS is annoying (3, Interesting)

Capt'n Hector (650760) | more than 9 years ago | (#11509329)

Kinda OT, but I wanted to get this off my chest: Is there (shouldn't there be) a way to replace this:

a.blue {
color: blue;
}

span.blue {
color: blue;
}

div#back {
color: blue;
}

With...

color: blue {a.blue, span.blue, div#back}

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.

Re:CSS is annoying (0)

Anonymous Coward | more than 9 years ago | (#11509361)

a.blue, span.blue, div#back {
color: blue;
}
Better?

Re:CSS is annoying (3, Informative)

Anonymous Coward | more than 9 years ago | (#11509363)

Yes, it's called grouping. You have your syntax backwards, though. It should be like this:

a.blue, span.blue, div#back {color: blue;}

Of course, you don't really need a.blue and span.blue. A simple .blue would work.

Re:CSS is annoying (0)

Anonymous Coward | more than 9 years ago | (#11509371)

Well...

You could just say .blue {
color: blue;
}

and it works for most tags (div, span, etc), so their example is kind of silly. Don't get me wrong, I have many complaints about CSS, but I wish they would use better examples sometimes...

Re:CSS is annoying (5, Informative)

Vaevictis666 (680137) | more than 9 years ago | (#11509374)

You've got two options:

.blue {
color: blue;
}

and have it apply to anything with a class="blue", or

a.blue, span.blue, div#back {
color: blue;
}

to explicitly declare them. The commas being key in this one.

Re:CSS is annoying (1)

vondo (303621) | more than 9 years ago | (#11509386)

How about

a.blue, span.blue, div#back { color: blue; }

which works just fine? I'm fairly new to CSS, but it seems to me it's missing CPP-like definitions to allow propagating colors and such into more complicated structures.

Re:CSS is annoying (1)

Photon Ghoul (14932) | more than 9 years ago | (#11509439)

propagating colors

What does that mean? Does the "Cascading" part of Cascading Style Sheets not cover that?

(Seriously, I'm not sure what you're asking)

Re:CSS is annoying (1)

vondo (303621) | more than 9 years ago | (#11509497)

I'd like to be able to do something like
#define BGCOLOR red;
somewhere in a CSS and then be able to use
color: BGCOLOR;
at various places in the CSS file(s) rather than gathering everything together in one place like the parent example. Sometimes it can be a pain to find everything and if you have styles for an element other than "color:" it doesn't save space to write them all together.

Re:CSS is annoying (0)

Anonymous Coward | more than 9 years ago | (#11509953)

(Smart) People with repeating parts of HTML abstract them to templates. I think you probably need to do the same with your CSS -- dynamically generate it (either through a build process or at runtime). HTML could have all kinds of syntax changes but they've kept it simple so that lots of languages can generate it -- the same is happening with CSS.

(I use browser detection and serve up different CSS files, too)

Re:CSS is annoying (0)

Anonymous Coward | more than 9 years ago | (#11510003)

Maybe he wants:

DEFINE COLOR myownspecialblue #2040f0;

h1,h2,h3,h4,h5,h6,h7,p,ul,li { color: myownspecialblue; }

Re:CSS is annoying (1)

ravenspear (756059) | more than 9 years ago | (#11509392)

Why not just do:
a.blue, span.blue, div#back { color: blue; }
That does the same thing and takes up less space.

Re:CSS is annoying (1)

gordon_schumway (154192) | more than 9 years ago | (#11509404)

a.blue, span.blue, div#back { color: blue; }

Re:CSS is annoying (1)

protagon (852658) | more than 9 years ago | (#11509407)

wouldn't
a.blue, span.blue, div#back {color: blue}
do the trick? I started learning CSS 3 days ago... wish I could afford that book. I've found westciv's site a good place for beginners. http://www.westciv.com/style_master/house/tutorial s/index.html/ [westciv.com]

Re:CSS is annoying (0)

Anonymous Coward | more than 9 years ago | (#11509410)

first, it is a bad classname because the point is to separate concerns. What happens to your HTML when the L&F needs to be orange?

But, yes, you can do: .note, #back {
color:blue;
}
or

a.note, span.note, #back {
color:blue;
}

Re:CSS is annoying (0)

Tablizer (95088) | more than 9 years ago | (#11509412)

Why we are on the topic of complaints, why the hell do we need Yet Another Language for all this? What is wrong with extending HTML or XML rather than create a whole new goofy syntax for esthetic info?

It makes writing and using parsers doubly complex, for example. Pick one and stick with it, dammit. Maybe Lispers were right: Go with Ess Expressions. But since most use HTML already, I vote for extending it instead of the CSS syntax.

Re:CSS is annoying (1)

Scott Laird (2043) | more than 9 years ago | (#11509472)

You're about 10 years too late for this discussion. CSS has been a part of the standards landscape for around a decade now, and it's been bog-common for at least a few years.

Re:CSS is annoying (1)

Tablizer (95088) | more than 9 years ago | (#11509597)

You're about 10 years too late for this discussion. CSS has been a part of the standards landscape for around a decade now, and it's been bog-common for at least a few years.

Are you saying we should live with poor standards because they are already established and it is too hard to change now? I don't see why HTML counterparts cannot slowly be added to the standard without busting backward compatibility.

But I am still curious on why they did not ask those kinds of questions back then. Does anybody have a reference?

Re:CSS is annoying (0)

Anonymous Coward | more than 9 years ago | (#11510014)

The original intention of HTML, in 1994, was to present structured content. It was never designed to make it determine how a page looks. However, as the dot-com madness came in to being, end-users could never get the concept of structured content, and Netscape shoehorned a bunch of tags in which allowed HTML to determine the presentation (look) of a web page.

This went against the original HTML spirit.

CSS was created so HTML could go back to its original purpose (becoming simpler in the process), and so people who wanted to change the presentation could have it be separate from the content.

Re:CSS is annoying (1)

Tablizer (95088) | more than 9 years ago | (#11510060)

CSS was created so HTML could go back to its original purpose (becoming simpler in the process), and so people who wanted to change the presentation could have it be separate from the content.

Okay, but do we have to use an entirely different syntax to acheive that? For example, create something called Style Markup Language using XML. I am not necessarily challenging the integration level here, but the syntax choice. We can separate the concepts without adding Yet Another Web Language syntax to the already crowded syntax mix (HTML, JavaScript, app language, etc.)

Re:CSS is annoying (1)

404 Clue Not Found (763556) | more than 9 years ago | (#11509822)

What is wrong with extending HTML or XML rather than create a whole new goofy syntax for esthetic info?

I think the whole point of CSS is to separate content from presentation.

You mark up your content with HTML, logically grouping it into lists, headers, paragraphs, etc.

Then, once you have the information ready, you specify how you want that information to *look*.

This might seem like overkill if you're only doing one simple homepage with just a few colors here and there. But as your site expands, you may not want to have all your content mixed in with your formatting. This is especially important if you want to make your site cross-platform. The content of your site will stay the same, but the layout/presentation could be different for regular web browsers, less-advanced cell phones, text readers (for the blind), etc.

Using CSS also allows you to quickly change the look & feel of your site without going through all your HTML documents one at a time and doing a find & replace on all of them. Let's say you suddenly wanted all of your article titles to be bold instead of italicized... if you used an external CSS style sheet for all your pages, you could change one line:

h1 {font-weight: bold}

instead of going through dozens of them and replacing all the correct s with s.

Re:CSS is annoying (1)

404 Clue Not Found (763556) | more than 9 years ago | (#11509835)

Oops. Forgot to turn off HTML. The last line should read:

instead of going through dozens of them and replacing all the correct <i>s with <b>s.

Re:CSS is annoying (1)

Tablizer (95088) | more than 9 years ago | (#11510073)

I think the whole point of CSS is to separate content from presentation.

I argued in a sister thread that seperating the concepts is an orthogonal issue to using different syntaxes for a language.

Re:CSS is annoying (1)

404 Clue Not Found (763556) | more than 9 years ago | (#11510205)

Okay, that's a different point entirely, but an interesting one.

So, are you saying that instead of something like:

.class
{
border: 1px solid blue;
font: 12pt arial;
padding: 3px;
}

p .class:first-letter
{
font-size: 18pt;
}

p .class
{
font: 12pt Times New Roman;
}

It should be more of an XML-style markup, like:

<class>
<border>1px solid blue</border>
<font>12pt arial</font>
<padding>3px</padding>

<p:first-letter>
<font-size>18pt</font-size>
</p:first-letter>

<p>
<font>12 pt Times New Roman</font>
</p>
</class>

?

That's interesting, hmm. I agree that CSS syntax does seem a bit arbritrary. But in practice, it works out pretty well and it's not too difficult to learn. We've had it for so long already, we might as well just accept it and try to maximize its usage. We can't even get CSS, widespread as it is, to be fully supported on all browsers... would there be any hope for yet another language?

Re:CSS is annoying (1)

404 Clue Not Found (763556) | more than 9 years ago | (#11510280)

Hmm, now that I think about it, that sounds just like XSL [w3schools.com] . If I'm not mistaken, that IS exactly the type of thing you described, and it's already a formalized standard. CSS just turned out to be a lot more popular, at least on the web.

In fact, there was a Slashdot article a while back comparing the two [slashdot.org] .

Re:CSS is annoying (5, Insightful)

justMichael (606509) | more than 9 years ago | (#11509418)

The problem with using a color name in your class definitions is about 2 minutes before the site is complete they decide all the blue stuff should be green and now you have blue that's really green.

Name them for what they are, not what they look like. Somewhere down the road you'll be glad you did. ;)

Re:CSS is annoying (3, Funny)

Scarblac (122480) | more than 9 years ago | (#11509549)

On a similar note, a friend of mine worked at a large telco, where they were told that they had to #define all their constants (in C)... so they (others, not my friend) had code that said #define THIRTEEN 13. The number had to change later, of course...

The more things change, the more things stay the same :-)

Re:CSS is annoying (1)

Zocalo (252965) | more than 9 years ago | (#11509420)

What's wrong with using the following?:
a.blue, span.blue, div#back {
color: blue;
}
That fits more with the approach of applying formatting to elements anyway. You could then follow that with further refinements like this:
a.blue {
font-weight: bold;
}
to emphasise links without effecting "span.blue" and "div#back".

Re:CSS is annoying (0)

Anonymous Coward | more than 9 years ago | (#11509980)

IDs are unique, you don't need div#id, you can just use #id.

Almost there (1)

MikkoApo (854304) | more than 9 years ago | (#11509421)

a.blue, span.blue, div#back {
color: blue;
}

Re:CSS is annoying (1)

Mattintosh (758112) | more than 9 years ago | (#11509430)

According to this book [oreilly.com] you can already do that, albeit in slightly different form. Try this:

a.blue, span.blue, div#back {color: blue;}

It's on page 3.

Re:CSS is annoying (0)

Anonymous Coward | more than 9 years ago | (#11509436)

Um... You can do that-

span.blue, a.blue, div#back {color: blue;}

Re:CSS is annoying (2, Interesting)

teneighty (671401) | more than 9 years ago | (#11509440)

I disagree.

What CSS *really* needs is variables. For example:

$border_color: #ccc;

div.foo
{
border: 1px solid $border_color;
}

div.bar
{
border: 2px solid $border_color;
}

Having variables like this would cut down on a lot of the maintenance headaches that CSS can cause.

Re:CSS is annoying (2)

ciroknight (601098) | more than 9 years ago | (#11509712)

*ahem* NO.

If you want variables, use a language designed to work with variables to dynamically generate CSS. You have plenty of choices: PHP, ASP, Perl, Parrot, etc. ad nauseum.

CSS *should* be just a formatting language as formatting is what it does, and all of what it does. It's sad that we couldn't just have one end-all formatting language (HTML could have been better..) and that we had to extend it with other languages to make it more flexible, but now we've got something that works. Dynamic languages, on the other hand, like Javascript, can deal with variables and make pages dynamic. And the world remains happy because it's all open standards for anyone to implement.

Summary: Let's not change CSS if we don't have to. Use a dynamic language to generate your formatting if you must.

short aside: I agree with the original poster. It would be great if you could choose the element and have it automatically changed in all specified objects, but it'd be tricky to parse I think, and would require a syntax change. I think it's best we stick with the typical "objectList.part { color: bleh; }".

Re:CSS is annoying (2, Insightful)

Bitsy Boffin (110334) | more than 9 years ago | (#11509990)

If you want variables, use a language designed to work with variables to dynamically generate CSS. You have plenty of choices: PHP, ASP, Perl, Parrot, etc. ad nauseum.

Why introduce a whole new language into the mix if all you want to do is set some constants that can be used in your CSS.

Things like
darkcolor = black;
lightcolor = green;
so you can do
.message { background-color: darkcolor; }
.text { color: lightcolor; }
obviously that is trivial, but there are a number of occasions I have come across where it would be useful, mainly with colors which you wish to remain consistent but use in different areas (you might want to use it as a background somewhere, and a border somewhere else, currently the only way to do that with plain-old-css is to hard code the color information in several different rules).

It almost sounds like you actually LIKED <FONT> etc.

Re:CSS is annoying (1)

imputor (841598) | more than 9 years ago | (#11509812)

What CSS *really* needs is variables

You can put PHP into your CSS and have Apache send all CSS files through the PHP parser. Put this in an .htaccess file:

<files somefile.css>
AddType application/x-httpd-php .css
</files>

And your CSS like this:

<? $border_color = #ccc; ?>
div.foo { border: 1px solid <?= $border_color ?>; }
div.bar { border: 2px solid <?= $border_color ?>; }

But then it ends up not really being CSS then, dunnit?

Re:CSS is annoying (1)

404 Clue Not Found (763556) | more than 9 years ago | (#11510047)

Maybe you could use more classes instead of variables?

div.foo {border: 1px solid}
div.bar {border: 2px solid} .myborders {border-color: #CCCCCC}

Then use
<div class="foo myborders">

In either case, you'll need to know beforehand that you want two things to share the same color, even if the particular color changes. But if you already know that, you can just define a class for them.

Re:CSS is annoying (1, Interesting)

Anonymous Coward | more than 9 years ago | (#11510827)

I disagree.

What we REALLY need are Cascading Javascript Sheets [www.nic.fi]

Re:CSS is annoying (0)

Anonymous Coward | more than 9 years ago | (#11509464)

CSS(2) can be tedious to deal with.

I generally displace my CSS to at most 2 files: one for color and textual formatting, and another for structure (padding/margins/alignment/etc). My applications are always multi-style capable, and styles are different usually only by colors, images, and font changes--thus only 1 CSS file need be changed.

While this makes editing styles easier, I agree with parent in that attributes like colors/fonts should support a scope association syntax with the various selectors. More generalization the better.

yes there is a way, just backwards:CSS is annoying (1, Interesting)

Anonymous Coward | more than 9 years ago | (#11509471)

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

Re:CSS is annoying (1)

Macrobat (318224) | more than 9 years ago | (#11509491)

You can make a list of selectors use the same style, e.g.:
h1, a, hr {
color:blue
}
I'm not sure what your example means, though. Do you have a class or div called blue? That seems like a misleading choice of variable names. Sort of like creating a typedef of float called Int.

Re:CSS is annoying (1)

Spy der Mann (805235) | more than 9 years ago | (#11509521)

With...

color: blue {a.blue, span.blue, div#back}


You got it backwards.

a.blue,span.blue,div#back { color:blue }

Also, you can specify classes more than once in a stylesheet. I use this to separate my stylesheets in two: Operational (margins, positioning width, etc), and Presentational (color, border styles).

For example:

STYLESHEET A

#whatever, #somethingelse { border:1px solid; width:35%; }

STYLESHEET B

#whatever { border-color:#f00;border-style:ridge; }

#somethingelse { border-color:#0f0;border-style:outset; background-color:#fff; }

Just link both stylesheets in your html header section. Perhaps if you read the CSS specs [w3.org] at the w3c you might find some pleasant surprises :)

CSS is not annoying, knowledge must be acquired (2, Informative)

fuw (823023) | more than 9 years ago | (#11509562)

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.

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... .info{
color:blue;
} .att{
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!

Re:CSS is annoying (1)

mrandre (530920) | more than 9 years ago | (#11509610)

Is it so hard to say
.blue, #back {color:blue}
Seems pretty straightforward to me.

Re:CSS is annoying (0)

Anonymous Coward | more than 9 years ago | (#11509668)

No, that does not make sense at all.

that's why it's a cascading style sheet, not a cascading color sheet.

Which is also why when you flip the order around of what you want to do also works.

Re:CSS is annoying (1)

migurski (545146) | more than 9 years ago | (#11509817)

Read up on selectors (short guide, quick read) [htmlhelp.com] . What you're doing could be rewritten as "a.blue, span.blue, div#back { color: blue; }" as one commenter said, but more importantly, you should be naming things semantically, as another commenter hinted at. Which is to say, "blue" is a terrible class name, while "important" or "author" or "definition" or whatever are good ones, because they mean something. Your stylesheets will be a lot easier to understand if they are filled with gems like ".definition { color: blue; }".

Re:CSS is annoying (1)

Qzukk (229616) | more than 9 years ago | (#11510719)

I use
.red {
color: red;
}
Then, I can define my other classes, and when it comes to the markup
<span class="otherclass otherclass red">blahblah</span>
works just fine

CSS? (3, Funny)

had3l (814482) | more than 9 years ago | (#11509367)

Since when you need a book to play Counter Strike: Source?

CSS W3C Standard (3, Informative)

st3v (805783) | more than 9 years ago | (#11509380)

Actually for the experienced person I would recommend learning from the actual "Standard" of CSS at W3C.

CSS 2.1 Specification [w3.org]

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/ [w3.org]

Re:CSS W3C Standard (1)

ravenspear (756059) | more than 9 years ago | (#11509411)

If you want to see the upcoming CSS 3 standard

No need to bother yourself with that, as it won't become viable until Longhorn 2.0 ships in 2013.

CSS virgin (5, Funny)

Anonymous Coward | more than 9 years ago | (#11509383)

CSS virgin

Would that be someone who:

  1. doesn't understand CSS at all?
  2. reads/understands CSS, but can't write it?
  3. is proficient in reading and writing CSS, but is a virgin (i.e. 70 % of Slashdotters)?

Re:CSS virgin (0)

Anonymous Coward | more than 9 years ago | (#11509860)

whatever, geeks get tail; we're 'in', man.

Re:CSS virgin (1)

aardwolf204 (630780) | more than 9 years ago | (#11510682)

so true.

Tip for a beginner: get a degree in science (-1, Offtopic)

Anonymous Coward | more than 9 years ago | (#11509406)

if you really want to program with a real
purpose get a degree in any science, biochem,
physics, chem, applied math and learn every
language on the planet.

-- or move to india

or learn chinese and work for the cia

CSS books? (3, Funny)

Anonymous Coward | more than 9 years ago | (#11509419)

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. ;)

Ooooh, that scary markup (3, Funny)

Jesus 2.0 (701858) | more than 9 years ago | (#11509529)

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.

im not easy (0)

Anonymous Coward | more than 9 years ago | (#11509722)

I don't want to lose my CSS virginity.

im saving myself for marriage

takes you from CSS virgin to... (0)

Anonymous Coward | more than 9 years ago | (#11509890)

CSS fucked up beyond all recognition

Why I hate CSS (2, Interesting)

david.given (6740) | more than 9 years ago | (#11510229)

Basically, I find that the biggest problem with CSS is that it's like most of the other of the W3Cs standards: a really good idea implemented in a really half-assed way. (XML --- plus: namespaces, ASCII, structured data, extensibility. Minus: repetitive, bloaty, unseekable, attributes vs real nodes. XSLT --- plus: general purpose XML transformation language. Minus: it's written in XML; it's not a real programming language; it's stupidly limited in a lot of ways (variables that won't vary?). XPATH --- don't get me started. etc.)

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.

Re:Why I hate CSS (0)

Anonymous Coward | more than 9 years ago | (#11510617)

#1
.bar,.foo { common style attributes }
.foo { override whatever you want }

#2 - look into something like this
width:100%;
white-space:nowrap;

which will prevent line breaks and fill the full width of the parent container (body, div, whatever).

Re:Why I hate CSS (0)

Anonymous Coward | more than 9 years ago | (#11510683)

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.

Yes you can. Just define FOO as a DIV and BAR-DELTA as another DIV, where BAR-DELTA specifies the differences between FOO and BAR. Then nest BAR-DELTA within FOO. Done.

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.

Hmm... that's exactly the sort of layout mental rut you are supposed to get away from. You should not have perfectly sized objects and layouts because you have no control over what sort of output device a viewer is going to use. What if he's blind and uses a speaking program to render the website?

CSS in IE (1)

Bloater (12932) | more than 9 years ago | (#11510359)

There's a little script [sourceforge.net] I found that I use on my web page [maihem.org] , though I know it doesn't all quite work, but then Windows users can all go install Firefox.

Re:CSS in IE (0)

pyrotic (169450) | more than 9 years ago | (#11510902)

This is a real sign of progress. In the late 90s we hacked websites with javascript so they'd work with Netscape 4. Now, 6 years later, there's a great new browser independent markup language that makes browser-specific hacks a thing of the past. Oh, hang on. We're still writing javascript hacks to make sites work with the latest and greatest browsers.

Separation of layout and content is a fine idea. But does it have to be done on the client-side? What makes XML more suited to this than perl or PHP or python? Is this heresy?

Ah yes, I forgot. The mobile revolution. This is why we recoded all our apps for WAP. Remember WAP? Excuse me for being underwhelmed by the number of Nokia/Ericson users visiting our sites.

Those of you who are true belivers in new technology, please don't be surprised if not everyone has recoded their sites to the latest and greatest XMLized standard. The development tools suck, and browser support is patchy. You'd think someone would have come up with a working solution by now. Oh well, there's always CSS3 to look forward to. I can hardly wait.

CSS Reference Poster.... (0)

Anonymous Coward | more than 9 years ago | (#11510407)

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.
Load More Comments
Slashdot Login

Need an Account?

Forgot your password?