|Your favorite CSS book?|
Mine are getting dated - time to upgrade...
Got a favorite CSS book to recommend?
I don't have a favorite CSS book to recommend - I'm a firm believer that the best information, CSS and otherwise, is found online.
O'Rielly's Cascading Style Sheets: The Definitive Guide is pretty comprehensive if books are what you absolutely must have. I don't own it by the way, but I have broswed through it pretty thoroughly and appreciated its focus to the topic at hand.
I can't see spending $49.99 for a 100 pages of topical content and 400 pages of filler! :(
The best place to start with CSS online is right at the source: W3C.org
[w3.org...] (great CSS resource links including WestCiv tutorials)
Blooberry.com is a decent resource as well: [blooberry.com...]
Remember, books get old... sites (good ones!) get updated. But unless you have a laptop and a portable connection, online resources do not make good "restroom" reading material! ;)
Books still serve a purpose!
Using CSS editors can also be a good learning tool as most come with an extensive help section. TopStyle Pro 2.5 and Style Master are both very good.
Yep, I like to do most of my research online. But then I sometimes need a good reference book to understand how to apply what I found. Or to find out how it relates to something else, etc.
I find most online resources don't go to the depth that a good book does.
Also, perhaps the most valuable online resources are forums like this one. These are the practical applications of what is more theoretical in both books and online references.
But no poster can take the time to thoroughly explain all the ins and outs of their cool method, so I find an offline reference very handy. Once you know the keywords, a good reference book is a pretty good info retreival method.
And we beginners sometimes need a chapter-by-chapter treatment.
Then there's my "reading myself to sleep" habit...
Let's not leave out the W3Schools CSS Tutorial [w3schools.com].
Core CSS: Cascading Style Sheets is another very comprehensive CSS book you might want to check out in addition the the O'Reilly book.
Are you currently using a CSS editor? Even if you write all your code by hand, a good CSS editor is an instant resource and guide. I have a prefernce for Topstyle Pro for the GUI and the included references.
I write all of my CSS by hand initially, embedding all the code in the head of my current document (unless I am working with on of my saved templates). I find editors very useful when working with multiple sytle sheets since most editors will let you open as many CSS files as you wish... Cut n' paste between style sheets saves lots of time... at times! ;)
Not using a CSS editor yet, but that's a good idea, Papa. And I do seem to do a lot of cut 'n paste from one stylesheet to another.
I've started looking at CSS validators, but waiting until my CSS does what I want before going through validation (for the "more than just fonts CSS" at least).
I've hardly ever used CSS, but decided it was time to dive in. Just picked up Cascading Style Sheets (CSS) by Example and think its great after geting about halfway through it.
If you are already a CSS Pro it might be to elementary. The whole book (so far) is examples you can work through to see how it all works.
To be honest, I've got the O'Reilly book and it's very comprehensive, but the way it's laid out, it's not the best for a beginner. There are too many things presented at one time, and my personal preference is to move slowly and master one thing before moving on to the next.
>TopStyle Pro 2.5
There's also TopStyle Lite that's free that I just downloaded.
>I write all of my CSS by hand initially, embedding all the code in the head of my current document
papabear, that's exactly the way I'm doing it for starters, same way I did with HTML, just opening the HTML window in Dreamweaver. When I first started, I deliberately stuck with Notepad so I'd learn HTML thoroughly; wherever you go, Notepad is there so you can fix anything anytime. Plus, knowing it from scratch, you can make adjustments in the control panel of servers without the FTP hassle - it takes a few seconds.
I'm doing it the long way though, one line for each attribute, figuring that by sheer repetition it'll all get memorized. It's also easy that way to copy and paste, or change one thing and see the difference.
I've started out with doing just the text and heading formatting for the whole page, then came top, left and right margins. Really classy, with no tables and table-less code. All those <td> tags are gone, it's so uncluttered. I use NS4.7 as the DW default browser to check, with JS and CSS off to make sure, and it's just like old-fashioned left margin straight across default font, which is still readable. Now will come classes on the same page for different sections, like bottom navigation, and then the two column table-less layout. Just taking it one step at a time is making it easy.
After all the on-page stuff is mastered, I'll move on to linking the stylesheets and using more than one, or using some imbedded for the "cascading." Slow and easy, step by step.
I've done the "Clean up HTML" command in DW, and there's nothing to clean up. The code is clean and clear, and there's so much less of it. It's like a weight lifted with all that HTML font_tag mess gone. I feel like a free woman, I don't know what took so long, now that I know what I've been missing.
I'll NEVER go back!
Watch out... it gets even more addictive! ;)
I love it when I can look at a page of markup and it reads like a page from a book!
Check your "content to code ratio" for an even better surprise...
As soon as you start hitting 70% content you will ABSOLUTELY NEVER go back!
But... I will make a prediction Marcia. It will not be long until you succumb to "CSS temptation" after finding a layout solution that does EXACTLY what you want to do... BUT, is NOT NN4 compatible. :)
@import ain't so bad...! ;)
Marcia... if you have Homesite (usually ships with Dream Weaver), try working between the two programs as both are itegrated into the other. After a while ( a short while!) you will find what a timesaver Homesite truly is. Before long, DW will be collecting dust. ;)
Homesite also integrates with TopStyle, as well as the CSE HTML validator and HTML Tidy. That makes for a very powerful bundle!
I think you'll do just fine with online tutorials. Having said that, I've never tried an editor but they sound interesting.
Here is a basic tutorial to start with, the above links are invaluable.
CSS are, to me, one of those things that seemed complex from the outside but were actually quite simple once I got my feet wet. I started writing my own CSS before I learned basic HTML. They are no more complex than HTML and I found them to be easier to grasp.
Hello gph, great link! I've added it to my CSS Bookmarks. There is one issue that I would like to address that I am finding problems with. Some of the CSS resources I've researched list the CSS Link Rules in the wrong sequence. For example, I'll use echoecho in this case since they show an incorrect order for the CSS Link Rules. I've sent them an e-mail to alert them.
The above order for the CSS Link Rules is incorrect. They should be in this order...
The a:hover must be placed after the a:link and a:visited rules, since otherwise the cascading rules will hide the color property of the a:hover rule. Similarly, because a:active is placed after a:hover, the active color will apply when the user both activates and hovers over the a: element. For these four CSS Link Rules to work as intended, they must be in this order within your style sheet...
It is very easy to miss this if your a:hover and a:active colors are the same. Go ahead and try it out, make sure you specify different colors for both rules and you'll see what I mean.
Pageone, I think a possible explanation goes back to pre-hover days when all we had was link, visited, active states.
I recall a number of tutorials where the order was given as link, visited, active, hover.
There are still a number of sites that express this order:
Including of all places, the New York Public Library Style Guide: [nypl.org...]
Click on the Simple.css to view.
This order DOES work as long as the :active link retains focus. It may also be simply a matter of "style" (as in personal preferance) since in this case, the active state is only displayed while being "activated."
I think you pretty well summed it up regarding "hover." Changing the order will determine the occurance and duration of the "hover state." It just depends on how and when you wish to trigger the "style."
Here is a good example of the link, visited, active, hover order in action: [ncdesign.org...] If you try it, you can see that the "active" style is only displayed while the link is held "onClick" as soon as the "click" state is removed the "active" state ends.
Try a search for "link+visited+active+hover" and you will find a number of sites that still list this specific order.
Visited does need to be placed before active, hover or focus because of a bug present in IE5/5.5.
Thanks for pointing that out guys, I'll note that if I recommend the site again.