Java Reference
In-Depth Information
Let's look at the HTML in the body, and its style, fi rst.
<div class=”tabStrip”>
<div id=”tabStrip-tab-1” class=”tabStrip-tab”>Tab 1</div>
<div id=”tabStrip-tab-2” class=”tabStrip-tab”>Tab 2</div>
<div id=”tabStrip-tab-3” class=”tabStrip-tab”>Tab 3</div>
</div>
<div id=”descContainer”></div>
The fi rst <div/> element has a CSS class of tabStrip. The three <div/> elements contained within it
represent three tabs. Each tab <div/> element has a value assigned to its id attribute, and a CSS class of
tabStrip-tab.
The tab strip
<div/>
element has a sibling
<div/>
element with an
id
value of
descContainer
. It
doesn't contain any children (yet), and it doesn't have a CSS class associated with it.
In this example, the tab strip is visually set apart from the rest of the page by giving it a gray
background.
.tabStrip
{
background-color: #E4E2D5;
padding: 3px;
height: 22px;
}
It's given an actual height of
28
pixels (height + top padding + bottom padding). This height and pad-
ding vertically centers the tab
<div/>
elements within the tab strip.
The tabs have several CSS rules to defi ne the way they are rendered in the browser because they have
three states: normal, hover, and click. Despite these three states, they are still tabs and thus share some
visual characteristics. The fi rst rule dictates these shared properties.
.tabStrip div
{
float: left;
font: 14px arial;
cursor: pointer;
}
The selector tells the browser to apply these properties to all
<div/>
elements inside the tab strip. The
elements are set to fl oat left to give them an inline appearance (
<div/>
elements are block elements,
and appear on a new line by default).
The next rule, the tabStrip-tab class, defi nes the normal state.
.tabStrip-tab
{
padding: 3px;
}
All this rule adds is a padding of three pixels on all sides of the element. Next is the hover state, as
defi ned by the
tabStrip-tab-hover
class.
.tabStrip-tab-hover
{
