How to Work with Tabs in CSS3 - dummies

How to Work with Tabs in CSS3

By John Paul Mueller

Many developers use tabbed interfaces to reduce application complexity. If you can focus the user’s attention on one item at a time, you reduce the potential for errant input. In this CSS3 example, you begin with a simple function call. (You can find complete code for this example in the Chapter 06Widgets folder of the downloadable code as Tabs.HTML.)


The trick for this example is in the HTML tags, just as it was for the Accordion widget example. There are some important differences in how you create the two pages to obtain the desired appearance, as shown in the following code:

<form id="ConfigForm" method="get" action="Tabs.html">
 <div id="Configuration">
  <li><a href="#Tab1">Foreground Color</a></li>
  <li><a href="#Tab2">Background Color</a></li>
  <li><a href="#Tab3">Options</a></li>
 <div id="Tab1">
  <input id="FGRed"
  checked="checked" />
  <label for="FGRed">Red</label><br />
... More inputs and labels ...
 <div id="Tab2">
  <input id="BGRed"
  checked="checked" />
  <label for="BGRed">Red</label><br />
... More inputs and labels ...
 <div id="Tab3">
  <input id="Sounds"
  value="SpecialSounds" />
  <label for="Sounds">Use Special Sounds</label>
  <br />
  <input id="Effects"
  value="SpecialEffects" />
  <label for="Effects">Use Special Effects</label>
 <input id="ChangeConfig"
  value="Change Configuration" />

Notice that the <h2> elements are gone in this case. Instead of using headings to define the separation between elements, you provide an unordered list (<ul>) instead. The list must contain a href to each of the <div> elements in the page. There isn’t any difference in the page content. You also need to provide some CSS to format the control as shown here.

 width: 90%;
 text-align: center;
 #Configuration div
 text-align: left;

In this case, the #Configuration style defines the overall size of the tabbed interface and the fact that the tabs have centered text. The #Configuration div changes the content alignment to left.


To make a change, you click the tab that contains the information you want to see. You make changes as normal. Clicking the Change Configuration button sends the changes to the server. If you test this example by using the same process you did for the accordion example, you get precisely the same results — only the interface appearance has changed.