This is the first part of a series of articles that will discuss a particular CSS best practice or tip. I’ll be covering a mixture of topics that deals with CSS best practices, performance optimization, and tips and tricks to improve your workflow.
Today we’ll be covering the topic of resetting your styles.
CSS doesn’t always have to be serious business. In this article, you’ll see 25 fun, novel, and experimental CSS techniques and demonstrations.
Note: some of the techniques and examples discussed here may not validate, cannot be rendered correctly by some browsers, and may not conform with standards-based design and development. Many of the techniques shown here are for exploration only.
There are many ways you can present numerical, chartable data by styling elements using CSS. Using CSS to style your data prevents you from relying on static images and increases your content’s accessibility.
Below, you’ll read about 8 excellent techniques for styling elements into beautiful, accessible charts and graphs.
CSS can be both a tricky and easy to learn. The syntax itself is easy, but some concepts can be difficult to understand.
This article features 20 excellent websites to help you "grok" CSS. There’s a wide range of websites included – from blogs to directory-style lists and websites that focus on one particular topic related to CSS.
Stylesheets can get large real quickly, both in terms of length and file size. To ensure that your web pages render correctly and quickly, here’s a compilation of some of the best free, web-based CSS optimizers/compressors, code formatters, and validation services. Check them out and pick the ones that work best for you.
Optimizing and Compression
In this article, I’ve pieced together 30 excellent CSS techniques and examples that showcases the capabilities and robustness of CSS. You’ll see a variety of techniques such as image galleries, drop shadows, scalable buttons, menus, and more – all using only CSS and HTML.
Clicking on the title will direct you to the documentation/tutorial, while clicking on the accompanying image will direct you to the demo page if it’s separate from the documentation.
A pure css-based gallery; hovering over an image enlarges it.
A recent article of mine entitled “20 Websites That Made Me A Better Web Developer” attained a large amount of popularity and I was pleased to find out that many people found a link or two that they’ve bookmarked.
The list started out as a massive collection of 100 websites (after going through my massive-huge bookmark collection) , but I then decided that, instead of overwhelming readers with 100 links that will be skimmed and forgotten the next day, that I would filter it down to only 20 quality websites that have been truly helpful and rich with information. A few things on the list were there for sentimental reasons, such as Web Monkey and SitePoint, which did help at the beginning, but now I’ve outgrown.
I received plenty of feedback regarding sites that should have been on the list. Here, I’d like to make amends and list down websites that have helped you (and me) further our understanding of web development and design.