Cascading Style Sheets: Master Them Quickly, and for Free
In response to a recent post I did on free online tutorials several readers expressed plans to learn more about doing Cascading Style Sheets (CSS). In my experience, many web workers who are very well versed in HTML and XHTML haven’t familiarized themselves with CSS, which is a shame because it can really help enrich and extend sites and blogs. In this post, I’ll describe how you can get up to speed with CSS for free.
CSS is a stylesheet language that gives you lots of granular control over how documents written in markup language will appear online, including layout, fonts, colors and much more. Stylesheets consist of lists of rules that define how the presentation of an online document will be structured. If you just want to dress up a blog or a site, though, you don’t need to learn all the rules—just targeted ones that you’re interested in. That’s where my favorite instructional site comes in handy.
W3Schools has lots of good, free tutorials, and their CSS tutorial is divided up into categories so you can just learn selected skills if a little dab’ll do ya. For example, if you want to learn how to work with CSS for backgrounds in web documents, click on the CSS Backgrounds link and you’ll have access to examples that offer two panes, one for you to type in trial CSS code, and one where—after you hit an “Edit the text and click me” button—you can see how your CSS code will look when published.
This is my CSS code for a yellow background and other colors, with the “Click me” button seen up top:
And this is how my page will look after I publish the document using the CSS code above:
Finally, if you don’t want to improve your CSS or other development skills from home and you’re willing to spend a little money, try Lynda.com. It offers video training for reasonable fees, and there are hundreds of course topics. Also see W3Schools’ other online tutorials, all of which let you practice within their site and see how your work will look when published.
Do you know of any good books, online tutorials or other ways to pick up CSS skills?
Related research and analysis from GigaOM Pro:
Subscriber content. Sign up for a free trial.
I mostly learned all the basics of html and CSS on this site
http://www.yourhtmlsource.com
There are also tutorials for Javascript and CGI scripting.
It is very well explained and the examples are more complete than some on W3school.
But what I realy like about W3school is that you can see the result in the same window and can play around much faster.
The best way to pick up CSS skills is to practice practice and practice :) and check how others do that
With respect to books, anything by Eric Meyer is a great place to start.
I’ve always been partial to the MSDN CSS reference, but the Sitepoint reference looks promising in the extreme.
For working around bugs, the css-discuss wiki (look it up on Google) and positioniseveryting dot net are quite nice.
Don’t forget CSS Zen Garden.
Finally, for advanced work the W3C CSS 2.1 Recommendation is a frequent stop (when you need to ensure that you’re doing it right).
Finally, in the department of shameless self-promotion:
A List Apart: 12 Lessons for Those Afraid of CSS and Standards is my own take on the things to keep in mind when you’re making the transition into heavy use of CSS. The Code section of ALA (as a whole) iis chock-full of useful advanced CSS tutorials.
What I really like about Dan Cederholm’s book, Web Standards Solutions, is that he doesn’t just show you tutorials on how to make a great data table or navigation menu. He explains the WHY every step of the way, so you feel more confident to try new things once you close the book. Highly recommended.
I agree with what Ben said above, and I’ve also found that Stu Nicholls’ CSS Play website is very useful.
Here’s some links:
Eric Meyer’s CSS/Edge
CSS Zen Garden
CSS 2 specification
CSS 2.1 working draft
I really recommend trying stuff out. Also, get the web developer and firebug extensions for firefox, so you can examine the CSS of specific elements on web pages you like.