Benjamin Lu

everyday is cool

Changing the Design Without Changing the HTML

A shared stylesheet becomes more interesting when you try swapping it out altogether. Make a short HTML page with a heading, a navigation list, and an article. Keep a copy of the markup and use it for both versions of the design.

In the first stylesheet, put the links on one line and give the article a narrow reading width. In the second, let the links stack and change the typeface and spacing. Switch the stylesheet link in the document head and reload. Follow a link in each version and tab through the navigation.

If you need to rearrange the markup just to change a color or add space, look at the selector you’re using. You may be able to target the existing heading or list. This is a good exercise for understanding what a theme can change while keeping the content itself recognizable.