WEB STANDARDS CREATIVITY

Styling the branding
The branding of any site is incredibly important. Here, the branding acts not only as a sign of where you are—what service you
are in—but it also serves as a navigational device. Both of the headers will be links to the relevant sites. The h1 and h2 in the
branding part of the site are grouped together as a division of like items, a div, with the id of branding. I float that left, give it
some margin and padding, and add the IBO logo as a background image.
#branding {
float: left;
text-align: left;
margin: 1em 0 0 1em;
padding: 0 0 1em 6em;
background: url(ibo_logo.gif) no-repeat 0 0;
}
The reason the padding is so large over on the right side is to accommodate the IBO logo, which I’ll add in minute when I
start to add color and rounded corners.
The headers are sized using
ems. The h1 is given a value
equivalent to 14px, and the h2
gets a value equivalent to18px.
#branding h1 {
font-size: 1.4em;
}
#branding h2 {
font-size: 1.8em;
font-weight: bold;
}
Then I color the links white.
#branding h1 a,
#branding h2 a {
color: #fff;
}
Figure 6-17 shows how these
additions look.
Figure 6-17. Adding the branding and menus. Here, I’ve added the IBO logo as part of the masthead, along
with the other menus.
chapter 6 Grid Design for the Web
149