Here’s a small collection of resources and tools for learning CSS, Cascading Style Sheets. It’s through links like the following that our collective CSS skills are improved. Read more, learn more.
Links for CSS
To get an idea of what CSS can do for your site visit the CSS Zen Garden, a site for inspiration in designing with CSS. Studying the style sheets for the different themes presented here can teach you a lot about style and positioning.
Introduction to CSS by Dave Raggett at W3C. Even though it’s a bit dated this is a good place to start to see how CSS works. Get the basics about linking to a separate style sheet and setting link colors.
CSS Reference and Tutorial from the Mozilla Developer Network could be a one-stop shop for learning CSS. Pick the getting started tutorial if you’re not very familiar with using style sheets. If you already know the basics, you might want to bookmark the exhaustive CSS reference. It has browser support tabulated for all the CSS 3 properties.
SitePoint CSS Reference uses categories to organize pages into CSS-properties, CSS-selectors, at-rules, styling concepts and layout examples. Play around in the “live” area (you get there by selecting the “Play” tab) where you can post CSS rules or HTML markup in the left pane of the window and see the immediate effects in the right pane.
Interested when a particular feature showed up in the history of CSS? Check the CSS Properties Index for an alphabetical list of properties. Properties are tabulated for CSS1, CSS2, CSS2.1, and CSS3. Clicking on any property name will bring you a definition of that property along with its acceptable values, which elements it can be applied to, and whether it can be inherited.
Font stacks might be of interest in studying site designs and learning the underlying CSS. Each font stack is like a mini-library. Learn how to create your own font stack through examples of Eight Different Font Stacks. Extend the idea to include basic page design via 960 Grid, a CSS library.
Great tutorials on specific CSS topics include:
- MaxDesign Listamatic tutorials on lists, selectors, floats and CSS presentations
- CSS3 @media queries – excellent slideshow
Once you start writing your own CSS you’ll want to know if everyone can see your site the way you intend it to be seen. Validating CSS will assure that your style sheet is valid and therefore understood by browsers that people use to see your site. Check your CSS style sheets with the W3C CSS Validator. Tip: change profile to CSS3 and change vendor extensions to warnings, until CSS3 properties are more widely in use.
Keep reading, people. It’ll make you better at what you do.