by 9 people |
Welcome to Beginner's guide to web design using CSS!
Here I will put a number of resources that will help you start using CSS, from articles, inspirational sites, and must-have books. I hope you found them useful and feel free to contact me. Thanks!
Benefits of using CSS
Why use CSS for your design ?
CSS based design offers you following benefits, by separating the content from the presentation
- Simplicity
Have a simpler site to manage and maintain with CSS based design. You'll have a more meaningful and at the same time lesser code to handle. This leads to reduced bandwidth cost, faster downloads, and higher margin to do things that really matters. - Flexibility
Need a printer-friendly version? Handle various screen resolutions like mobile phone? or maybe a neat customization feature? No problem! Just create new stylesheets and use switcher. No more duplicate contents to manage. No complex UI logic to code. Not to mention that you can easily modify the stylesheet to suit your next projects. - Responsiveness
Instantly change the look and feel of your site, simply by editing the stylesheet. Save your time from opening, editing, and saving individual files. Impress your clients with your ability to respond to their latest creative ideas faster, with a smile
Articles on the benefit using CSS
- Greg Rewis on Why Use CSS
- CSS provides benefits into three main areas: flexibility, rendering, and accessibility.
- Mozilla on The Business Benefits of Web Standards
- Using CSS means wider audience, lower cost to produce new content, and increase compliance with accessibility requirements. It reduces vendor lock-in, cost of maintenance, and increase flexibility in terms of presentation. In short, CSS contributes to easier site management, a larger audience and a better return on investment.
- Robin Good on CSS Importance And The Benefits Of Using Open Standards For Web Design
- Benefits using CSS include lowered costs, improvement in time-to-launch, and greater overall satisfaction with the end product in business sector. It makes teamwork easier and more efficient, and improve developer morale. It also improves User Experience because designs are displayed more quickly, and are accessible, flexible, and cross-platform
- Roger Johansson on Ten reasons to learn and use web standards
- Some of the benefits highlighted: making designers and their clients look professional, improve search engine rankings, simplify maintenance, future-proof content - In short a good business sense.
- Douglas Bowman on Beautiful Interfaces with CSS
- CSS provides a new wave of design possibilities that is beautiful, accessible and faster.
- Digital Web on The Dollars and Sense of Building to Standards
- Using CSS and XHTML improves ROI, reduces development times, leads to a better search engine rankings and reduces time to support alternative browsers and devices
- Maxdesign on The benefits of Web Standards to your visitors, your clients and you!
- Faster download, wider user and devices accessibility, supporting customizable site appearance, easier to maintain, cheaper hosting costs, better search engine ranking, restyle content easily without changing code, improves accessibility and provides a competitive edge as more of the world moves to using Web Standards.
Great websites use CSS
curated content from Flickr
Even more sites that use CSS
- CSS Import
- No frills CSS Gallery
- CSS Beauty
- CSSBeauty is a database of well designed CSS based websites from around the world.
- CSS Remix
- CSS Remix was created to present the latest techniques in visual presentation, user experience, and site coding to the web design community in a simple and effective manner.
- Unmatched Style
- Unmatched Style is a constantly growing community dedicated to acknowledging those who have made exceptionally gorgeous web sites using Cascading Style Sheets and web standards. By recognizing these exceptionally beautiful designs, other designers and businesses can get inspired and find a direction they may wish to take with their own web sites.
- Stylegala
- Stylegala is an online resource and inspiration guide for web agencies, designers and developers who take interest in websites that combine the powers of design, web standards and CSS.
Getting Started
Following are some of the great books written by the expert in CSS design and development. These book are especially popular in the design community
The Zen of CSS Design: Visual Enlightenment for the Web
Amazon Price: $29.69 (as of 01/08/2010) 
CSS Mastery: Advanced Web Standards Solutions
Amazon Price: $22.04 (as of 01/08/2010)
Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS
Amazon Price: (as of 01/08/2010)
Cascading Style Sheets: The Definitive Guide, 2nd Edition
Amazon Price: (as of 01/08/2010)
Eric Meyer on CSS: Mastering the Language of Web Design
Amazon Price: (as of 01/08/2010)
Designing With Web Standards
Amazon Price: $27.54 (as of 01/08/2010)
CSS Techniques
- CSS Based Design
- Jeremy Keith wrote comprehensive introduction to CSS that will help you start building CSS-based websites.
- CSS from the Ground Up
- Web page design for designer is another CSS resources for newbies. It assumes little or no knowledge of putting a Web page together. It really is 'from the ground up'.
- CSS Basics.com
- 18 chapters about the basics of CSS, from syntax up to positioning and pseudo elements
- [DEMO] Designline - A Design Timeline
- This is a good demo on how the CSS-based design progressed
- Making the Jump to tableless design
- Find out how Andy Budd made the jump to CSS-based design. Example code is provided.
- Build A Simple Style Switcher in CSS
- Laurence Veale shows how to enable user to choose the way they see your site.
- Bluff Your Way In CSS
- Brush up your bluffing skills with this Andy Budd & Jeremy Keith presentation in SXSW 2005 and boost yourself as the next generation of web designers!
CSS Resources
- Choose a template
- Choose your site template from Layout Gala: a collection of 40 CSS layouts based on the same markup. This is a great site to start building fundamental site structure. You can always change to different layout without modifying the HTML page.
- Make rounded corners
- Nifty Corners Cube makes it very easy to create rounded corner borders without adding unnecessary mark-ups and images.
- Add vertical navigation menu
- 14 free vertical navigation menus from Exploding Boy. Really neat.
- Or more navigation types
- One stop resources for all things related to CSS navigation, including both horizontal and vertical menu.
by zudoku
I am a web designer, based in Singapore. My passion is to design and develop simple, useful, and usable web applications.
(more)
(more)
Explore related pages
Web Development Tutorials- Hello there :) This lens is meant to be a medium to help you learn to make your...
iStylr - WYSIWYG Web design 2.0- Stay updated about the first online one stop design shop, iStylr - the online WY...
CSS Design- When I began designing websites, my biggest concern was the finished product. I...
Adobe Products For You- Adobe Systems Incorporated (pronounced a-DOE-bee) is an American computer softwa...
Web Standards: Best Practices Web Development- The craft of building web sites that are functional, beautiful, usable and acces...
