Index by Christopher Schmitt

Safari, the world’s most comprehensive technology and business learning platform.

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required

O'Reilly logo

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 ...

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required