<link href="../assets/css/ flyout_horizontal.css" 
rel="stylesheet" type="text/css" media="screen" /> 
3. 
In Code view, the link tags should look like this:
<link href="../assets/css/3_column.css" rel="stylesheet" 
type="text/css" media="screen" /> 
<link href="../assets/css/flyout_horizontal.css" rel="stylesheet" 
type="text/css" media="screen" /> 
Switch back to Design view 
Save the template (File > Save or Ctrl+S) and close it 
Create a new page from the template 
1. Choose File > New… 
2. Select the Templates tab, then select the template “3_column” 
3. Make sure the “Update page when template changes” option is checked 
4. Click Create 
5. Give the new page a title: “3-Column Layout” 
6. Save the page as “3_column.html” 
Preview the page in the browser 
1. Experiment viewing it as a static (fixed) layout and a liquid layout. 
For more examples of multi-column layout techniques, please refer to the list of resources at the 
end of this document. Many of these websites offer complete tutorials and links to other 
resources on related topics. 
C’est fini! 
Congratulations. If all went according to plan, you have now completed each of the 
lessons and built the sample website. You may want link to the final set of files to compare your 
work to the examples. 
Review the 3-column exercise 
1. View PowerPoint slides
2. Explain spacing between columns and around divs. Discuss CSS properties and content 
flow, including: float, margins, padding, nested divs, and the flow of content 
Creating a modern, standards-compliant website 
Page 31 of 40 
Last revised: 1/10/2007 6:25 PM 
This publication was developed with funding from the U.S. Department of Education, Office of Postsecondary Education  
(Grant # P333A050015). 
Pdf reader with bookmarks - add, remove, update PDF bookmarks in C#.net, ASP.NET, MVC, Ajax, WinForms, WPF
Empower Your C# Project with Rapid PDF Internal Navigation Via Bookmark and Outline
display bookmarks in pdf; delete bookmarks pdf
Pdf reader with bookmarks - VB.NET PDF bookmark library: add, remove, update PDF bookmarks in vb.net, ASP.NET, MVC, Ajax, WinForms, WPF
Empower Your VB.NET Project with Rapid PDF Internal Navigation Via Bookmark and Outline
create bookmarks in pdf reader; how to create bookmark in pdf with
Appendix 1: Cascading Style Sheets 
What are cascading style sheets? 
A cascading style sheet (CSS) is a set of rules that define the appearance of a single web page or 
an entire website. When you create a style sheet, you specify rules to control the appearance of 
elements on your page, such as table width, link colors, page margins, and fonts. Style sheets 
give you more control over the appearance of your page and allow changes to be applied 
consistently across your site. 
“Cascading style sheets [are an] elegant and efficient way to add and manage elements of style 
(fonts, color, layout) within Web documents”  
—Lie and Bos, Cascading Style Sheets: Designing for the Web 
CSS rules 
rule is a statement about one stylistic aspect of one or more HTML elements. A style sheet is a 
set of one or more rules that apply to an HTML document.  
Example:  The rule below sets the color of all first-level headings <h1> 
H1 { color: green } 
Breaking it down 
Anatomy of a rule 
A rule consists of two parts:  
Selector – the part to the left of the curly brackets   
Declaration – the part within the curly brackets  
The selector is the link between the HTML document and the style. It specifies what 
elements are affected by the declaration. 
The declaration is that part of the rule that describes what the effect will be. 
Anatomy of a declaration 
A declaration has two parts separated by a colon:  
Property – the part before the colon  
Value – the part after the colon 
The property is a quality or characteristic that something possesses. In the previous example, 
the property is color. Other examples might include line-height, text-align, and font-family.  
The value is a precise specification of the property. In the example, the value is “green,” but 
it could just as easily have been “blue,” “red,” “yellow,” or some other color. 
Creating a modern, standards-compliant website 
Page 32 of 40 
Last revised: 1/10/2007 6:25 PM 
This publication was developed with funding from the U.S. Department of Education, Office of Postsecondary Education  
(Grant # P333A050015). 
VB.NET PDF File Compress Library: Compress reduce PDF size in vb.
document file. Remove bookmarks, annotations, watermark, page labels and article threads from PDF while compressing. Also a preview
how to create bookmarks in pdf file; how to add a bookmark in pdf
C# PDF File Split Library: Split, seperate PDF into multiple files
Split PDF file by top level bookmarks. The following C# codes explain how to split a PDF file into multiple ones by PDF bookmarks or outlines.
add bookmarks to pdf online; how to bookmark a pdf in reader
The diagram below shows a rule with all of its ingredients. 
.  
Grouping selectors and rules 
Style sheets can be reduced in length by grouping selectors and declarations. For example, 
consider these three rules: 
H1 { font-weight: bold } 
H2 { font-weight: bold } 
H3 { font-weight: bold } 
All three elements—<h1> through <h3>—set the font weight to “bold.” Since all three 
declarations are identical, we can group the selectors into a comma-separated list, like so:  
H1, H2, H3 { font-style: strong } 
A selector may have more than one declaration. For example, we could write a style sheet with 
these two rules:  
H1 { color: green } 
H1 { text-align: center } 
In this case, we set all <h1> elements to display with a text color of green and to be centered on 
the page within their enclosing elements (such as <div> or <body>). However, we can achieve 
the same effect more easily by grouping the declarations under a single selector, like this:  
H1 { 
color: green; 
text-align: center; 
All declarations must be contained within the pair of curly brackets. A semicolon separates the 
declarations, and may also appear at the end of the last declaration (although it’s not required).  
Creating a modern, standards-compliant website 
Page 33 of 40 
Last revised: 1/10/2007 6:25 PM 
This publication was developed with funding from the U.S. Department of Education, Office of Postsecondary Education  
(Grant # P333A050015). 
VB.NET PDF File Split Library: Split, seperate PDF into multiple
Demo Code in VB.NET. The following VB.NET codes explain how to split a PDF file into multiple ones by PDF bookmarks or outlines.
convert word to pdf with bookmarks; excel pdf bookmarks
C# PDF File Compress Library: Compress reduce PDF size in C#.net
NET framework. Remove bookmarks, annotations, watermark, page labels and article threads from PDF while compressing. C# class demo
create pdf bookmark; create bookmark in pdf automatically
Categories of CSS selectors 
Type selectors 
Redefine the appearance of HTML elements (tags) 
Examples:
body { background-color: white; }
Class selectors 
Custom style rules that can be applied to any HTML element 
Example:
.graytext { color: #CCCCCC; }
ID selectors 
Similar to class selectors, but more specific. ID selectors apply to only a single element 
on the page. 
Example:
#footer { font-size: x-small; }
The Universal selector 
Applies to every element on the page (or at least those that possess the properties 
defined). The universal selector is the asterisk (*). 
Example:
* { font-family: Verdana; }
Pseudo-elements 
Pseudo-elements refer to sub-parts of elements, such as the first line of a paragraph. They 
can also refer to less tangible attributes, such as the space before and after an element. 
Example 1:
p:first-line { padding-left: 1.5em; } 
Example 2:
p.backtop:before { 
content: url(assets/images/up_arrow.gif) " "; 
}
which (with the appropriate graphic) produces the following effect: 
Pseudo-classes 
Like pseudo-elements, pseudo-classes refer to characteristics of elements, such as 
underline and hover attributes of links. These characteristics take their default appearance 
from the style rules built into the browser, but you can take control of them using the 
following pseudo-classes: 
a:link – the standard color of linked text 
a:visited – the color of linked text once the link has been visited 
a:hover – the color of text (and background) while the cursor is hovering over the link 
a:active – the color of text (and background) during the brief instant when the mouse is 
pressed down on the link 
Example1: 
a:link { color: blue; }
Example 2: 
a:hover { background-color: yellow; }
Creating a modern, standards-compliant website 
Page 34 of 40 
Last revised: 1/10/2007 6:25 PM 
This publication was developed with funding from the U.S. Department of Education, Office of Postsecondary Education  
(Grant # P333A050015). 
.NET PDF SDK | Read & Processing PDF files
Include extraction of text, hyperlinks, bookmarks and metadata; Advanced document and Pricing. RasterEdge provides royalty-free .NET Imaging PDF Reader SDK of
bookmark pdf documents; excel hyperlink to pdf bookmark
.NET PDF SDK - Description of All PDF Processing Control Feastures
Fully featured PDF Viewer in HTML5; Outstanding rendering of PDF documents; Full page navigation, zooming & rotation; Outlines, bookmarks, & thumbnail display;
how to bookmark a pdf file in acrobat; export excel to pdf with bookmarks
Editing style sheets 
Cascading style sheets are simply text files with a file extension of .css. Style sheets can be 
edited in simple text editors like Notepad (for Windows), or in full-featured CSS editors like 
TopStyle, Style Master, and others. For most purposes, the CSS editing tools built into 
Dreamweaver are more than adequate. 
The “cascade” 
Fundamental to understanding CSS is the principle that more than one style sheet can influence 
the presentation of a document. CSS rules can come from three sources: the author, the user, and 
the browser application itself. The “cascade” refers to the mixing and prioritizing of style rules 
from these sources to achieve a single “style sheet.” Using a formula involving something called 
“selector specificity,” the cascade determines which style will be applied to each element of the 
document. 
Three Locations for CSS 
Style rules can be found in three locations: 
In an external file 
External style sheets are collections of rules stored in separate, external CSS documents. 
Every page of a website can be linked to a single external style sheet. 
Inside the <head> element 
Style rules that appear in the <head> element of the document are often referred to as 
“embedded style sheets.” Embedded styles affect only the document in which they 
appear. When referring to the same selector, embedded rules supersede external rules. 
Inside the <body> element 
Rules that appear in the <body> element are called “inline styles.” Inline styles appear 
within individual tags of the document. Like embedded styles, inline styles apply only to 
the document in which they occur. They supersede both embedded and external rules. 
Conclusions 
So, are inline rules the way to go? They are more powerful, in the sense that they trump both 
embedded and external styles. But because inline styles are so specific—referring not only to a 
particular web page, but even to particular HTML elements—they are generally less useful!  
By contrast, external style sheets offer maximum efficiency by controlling the appearance of 
multiple pages in your site. We recommend external style sheets for most web designs. 
Creating a modern, standards-compliant website 
Page 35 of 40 
Last revised: 1/10/2007 6:25 PM 
This publication was developed with funding from the U.S. Department of Education, Office of Postsecondary Education  
(Grant # P333A050015). 
XDoc.Word for .NET, Advanced .NET Word Processing Features
& rotation; Outlines, bookmarks, & thumbnail display; Integrated annotation; More about Web Viewer ▶. Conversion. Word Create. Create Word from PDF; Create Word
copy bookmarks from one pdf to another; creating bookmarks pdf files
XDoc.PowerPoint for .NET, All Mature Features Introductions
& rotation; Outlines, bookmarks, & thumbnail display; Integrated annotation; More about Web Viewer ▶. PowerPoint Convert. Convert PowerPoint to PDF; Convert
bookmarks in pdf from word; creating bookmarks in pdf files
Tip for designing with style sheets
Designing with CSS may be simple in principle, but it can become complicated and frustrating 
when multiple rules begin to overlap and conflict. One helpful trick is to give each <div> or 
HTML element in question a unique background color during development. The color allows 
you to see the location and size of your design blocks, and helps clarify tricky margin and 
padding settings. This is especially handy when trying to troubleshoot the position of text, 
graphics, and form elements. 
The CSS box model 
“…Cascading Style Sheets describe the rendering of documents on various media. When textual 
documents (like HTML) are laid out on visual media (such as a computer screen or paper), CSS 
represents the elements of the document with rectangular boxes (usually invisible). These boxes 
are laid out one after the other, or nested inside each other, in an ordering that is called a flow… ” 
– From the W3C CSS specification (http://www.w3.org/TR/css3-box/) 
The box model applies 
equally to graphics, text, 
and form elements. For 
example, each paragraph 
element 
<p>
has padding, 
margin values, and 
potentially a border as 
well.  
If values are not 
explicitly defined in the 
style sheet, the browser 
looks to its own internal 
CSS rules for displaying 
page elements. 
Creating a modern, standards-compliant website 
Page 36 of 40 
Last revised: 1/10/2007 6:25 PM 
This publication was developed with funding from the U.S. Department of Education, Office of Postsecondary Education  
(Grant # P333A050015). 
CSS syntax 
Standard notation 
p { 
background-color: #CCCCCC; 
color: #0000FF; 
border-color: Red; 
border-style: solid; 
border-width: 1px; 
font-family: Verdana; 
font-size: medium; 
font-style: italic; 
font-variant: small-caps; 
font-weight: bold; 
line-height: 130%; 
margin-top: 12px; 
margin-right: 24px; 
margin-bottom: 12px; 
margin-left: 24px; 
padding-top: 0em; 
padding-right: 0em; 
padding-bottom: 0em; 
padding-left: 0em; 
Shorthand notation 
p { 
/* This is a “comment” — a note to yourself or others */ 
background: #ccc; /* not case-sensitive; some hex color values may be 
abbreviated to 3 characters */
color: blue; /* common colors have English names */ 
border: 1px solid red; /* 3 rules combined */ 
font: italic small-caps bold medium/130% Verdana; /* 6 rules combined */ 
margin: 12px 24px; /* top and bottom, left and right combined */
padding: 0; /* same value repeated for all 4 sides of the box */
Shorthand notation for box dimensions 
The four box dimensions are read in the following order: 
T
op, 
R
ight, 
B
ottom, 
L
eft.  
For example, the following expression:  
padding: 1em 0em 1.5em 2em; 
is simply a more succinct way of saying: 
padding-top: 1em; 
padding-right: 0em; 
padding-bottom: 1.5em; 
padding-left: 2em; 
Creating a modern, standards-compliant website 
Page 37 of 40 
Last revised: 1/10/2007 6:25 PM 
This publication was developed with funding from the U.S. Department of Education, Office of Postsecondary Education  
(Grant # P333A050015). 
Note the mnemonic acronym: TRBL. (Remember: Design with CSS and  stay out of TRouBLe!) 
Note: The sides of each CSS “box” come in pairs: top and bottom, right and left. Any missing 
value is assumed to duplicate the remaining value for that pair. Thus: 
If only 3 dimensions are listed, they are read in the following order: Top, Right/Left, Bottom. 
If only 2 dimensions appear, the order is Top/Bottom, Right/Left. 
Creating a modern, standards-compliant website 
Page 38 of 40 
Last revised: 1/10/2007 6:25 PM 
This publication was developed with funding from the U.S. Department of Education, Office of Postsecondary Education  
(Grant # P333A050015). 
Appendix 2: Resources 
CSU resources for web developers 
(all links valid as of January 1, 2007) 
CSU Web Accessibility Policy 
http://accessibility.colostate.edu/policy/webaccesspolicy.html
CSU Web Access Standards 
http://www.colostate.edu/Depts/ATRC/CSUstandards.htm
CSU Web Central (Resources for Web Developers/Administrators) 
http://webdev.colostate.edu/
XHTML and CSS references, tutorials, and tools 
Books 
Cascading Style Sheets: The Definitive Guide, 2nd Edition.  
Eric Meyer. O'Reilly Media, 2004. 
Cascading Style Sheets: Designing for the Web, 3
rd
Edition.  
Håkon Wium Lie and Bert Bos. Addison-Wesley, 2005. 
Web Links (by category) 
XHTML Specification 
http://www.w3.org/TR/xhtml1/
(complete descriptions of all elements, syntax, etc.) 
Cascading Style Sheets (CSS) 
http://academ.hvcc.edu/~kantopet/old/css/index.php
(CSS tutorial) 
http://www.w3.org/Style/LieBos2e/enter/
(tutorial and examples to accompany book) 
Liquid Layout/multiple columns 
http://www.maxdesign.com.au/presentation/liquid/index.htm
(“Liquid layouts the easy way”) 
http://www.maxdesign.com.au/presentation/liquid-layouts/
(presentation w/ useful links) 
http://www.maxdesign.com.au/presentation/liquid-layouts/liquid.htm
(example of resizing 
forms and images in liquid layout) 
Creating a modern, standards-compliant website 
Page 39 of 40 
Last revised: 1/10/2007 6:25 PM 
This publication was developed with funding from the U.S. Department of Education, Office of Postsecondary Education  
(Grant # P333A050015). 
Multi-Column layout 
http://www.fu2k.org/alex/css/
(multi-column recipes) 
http://www.fu2k.org/alex/css/layouts/3Col_OrderedAbsolute.mhtml
(multi-column tester) 
http://wellstyled.com/index.html
(CSS & Web design workshop) 
http://www.treetrybe.com/imm/tests/nn4_3cols_x.html
(3-column, Liquid, CSS-based 
layout) 
http://www.themaninblue.com/experiment/ResolutionLayout/
(A demonstration of a 
JavaScript-based horizontal-to-vertical layout conversion depending on viewport width) 
CSS menus 
http://meyerweb.com/eric/css/edge/menus/demo.html
(Eric Meyer, Pure CSS Menus) 
http://www.kalsey.com/tools/csstabs/
(Adam Kalsey, CSS tabs with submenus) 
http://css.maxdesign.com.au/listamatic/
(A list of menu recipes from various designers) 
http://www.alistapart.com/articles/horizdropdowns/
(Drop-down menus, horizontal style) 
http://www.alistapart.com/articles/dropdowns/
(Suckerfish Dropdowns: A List Apart) 
http://www.htmldog.com/articles/suckerfish/dropdowns/
(Son of Suckerfish Dropdowns) 
http://www.xs4all.nl/~peterned/csshover.html
(whatever:hover menu tutorial) 
http://www.xs4all.nl/~peterned/examples/cssmenu.html
(whatever:hover menu example) 
http://www.tanfa.co.uk/css/examples/menu/tutorial-v.asp#vstart
(CSS pop-out menu tutorial) 
http://www.positioniseverything.net/ordered-floats.html
(Source Ordered Columns) 
CSS Table formatting 
http://icant.co.uk/csstablegallery/
CSS Tutorials 
http://css.maxdesign.com.au/floatutorial/index.htm
(float tutorial) 
http://wellstyled.com/index.html
(table formatting) 
http://www.w3.org/Style/Examples/007/
(W3 CSS tips & tricks) 
http://www.westciv.com/style_master/house/tutorials/index.html
(tutorials and reference 
guide) 
CSS Zen Garden
(a demonstration of the flexibility of CSS) 
HTML validator 
http://validator.w3.org/
CSS Validator 
http://jigsaw.w3.org/css-validator/
Creating a modern, standards-compliant website 
Page 40 of 40 
Last revised: 1/10/2007 6:25 PM 
This publication was developed with funding from the U.S. Department of Education, Office of Postsecondary Education  
(Grant # P333A050015). 
Documents you may be interested
Documents you may be interested