Selectors in action - step by step tutorial
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.
Other Max Design articles and presentations
Associated with webstandardsgroup.org