This is a very handy CSS reference. It includes a complete selector list, the syntax, and usage examples. The focus is on core CSS though CSS3 is also covered.
There are many CSS table generators out there: some better than others. Most output beautiful looking tables with the downside of bloated code and extra divs. If you’re looking for quick basic table CSS then I recommend HTML and CSS Table Border Style Wizard. This is not complete solution but rather a visual quickstart for basic table features.
Here’s a link to the latest DZone Refcard which provides a good overview of key CSS3 features and how to code them. Refcardz in general are well done handy references. Here’s an index of all Refcardz. In order to download Refcardz you will need to create a basic account, but don’t worry, you will only receive emails when new Refcardz are released. It’s well worth it.
This is one of those catch-all articles that lines up seemingly disparate tips and tricks from different areas that are aimed at speeding up your workflow as a designer. Some may be time savers but several are just really cool techniques. All are linked to “how to” resources and some are better than others. Here are a few standouts.
- Rounded Corners Done Right
- Favicons Next to External Links
- Speed Up CSS Prototyping
- Doodle meeting scheduler
Question: what are CSS sprites?
Answer: a single image file containing a composite of several images.
Question: how are they used?
Answer: a common application is navigation where different sections of an image are revealed based on menu item states e.g. static, hover, selected.
If you’re not familiar with CSS sprites then this article is a great primer. Sprites are a powerful tool for front end designers. Learn about their advantages and how to use them.
Interactive design elements are highly effective across a broad range of physical and virtual products if they are done in a way that increases user engagement in a positive way. Case in point, using CSS hover elements for user interactions. This article provides and excellent example along with a tutorial on how it’s done.
Heydon Pickering makes an excellent case for pure semantic CSS and makes the point that “There’s no such thing as semantic CSS. There’s only semantic HTML and its visible form”. In other words, target HTML elements and attributes instead of relying on non-semantic markup i.e. CSS classes. He provides excellent practical examples including how to identify link types and add icons after the links which is a technique I frequently use.
This is a good resource for jumpstarting your CSS design. This is a blend of CSS2 and CSS3 resources. I have not worked with these but they are worth checking out.