5 FAH-8 H-430
web site style and consistency
(CT:WEB-5; 06-21-2012)
(Office of Origin: IRM/BMP/GRP/GP)
(Updated only to revise Office of Origin)
5 FAH-8 H-431 BRANDING
(CT:WEB-1; 09-29-2005)
Branding is creating all the pages on a Web site to have
the same look and feel. Typical items used in the Web site brand are a common
heading, locating elements such as navigation bars at the same spot on each
page, using the same color background, and using the same font size and weight.
Branding helps the viewer to easily recognize the Web pages that belong to a
given Web site. For example, see www.state.gov or usinfo.state.gov.
5 FAH-8 H-432 CASCADING STYLE SHEETS
5 FAH-8 H-432.1 Use of Style Sheets
to Avoid Complex Nesting of Tables
(CT:WEB-1; 09-29-2005)
a. Percent measurements should be used to automatically
adjust the display to fit the users monitor resolution. The two display
examples that are shown below the code are the same Web page with different
screen resolutions. In both cases the left and right columns are 20% of the
window and the center column automatically fits between them.
#top
{
height:
35px;
padding:
10px 10px 0px 10px;
margin
2px 2px 0px 2px;
text-align:
center;
background-color:
#DDDDFF;
}
#left
{
position:
absolute;
left:
0px;
top:
100px;
width:
20%;
background-color:
#EEEEEE;
}
#center
{
margin-left:
20%;
margin-right:
20%;
background-color:
#EEEEEE;
}
#right
{
position:
absolute;
right:
0px;
top:
100px;
width:
20%;
background-color:
#EEEEEE;
}
b. Use of style sheets to define display regions can
produce self-documenting code that is easier to manage when making content
changes. The id values identify the regions and there is no table structure to
get in the way.
<html>
<head>
<title>Column example</title>
<link href="./fah.css"
content="text/css" rel="stylesheet">
</head>
<body>
<div id="top">
<h1>Column example using style
sheet</h1>
</div>
<div id="left">
<p>Left column</p>
</div>
<div id="center">
<p>Center column</p>
</div>
<div id="right">
<p>Right column</p>
</div>
</body>
</html>
5 FAH-8 H-433 Through H-439 Unassigned
(CT:WEB-1; 09-29-2005)