Loading ...
Loading ...CSS Resources: The Ultimate Collection
As a CSS developer (or as a learning CSS developer) you use many resources and sites that help you along the way. May it be as a CSS tool, as a bug fix, or even learning CSS via tutorials. I have compiled the Ultimate List of CSS Resources.
If you have a suggestion for an inclusion, please let me know and I will update the list.
Beginners
CSS is a fairly easy language to learn. However, you need to know where to start. Check out the following links to start of well.
- W3Schools CSS introduction
- YourHTMLSource CSS introduction
- Free CSS Ebook – Need to subscribe to the RSS feed to download the Ebook!
- CSS Basics
General
Here are some general links that don’t fit in any of the other sections but are worth mentioning.
CSS Books
Although I don’t read much offline, I’ve read these CSS books. If you are serious about CSS, you should consider buying any of these books, if not all.
- CSS Mastery
- Eric Meyer on CSS – Mastering the Language Of Webdesign
- CSS: The Definitive Guide
- Pro CSS and HTML Design Patterns
- Bulletproof Web Design
Write Clean and Organized Code
You can write some crappy CSS, or you can create a clean and organized stylesheet. Mastering this will save you time in the end.
- Useful Guidelines For Clean and Organized Code
- Write a well structured CSS file without becoming crazy
CSS Resets
Resetting the default CSS interpretation of browsers is a must. Use any of these CSS resets and you can really start building a site from scratch.
CSS Typography
Typography is an important part of the web. Use CSS to create beautiful looking headings, paragraphs and more.
- CSS & Typography – Tips and Examples
- The Paragraph & Typography Guide
- CSS Typography
- Advanced Typography Options in CSS
- CSS & Typography (Jon Tan)
CSS Compressors
Compressing your CSS once you are finished is a great way to optimize your code and make your CSS styles load faster. Make sure you keep a backup of your original stylesheet in case you want to make changes.
CSS Cheatsheets
CSS cheatsheets can be very handy when you need to reference to a CSS selector. You should print them and put them on your wall!
CSS Galleries
When you are writing CSS, you might need some inspiration along the way. That’s why CSS galleries are there: the most beautiful CSS layouts right in front of your eyes.
PSD to HTML
It’s important to be able to import your beautiful layout crafted in Photoshop into a quality HTML and CSS layout. The ins-and-outs can be learned via these tutorials.
- Converting a Design From PSD to HTML
- PSD to CSS in 4 lessons
- Encoding a Photoshop Mockup to XHTML & CSS
- Converting a Photoshop Mockup Screencast
CSS Frameworks
CSS frameworks can be great for coding perfect looking grid layouts with ease. I use them in my projects all the time.
CSS Tools
There are numberous CSS tools out there that will greatly improve your CSS workflow. I have bookmarked a lot of these tools and it save me lots of time.
CSS Bugs & How to Solve Them
When you are writing CSS, you will find numerous bugs on your path. Keeping a list of websites that will fix them will save you lots of debugging time.
- IE CSS Bugs You Will Get Every Time
- Position Is Everything – Explains the CSS bugs
- All Bugs (even IE3!)
- 20+ Common CSS Bugs and Fixes
CSS 3
While it can take years until CSS3 is finally supported on all major browsers, you can still use it for browsers that does have the CSS3 support. Just remember, your page should look good without these features too.
[...] Visit Source. Looking for More Design Inspiration? [...]
Nice collection! PSD to CSS is pretty awesome.
Great list Stefan, I particularly like the website from Chris Coyier, css-tricks, all good. Also be sure to include in your list articles from Jon Tangerine, he is guru when it comes down to typography & css. (http://jontangerine.com/)
[...] CSS Resources: The Ultimate Collection » DivitoDesign CSS Resources: The Ultimate Collection on DivitoDesign. [...]
[...] CSS Resources: The Ultimate Collection » DivitoDesign As a CSS developer (or as a learning CSS developer) you use many resources and sites that help you along the way. May it be as a CSS tool, as a bug fix, or even learning CSS via tutorials. I have compiled the Ultimate List of CSS Resources. [...]
@Sander – Absolutely correct, how on earth could I forget to add that site to the list! Thanks for the pointer, appreciate it.
Great site, a definate bookmark with some quality links and resources for people (like myself) just starting out!
The link to the Eric Meyer CSS reset is out of date. Here’s the most recent version: http://meyerweb.com/eric/tools/css/reset/index.html
I was surprised to see no mention of Firebug on the list. As a full-time CSS developer, Firebug is a huge part of my workflow. It’s easily the one tool I recommend to anyone working with CSS.
There are some other CSS cheat sheets at http://pushingbuttons.net/cheat/?c=26, just fyi.
Nice post! And a note to all developers: Use a reset!
Thanks guys! The list has been updated with the latest quality resources. Keep them coming!
[...] CSS Resources: The Ultimate Collection [...]
Surely you encountered this list of CSS resets during your research!
@Jeff – Definitely, almost 4 months back I guess! Will include the article on the list, cheers. By the way, changed your design again? I like that!
Thanks Stefan — much appreciated! Glad you like the new design as well. Keep up the great work here at divitodesign! Cheers!
In the book section, I’d add Dan Cederholm’s Bulletproof Web Design: http://www.simplebits.com/notebook/2007/08/08/bpwd2.html
And I’m not as fond of Pro CSS and HTML Design Patterns as you are, but it IS useful.
Thanks for this collection. I think that’s a top list where all wishes come true
thanks a lot
[...] has proved to be a good source of WordPress, jQuery, CSS, and other (e.g. Greasemonkey) information. Digg is good too. Cloud computing. Layer upon layer of [...]
[...] via?CSS Resources: The Ultimate Collection author?Stefan Vervoort trans?Luc [...]
Great resources, I own CSS Mastery, good book!
“CSS Bugs & How to Solve Them” thank you for this
[...] CSS Resources: The Ultimate Collection » DivitoDesign TONS of CSS Resources!!! (tags: im hack) [...]
Very nice list, but where are css galeries ? Or I am missed them ? It’s always better to learn on examples:)
You are absolutely correct. I missed them, but they have been added to the list!
[...] CSS Resources: The Ultimate Collection » DivitoDesign Good collection of CSS resources. (tags: css webdevelopment webdesign) [...]
Thanks for this, i don’t have any idea about css and all that stuff, so i’ll come back to this to help me with my website.
[...] CSS Resources: The Ultimate Collection » DivitoDesign I have compiled the Ultimate List of CSS Resources. (tags: http://www.divitodesign.com 2009 mes0 dia20 CSS lista_de_links) [...]
[...] CSS Resources: The Ultimate Collection [...]
[...] CSS Resources: The Ultimate Collection » DivitoDesign – Nachgucken, wo nachzugucken ist. [...]
thanks for this awesome list! I’m gonna bookmark this post
Great list! Bookmarked, for sure.
[...] Css Resources ci vuole dare una mano, proponendo una lista di utilissime risorse CSS. [...]
Stor samling av länkar för dig som vill lära dig CSS…
Funderar du på att lära dig CSS – stilmallar – ska du ta en titt på den här samlingen artiklar, böcker och skolor. Det är bloggen Divitodesign som har plöjt igenom webben på jakt efter bra CSS-sajter och listat dem i en bra överblick. Till ski…
Thankyou for this collection of useful CSS stuff! I’ve bookmarked this page as I’m sure its going to come in handy time and time again!
Thanks for this, very helpful guide!
Very cool list of useful resources. But why did you list only 3 CSS galleries? There are hundreds of them.
I’ve added only a few because you can find all the inspiration you need there, however, I have added a few more for you!
Thanks people, I see this article has been helpful for many people. Stay tuned for more informative content.
That is an impressive array of resources, I’m bookmarking this page.
Very nice list, yet will take more than a week to eat them all
Personally, I love to learn CSS (and other codes) by taking some online exams. That helps my brain to memorize, than just know-and-forget.
[...] Visit Source. [...]
One more time, we have a great list here!
Great post. I’m very impress with this post,Thanks for sharing this post.
Thanking for sharing this great post.Indian business directory