CSS Resources

CSS is fun, but CSS can also be tricky. If you are looking at getting into designing websites and blogs you have to learn how to use CSS to style them.

Here are a list of CSS tools and resources that you can use to speed up your development time.

Resources

1. Tutorials
2. Grids
3. Books

Tutorials

Here are some of the best tutorials from around the web, so you can get the hang of CSS.

• W3 Schools – A massive CSS tutorial database. Includes step by step tutorials, snippets, reference guides and quizzes.
• Web Developers Handbook – An extensive list of web development resources (focusing primarily on CSS) including tutorials, highly requested code snippets, tools and more. The ideal starting place for developers wishing to improve their CSS designs.
• CSS properties you never use, but should – These are all CSS level 2 properties but some of them don’t work in all browsers, so make sure and test things out before putting them into use.
• 53 CSS techniques you couldn’t live without – Over the last few years web-developers have written many articles about CSS and developed many useful techniques, which can save you a lot of time – of course, if you are able to find them in time. Here you’ll find a list of techniques we , as web-architects, really couldn’t live without.
• 15 CSS tricks that must be learned – The list of these techniques is an ever expanding one, however, there are certain tricks that are essential to achieve your goal.
• Use CSS to do anything – CSS can powerfully open the doors to a lot of rich and unique techniques.
• 10 principles of the CSS masters – These CSS tips are gathered from some of the most respected designers on the planet. They have the portfolios to back their advice up, so you’ll know that each tidbit of advice is of the highest quality.

• A list of 84 links to more useful CSS tips and resources – Probably more CSS resources than you will be able to go through in weeks, plus a month.
• 12 CSS tricks – Some interesting ways of doing things with CSS.
• 20 useful resources for learning CSS3 – As a web developer, it’s crucial to be well-informed about modern and future web standards.
• 10 principles of the CSS masters – These CSS tips are gathered from some of the most respected designers on the planet. They have the portfolios to back their advice up, so you’ll know that each tidbit of advice is of the highest quality.

back to resources menu

Grids

The best CSS grids on the web.

• Blueprint – It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.
• 960 – This system is based on a page width of 960 pixels however it only works with 12 or 16 columns.
• YUI CSS grid – The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations.
• YAML – “Yet Another Multicolumn Layout” (YAML) is an (X)HTML/CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users.
• The 1kb grid – This is a grid in the true sense of the word as it is comprised of the bare necessary CSS to get you started.
• Grid designer – A very easy to use grid designer to help you get started with your web project quickly.
• Layouts from Iron Myers – A ton of cross browser compatible CSS grid templates.
• Spry Soft – The variable grid system is a quick way to generate an underlying CSS grid for your site. The CSS generated file is based on the 960 Grid System.
• Grid system generator – Easily generate grids for your projects with this online system.

back to resources menu

Books

Get the hang of CSS by learning from the masters themselves.

• CSS: The Definitive Guide by Eric Meyer
• CSS Mastery: Advanced Web Standards Solutions by by Andy Budd, Simon Collison and Cameron Moll
• The Ultimate CSS Reference by by Tommy Olsson and Paul O’Brien
• CSS: The Missing Manual by David McFarland
• Build Your Own Web Site The Right Way Using HTML & CSS by Ian Lloyd

back to resources menu

Tools

1. Fonts
2. Navigation
3. Forms

Fonts

• Typesetter – An online application for comparison of the fonts for the screen.
• CSS font wizard – Use this wizard to experiment with font and text styles and generate sample CSS style source code.
• Em calculator – Em Calculator is a small JavaScript tool which helps making scalable and accessible CSS design. It converts size in pixels to relative em units, which are based on a text size.

back to tools menu

Navigation

• List-O-Rama – List-O-Rama will allow you to generate nice CSS inline menus in seconds. Just walk through the wizard and insert the text of the links, choose the vertical or horizontal menu, pick the design and click on finish.
• List-O-Matic – List-o-matic lets you choose the content, layout and presentation of your list-based navigation menus.
• CSS Tab Designer – CSS Tab Designer is a unique and easy to use software to help you design css-based lists and tabs visually and without any programming knowledge required!
• CSS Menu Generator – Generates both the CSS and the HTML code required to produce a text-based yet appealing set of navigation buttons.

back to tools menu

Forms

• JotForm – A WYSIWYG web form builder
• Quick Form Builder – Accessify’s quick form builder merges two older tools (form builder and form element generator) into one much slicker process.
• CSS form code maker – This HTML – CSS form generator will create a nice looking layout for forms.
• WuFoo – Helps you create contact forms, online surveys, and invitations so you can collect the data, registrations and online payments you need without writing a single line of code.

back to tools menu

If you enjoyed this list please take a minute to share it with your friends or just bookmark it using any of the links below. Don’t forget to sign up for free updates.

• 27th July, 09
• Posted under: CSS