O'Reilly logo

CSS Cookbook, 3rd Edition by Christopher Schmitt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Sample Design: The U.S. Flag

The goal of this exercise is to create a U.S. flag through CSS and semantic markup that is not only visually appealing, but also useful so that clicking on any of the stars will take you to a different state’s main government page and clicking on any of the stripes will take you to the government sites of the original 13 colonies.

The Basic Markup

First, lay the groundwork for the flag by constructing markup. Include a title for the page, as well as the 50 states represented in the U.S. flag.

Wrap the title in a header tag and a list for the 50 states:

<h1>
 <a href="http://www.usa.gov/">United States of America</a>
</h1>
<ol>
 <li><a href="http://www.alabama.gov/">
  <strong>State of Alabama</strong>
  <i></i>
 </a></li>
 <li><a href="http://www.state.ak.us/">
  <strong>State of Alaska</strong><i></i>
 </a></li>
 [...]
</ol>

The heading and each individual state has a link to its respective government site. Also included are extra sets of italics tags within each link, which you pick up as a selector for styling later.

You need to distinguish the 13 colonies from the rest of the states, as these comprise the 13 stripes of the flag. Do this by emphasizing them, wrapping them in the em tag:

<li><a href="http://www.ct.gov/">
 <em><strong>State of Connecticut</strong></em>
 <i></i>
</a>
</li>

So far, the results don’t look very much like a flag, as shown in Figure 13-20. That’s where the CSS comes in. Now that you have the basic markup down, begin styling your page.

Figure 13-20. The ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required