UNCLASSIFIED (U)

5 FAH-8 H-430 
website style and consistency

(CT:WEB-24;   03-09-2023)
(Office of Origin:  IRM/OPS)

5 FAH-8 H-431  BRANDING

(CT:WEB-24;   03-09-2023)

Branding is creating all the pages on a website to have the same look and feel.  Typical items used in the website 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 website.  Please see brand.america.gov for Department of State branding.

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 user’s 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>

visual example of a table in a web browser window

 

5 FAH-8 H-433  Through H-439 Unassigned

(CT:WEB-1;   09-29-2005)

 

 

UNCLASSIFIED (U)