CSS

What is CSS. You probably know it already, but just in case, here's a reminder.Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.This quote is taken from the W3C's official definition of CSS. What about this "mechanism" ? Why should I use it ? Here are some answers.

Simple

If you've been coding for a while, this language will appear pretty easy. And even if you're new to webdesign, it won't take long before you can use CSS for your websites. The syntax is very simple and it is based upon :

And that's pretty much it!

Powerful

Although CSS are simple text files, they are very useful in webdesign. You'd think they'd only define fonts and colors (as in print style sheets), but CSS can also define layouts. Times when HTML tables were used to define them are gone (or should be). A website can contain thousands of HTML pages and only 1 CSS file to rule them all.

The popular showcase CSS Zen Garden is a perfect example of CSS capabilities. The same HTML markup is used for all designs. The only difference is the CSS (and its images). A must-see.

Respectful

The existence of CSS apart from HTML provides a seperation between the content of a page (HTML) and its graphic presentation (CSS). This seperation adds a huge amount of flexibility in webdesign as it easily helps adapting the content to any rendering method.

For example, screen readers are more likely to read a HTML/CSS based website than a Table-based one as the HTML is well structured. Using CSS is a first step to accessibility.

Apart from that, CSS helps webdesigners work less and more efficiently as the amount of HTML code is considerably cut down and the layout of a whole website narrowed down to one and only text file.

Only

You would have guessed : CSS Only Design is both a challenge and a guide. And using exclusively CSS in your design is not that easy (yet).

Challenge

It's a challenge because this site does not contain any image, Flash or JavaScript. Of course I don't want any of you to use only CSS on your site but actually try to use the most of it. Get as far as you can with CSS in your design, and then add images to finish it up. Some CSS properties can save you a big amount of disk size and site load.

Guide

On this site you will find various resources to help you understand CSS, through examples and discussions. As I am far from being a CSS expert, if you feel like posting an article, I would be pleased to publish it.

Limitations

CSS is powerful... when it's correctly interpreted. As you should know, not all CSS capabilities are supported by browsers, Internet Explorer (6 and 7) being the worst (and sadly the most widespread) browser. And a website should look the same on any internaut's computer. That's why some advanced CSS properties can't be used in order to avoid layout problems. That is why CSS Only Design focuses on fully supported properties.

Design

Design is about making your website attractive, according to its content. You don't have to be an artist to achieve this, you just have to play around some key elements.

Color

What a world look like without color ? It's the first key element that you want to focus on. Color exists in CSS mainly through :

There are thousands of colors to play around with. But it's actually the combinaison of these that make a site look attractive. If you feel uninspired, just take a look at some color trends to get you inspired.

Typography

A site contains essentialy text. And even though CSS only provides a small amount of fonts, you can come up with interesting designs using various colors, sizes, letter-spacings, font styles...

In the future, webdesigners will be able to use any font thanks to CSS 3 properties.

Positioning

The general layout of a website is a main purpose. Should its width be fixed or flexible ? Would my navigation be vertical or horizontal ? What should my header look like ? And my footer ? Should my content be divided in several columns ? Many questions that will result in tons of different layouts.