What are the design patterns for HTML and CSS ?

Question

I know that is a very embracing question, but I have just started with Ruby on Rails, and still have a long way with CSS and HTML. There are lots of books about CSS and HTML patterns, but I would like to know what is really applied to actual webpages. For example, what's the best way of doing a simple webpage with a lateral menu, a logo on the top, and some text below? Ok, it seems stupid, but there's lot of ways of doing that, or not ?

So, how can I learn this patterns and what are the real patterns ?

Would appreciate suggestions of books, articles, etc.

Answer 1

you can find some good css templates here:

http://www.csszengarden.com/

Answer 2

It varies from developer to developer. So I'll just tell you what I'm doing!

I'm actually following a very common pattern - separate ANY layout from the contents!

Into the HTML goes...

• Text
• <div/> containers with IDs to be layouted

And in the CSS goes...

• Layout for the ID'd and class'ed <div/> layout containers
• Colors, Background images
• Fonts

It allows to rapidly change the whole page design without even touching the HTML! And it decreases both your server's traffic and the load time on the client pages, because the CSS file can be cached, since it does not change as much as the HTML does!

The CSS Zengarden nate posted is a very nice example of this pattern. The same unmodified HTML with dozens of CSS files with totally different looks!

This pattern also allows the same unmodified HTML to be displayed with automatically selected CSS files on huge displays, on small netbooks and on mobile devices. Can't be any better if you ask me!

Answer 3

Actually in html and css there are not patterns in the oo sense.

I find this tutorial very useful: Design and Code your first website

The nettuts website has a lot af very good free tutorials.

A very good book to begin is:

Head First HTML with CSS and XHTML

Answer 4

The rule of thumb should be to do all design in CSS and HTML is just HTML without calls to design. That way, like referenced above, you can change design rapidly.

A good reference for how this works is the Zengarden CSS site at: http://www.csszengarden.com/

This is a site I used often as I learned the ins and outs of CSS design.

Answer 5

You might want to check out some CSS libraries.

I don't personally like using them because I have ways that I like to do things and sometimes they aren't flexible enough for what I want to do. But since you're just starting out they might help you get something that looks good up really fast without having to worry about float drop bugs or margin collapsing or any other CSS quirks that are easy to hit but hard to recognize if you haven't seen them before.

An example would be the Yahoo User Interface (YUI) Grids CSS that will help you set up many different kinds of grid layouts. To find more, I would search for "css framework" or "css library".

Another YUI resource I think would be really useful for you would be their design pattern library, which documents different ways to display common interface items and gives you resources to go implement them. This can help make your interface look familiar to users and can keep you from feeling like you have to redesign a drop-down box or something.