Web Development

10 CSS resources that will sharpen your Web design skills

You can get all sorts of cutting-edge ideas on how to put CSS to work with the help of the online resources listed here.

We all know about cascading style sheets (CSS), which are thoroughly documented within the W3C and incorporated heavily within the HTML5 standards. I've compiled a list, in no particular order, of some resources that will jump start your CSS resource library. I know that there are plenty of other CSS resources out there, and if you have any favorites that I missed, add them to the discussion below.

Note: This article is based on an entry in our Web Master blog

1: CSS Tricks

CSS Tricks (Figure A) is a Web design community created by Chris Coyier. It includes forums, videos, downloads, code snippets, and articles on all things regarding styling, coding, and CSS.

Figure A

2: Noupe Design blog

The Noupe Design Blog (Figure B) will satisfy your curiosity for what's new and better; this site includes 29 articles on CSS in addition to articles on Ajax, general Web design, and Photoshop; tutorials on a variety of subjects; and several articles on WordPress. Inspiring recent articles include "Typographical Inspiration for the Weekend," "Sexy Drop Down Menu w/ jQuery & CSS," "50 Free CSS/(X)HTML Templates," and "15 CSS Habits to Develop for Frustration-Free Coding."

Figure B

3: NYPL Online Style Guide

While it is a part of its legacy site now, the New York Public Library still offers the NYPL Online Style Guide (Figure C), a basic set of its site's guidelines to set you straight on the basics of XHTML and CSS.

Figure C

4: W3C CSS2 Specification

The W3C CSS2 Specification (W3C Cascading Style Sheets Level 2 Revision 1, CSS 2.1), shown in Figure D, is a great resource for searching the defined standards for CSS.

Figure D

5: CSS-Discuss

So you think you can just read some articles or books and be okay? Well, we all know that Web development is about code that doesn't work at 1:00 AM while the rest of your team is fast asleep. You're going to need to talk to someone while scratching your head and finishing up that second pot of midnight coffee, so take your questions to CSS-Discuss. You might be able to help someone else while you're waiting for your answer. The online CSS community has public and private forums and a wiki (Figure E). The free subscription gives you access to all the resources. Recent discussions have included questions centering on CSS for viewing sites within tablets and mobile devices.

Figure E

6: A List Apart

A List Apart CSS topics list (Figure F) includes many articles on the subject of separating presentation from structure and behavior. There are tips and tricks on CSS drop-down menus, layouts, pull outs, print design, and style switching. This site offers even more topics than just CSS resources.

Figure F

7: CSS Zen Garden

CSS Zen Garden demonstrates the beauty of CSS Web design. Calling itself The Road to Enlightenment, this Web site is a demonstration of what can be accomplished visually through CSS-based Web design. New submissions are still being accepted by the Zen Garden, and any graphic designer is welcome to participate in the project. However, new submissions to the site are added and updated on a sporadic basis. The site lets you view the designs that others have created with their own CSS implementations while keeping the content consistent. Figure G shows one of the popular CSS design submissions, "A Walk in the Garden," by Simon Van Hauwermeiren.

Figure G

8: CSS Cheat Sheet V2

As simple a tool as this may seem, the CSS Cheat Sheet V2 on the Added Bytes Web site (Figure H) is very useful. The handy cheat sheet is available in PDF or PNG file formats and is a free download; however, author Dave Child does ask that folks donate to his Amazon.com wish list. Included in the cheat sheet are selectors, pseudo-selectors, units, box model, and properties list. The site also offers the cheat sheet in Spanish, Portuguese, and Russian language versions, and in Apple dashboard widget and iPod content formats. By the way, Dave also offers cheat sheets on other Web development topics, such as Python, Subversion, mod_rewrite, PHP, SQL Server, and HTML.

Figure H

9: Deploy*

Deploy* (Figure I) is a free open source Web application that allows you to select the name of a project, and through a series of radio buttons, select the Doctype and whether you want a CSS reset or jQuery integration. It then creates a zipped, ready-to-use package with all specified files and folders. Deploy* saves time and organizes your code's parent folders and more.

Figure I

10: Blueprint

Blueprint (Figure J) is a CSS framework that uses a grid-like system that includes predefined typography, along with a set of plug-ins, form styles, print styles, templates, and much more. The site offers great support via live demos, a Wiki, forums and discussion groups, a repository, and a bug tracker. The zip file download is just under 4MB. However, it is not a silver bullet, and it's best suited for Web sites where each page may require its own design. Take a look at existing blueprint pages before deciding if the framework is right for you. You may also check out the test files in the tests directory, which demonstrate most of the features in Blueprint.

Figure J

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

3 comments