Selectors in action - step by step tutorial

diagram showing final page layout

Introduction

This tutorial focuses on how to use selectors to build a simple page layout. As part of the process, we will style different instances of the same element to demonstrate how rules can be written to target specific instances of an element without affecting the rest of the page.

The layout

This is a 3-column liquid layout which will show all columns at equal heights - with a different color in each column.

There are many ways to style 3-column layouts. All of them have strengths and weaknesses. This method will work with any variety of column lengths. However, it does not collapse gracefully when the viewport is reduced to less than 400px wide.

Navigating the tutorial

Throughout the tutorial, the red buttons will take you to the the next step, and the blue buttons will take you to a sample of that step. All samples include a blue button that will return you to the tutorial.

You can also use the top strip navigation which will allow you to go back and forward between steps.

Finished sample »

Go to Step 1 »


Other Max Design articles and presentations
Associated with webstandardsgroup.org