Microsoft has created a set of five design templates you can use as is or modify to your needs. These templates illustrate high quality design principles combined with standards driven code. Each template is XHTML 1.1 Strict, Section 508/WCAG conforming and works across many browsers. This document describes how the template was built, the thought processes, tradeoffs, and workarounds necessary to build them. It also contains instructions on how to easily customize and change these templates for use in your site. You will find these HTML templates to be an excellent starting point when beginning to build out dynamic, data-driven Web sites with Microsoft Visual Studio and Microsoft Visual Web Developer. We hope they'll give both designers and developers deep insight into their creation process while providing you with a workable starting point. You can find all the information you need on MSDN at http://msdn.microsoft.com/asp.net/designer.
In the past, developers have used tables to build their page layouts. In many cases it's acceptable to build a layout with tables. However, there are compelling arguments (and laws) that recommend we use tables only when presenting tabular data and use DIV tags and CSS to create our layouts. Because of this there are two versions of each design template; one that uses DIV tags for layout and one that uses tables for layout.
Usability is the science of understanding how people use products and software. The information gained from usability studies is used to make the products or software easier to use, more efficient and more productive. Accessibility is a related area of study that focuses on the use of the products or software by people with disabilities.
In some cases accessibility and usability features are required by law. In all cases, good accessibility and usability features make your site easier to use and affect your company's goals. In addition, good accessibility and usability practices help to ensure your content will be accessible to future products that have yet to come to market. This section will not cover all areas of usability and accessibility but will help build an a attitude for best practices and an introduction to the most common usability and accessibility requirements.
Before analyzing a site's degree of usability and accessibility we must first look at the different types of browsers people use and the ways users interface with a Web site. Most often Web sites are viewed in a visual browser like Microsoft Internet Explorer running on a desktop PC with a mouse used to click different areas of the page. But there many other browsers and interfaces.
There are non-visual browsers (or technology that "sits on top" of a browser) used by people who are blind that read the contents of your Web page through computer generated voice. JAWS and Window Eyes are two popular non-visual browsers. These kinds of browsers or assistive technology rely on the keyboard alone and do not use a mouse to navigate the pages. There are many other types of input and output devices like braille readers and the Stephen Hawking Device. Many mobile phones now have browsers. Most browsers on phones do not use a mouse and have very small screens. Some mobile phones will render CSS, graphics and multimedia, others do not. There are new browsers and ways of interfacing with Web pages coming to the market every year.
Creating a Web site that is accessible to many different browsers and interfaces require attention to detail that may otherwise be overlooked. The usability and accessibility information below will help you build pages that are accessible to a wide range of audiences and browser types.
One of the most important usability features of a Web page is its title.
The page title in the head of your page is an important usability feature.
<head>
<title>Your unique and descriptive page title here</title>
</head>
<body>
Make your page titles descriptive and meaningful. Your page titles should describe the content of its particular page. Page titles should not simply state the same thing on multiple unrelated pages. There is no need to start titles with "Welcome.." or "Welcome to my site.." because this does not give detail and meaning to your content. Each page of your site should have a unique, descriptive page title. Well written, unique titles for every page in your site will help in the following ways:
People using non-visual browsers can not see your graphics (bit map files in the JPEG, GIF or PNG formats). However, non-visual browsers will read the alternative text and titles for each graphic. Creating alternative text for every graphic is fundamental to your site's usability and accessibility. Without well-written and informative alternative text visually impaired users have no way to understand the meaning of your graphics.
The alternative text will also display in visual browsers if the image doe not load. In addition, alternative text helps search engines index your site correctly. Including a title attribute on your graphics further help sighted and non-sighted users understand your graphics.
Alternative text for graphics are set with the ALT attribute inside the IMG tag
<img src="images/poster-photo-man-on-bridge.jpg" width="758" height="188" alt="Write a short description of the image here. It will show if the image is not loaded. Non visual browsers and search engines will also read this text." title="Users will see this text when they roll over this image. Non-visual browsers will read this text to people who are blind." />
Spacer graphics (1 pixel transparent graphics used in table layouts) are not used in this template. However, if you are forced to use spacer graphics it is the correct usability practice to set an empty ALT text string on them. This tells people using non-visual browsers that the graphic has no meaning. It is incorrect to omit the ALT tag completely since then people using non-visual browsers may wonder if the graphic has meaning or not. Below we correctly set an empty ALT tag on the "spacer" graphic.
<img src="images/spacer.gif" width="10" height="10" alt="" />
Titles are not necessary in the example above.
All the Microsoft Visual Studio Design Templates are made to fit within a 800 pixel wide by 600 pixel tall resolution monitor without the need to scroll horizontally (left - right). Do not force your visitors to scroll horizontally. Doing so will make your site unusable.
The exact width of this template is 760 pixels. We leave 40 pixels of extra room for the display of vertical scrollbars and a small amount of white space so that the horizontal (left - right) scroll bars will not appear on maximized browser windows.
Although vertical scrolling (up - down) is inevitable with any Web page, we can control what initially appears on screen without scrolling down on an 800 pixel by 600 pixel monitor. The content area shown on screen after the page loads but before scrolling down is called "above the fold". This term is taken from the newspaper industry. The most important articles and headlines on a newspaper are shown "above the fold" of newspaper. Web sites too should keep the most important information above the fold. Often times people will not scroll down once a page loads. Therefore, it is important to keep all major navigational menus, main advertisements and other important links and content "above the fold".
There are several ways to specify text sizes with CSS. For this discussion we'll look at two, (1) relative and (2) constant. Text is set to a relative size with the EM or % attribute. Text set to relative sizes can be enlarged or shrunk in most browsers. Text is set to a constant size with the PX or PT attribute. Text set to a constant size are "locked" and can not be resized in most browsers. Although, more modern browsers allow users to change the font size regardless of what attribute is used, its an accessibility best practice to set font sizes using relative attributes (EM or %).
Why should we allow users to change font sizes? It's helpful for people with visually disabilities, since they can make the fonts larger and easier to read.
TIP: You can change the font size of text in Internet Explorer by clicking the "View" menu then "Text size". If your mouse has a scroll wheel you can also hold down the "Control" key while scrolling the scroll wheel on your mouse. Other applications have specific keystroke shortcuts that will change the font size.
Font size example:
The size of this text is set with a relative attribute and can be resized by users. The CSS rule used to set this size is below.
.relative-font-size {
font-size: 120%;
}
The size of this text is set with a constant attribute and can't be resized by users. The CSS rule used to set this size is below.
.constant-font-size {
font-size:18px;
}
The FIELDSET tag groups form elements. The LEGEND tag ads a title to the FIELDSET group. The FIELDSET and LEGEND tags clarify their purpose of your form. People using visual and non-visual browsers benefit when you use the FIELDSET and LEGEND tags on all your forms. The FIELDSET tag itself can be styled with CSS the same way any block level element can be styled. As shown in this template you can nest FIELDSETs into sub groups when it will help clarify the purpose of the form and its elements.
FIELDSETs group form elements and LEGENDs add a title to the groups.
Below is the simplified source mark-up for this example.
<form>
<fieldset>
<legend>Join our mailing list</legend>
<label for="email">your email</label><br />
<input name="email" type="text" />
<label for="postalcode">postal code</label><br />
<input name="postalcode" type="text" />
<input type="button" value="join" />
</fieldset>
</form>
The LABEL tag is used to explicitly label an INPUT element. In this template we have a FORM titled "Join our mailing list". In the FORM we have an INPUT field for the user's name. We tie the LABEL tag "your name" to this particular INPUT field by wrapping "your name" in a LABEL tag and then assigning a unique ID to the INPUT tag and LABEL tag.
The LABEL tag is associated to text fields with an ID.
<label for="name">your name</label>
<input id="name" type="text" value="enter your name" />
The LABEL tag can also be associated to radio buttons or checkboxes:
<label for="radioformat1">
<input id="radioformat1" type="radio" />
<label for="check1">
<input id="check1" type="checkbox" />
By explicitly attaching a LABEL tag to the INPUT field we clarify what information is being requested from the user. Non-visual browsers read the LABEL tag for the associated INPUT field regardless if the two tags are adjacent to each other in the source code.
The OPTGROUP tag is used to group related options in a SELECT list (drop down menu). Its not often we need to use the OPTGROUP tag. However, if you have a large list in a drop down menu OPTGROUP can greatly improve the clarity and usability of your SELECT lists.
OPTGROUP tags can greatly improve the clarity and usability of large SELECT lists.
<select id="favmag1" name="favmag1" >
<option value="0" selected="selected">- - Select your favorite magazine - -</option>
<optgroup label="Computer">
<option value="1">MSDN</option>
<option value="2">CODE</option>
<option value="3">BYTE</option>
</optgroup>
<optgroup label="Lifestyle">
<option value="5">GQ</option>
<option value="6">Home and Garden</option>
<option value="7">US</option>
</optgroup>
<optgroup label="News">
<option value="8">Time</option>
<option value="9">The Week</option>
<option value="9">People</option>
</optgroup>
</select>
The code above produces this drop down list.
It may be tempting to use JPEG, GIF or PNG graphics to label FORMs and their elements. However, in most every case, doing so will reduce the usability and accessibility of your forms.
As explained earlier TABLE tags are used in this layout only when presenting tabular data.
Every TABLE tag should have an accompanying SUMMARY attribute and text that explains the contents and structure of the TABLE for people using non-visual browsers. Users without visual impairment can very quickly scan the contents of a table to get an idea of its meaning and structure. Visually impaired people using non-visual browsers must wait for their non-visual browser to read the Web site contents linearly from start to finish. Well-written TABLE SUMMARY attributes allow people using non-visual browsers to quickly understand the TABLE contents and structure.
TABLE SUMMARY attributes explain the TABLE contents and structure to non-visual browsers.
<table class="table" rules="cols" border="0" cellpadding="0" cellspacing="0" summary="A list of widgets. Each widget is listed by name, price, features and in stock availability.">
The CAPTOIN attribute for a table will be shown in visual browsers and serves as a title for your TABLE. This caption should be descriptive and clarify the purpose and content of you TABLE.
The CAPTION attributes is the first tag inside the table and serves a title for the table. Both visual and non-visual browsers will see this CAPTION.
<table class="table" rules="cols" border="1" cellpadding="0" cellspacing="0" summary="A list of widgets. Each widget is listed by name, price, features and in stock availability.">
<caption>
Widgets currently on sale.
</caption>
<tr>
<td>
etc...
We shouldn't assume people know the meaning of the acronyms and abbreviations in our content. The ACRONYM and ABBR tags are used to help with this problem. We should wrap all acronyms and abbreviations in the ACRONYM and ABBR tags and to include title attributes in these tags.
You can style these tags so that people using visual browsers will know they are "hot" and look similar to a link. When users hover the mouse over the text wrapped with these tags the cursor changes to a question mark and tool tip text appears with the title you have provided.
Non-visual browsers will read the ACRONYM and ABBR tag title attributes to users instead of trying to read the acronym or abbreviation as a word. For example. If "IRS" is not wrapped in an abbreviation tag and given a title a non-visual browser may read it as a word "urse", as in "purse". When the abbreviation tag and associated title is used a non-visual browser will read "IRS" as: "Internal Revenue Service".
Note that the ABBR tag is only supported in some browsers currently but we should plan on its support in new versions.
The Web site.
The <abbr title="Internal Revenue Service" lang="en">IRS</abbr> Web site.
Breadcrumbs are a list of sequential links that take the user from the current page, back to its parent section(s) and finally to the home page. Breadcrumbs offer a quick and easy way for users to navigate your site and know where they are. It is a good practice to conclude your list of breadcrumbs with a non-linked title of your current page.
Breadcrumbs help to make your site usable.
Home / Breadcrumb link / Breadcrumb link / Page title
Non-visual browsers will read the contents of a page linearly from the top down. Many times the first elements to appear in a page are sets of navigation links. It's useful for people using non-visual browsers to be able to skip links that appear on every page versus waiting for their browser to read through them.
To allow users to skip past these repetitive links we add an anchor link above the repetitive content which then links to another named anchor further down the page.
It's a good accessibility practice to add an anchor link before navigation items that repeat on every page which then links to another named anchor further down the page (where the main, unique content for the page content begins). We add the link above the repetitive content like this.
<div class="none"><a href="#maincontent">skip to the main content area of this page</a></div>
<div id="mainmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Login</a></li>
<li><a href="#">Join</a></li>
</ul>
</div>
Then create a named anchor just before the main, unique content on the page like this:
<a name="maincontent" id="maincontent"></a>
<p>The main body of the page content starts here</p>
Notice in the example above "skip to the main content area of this page" link is wrapped in a DIV with class equals "none". The "none" class below tells visual browsers not to display this DIV. Since non-visual browsers will ignore the CSS styles they will see it.
.none {
display:none;
}
In 1998, Congress amended the Rehabilitation Act to require Federal agencies to make their electronic and information technology accessible to people with disabilities. Inaccessible technology interferes with an individual's ability to obtain and use information quickly and easily. Section 508 was enacted to eliminate barriers in information technology, to make available new opportunities for people with disabilities, and to encourage development of technologies that will help achieve these goals. The law applies to all Federal agencies when they develop, procure, maintain, or use electronic and information technology. Under Section 508 (29 U.S.C. ‘ 794d), agencies must give disabled employees and members of the public access to information that is comparable to the access available to others. It is recommended that you review the laws and regulations listed [on our Web site] to further your understanding about Section 508 and how you can support implementation.
All the requirements for Section 508 conformance can be found on the Official Web site for Section 508 of the US Rehabilitation Act. However, it us useful to reference Section 508 conformance checklists that have been created for Web developers specifically.
The information needed to provide a thorough checklist for Section 508 is beyond the scope of this document. But, there are many reliable resources on the Web that provide checklists. Here are a few:
All the Microsoft Visual Studio Design Templates conform with Section 508 guidelines. However, the design templates are only a single page and do not contain scripts and other functionality that need to be tested against the Section 508 guidelines.
This documentation lists many of the fundamental Section 508 guidelines needed for the single page design templates to conform. But after modifying the template to meet your needs, adding scripts, new code multimedia and new content to the template you'll need to further research how your added code can conform.
The WCAG, written by the World Wide Web Consortium (W3C) maintains a set of accessibility guidelines for Web content. The WCAG requirements differ from the Section 508 guidelines (above) in that WCAG requirements are written specifically for web authors. Section 508 requirements looks at all possible forms of electronic and information technology, not just the web. WCAG guidelines will help make your web site easy to use.
Most search engines today base their search results on text that is "read" by robots or programs that scan your site's content. Sometimes these robots are called "bots" or spiders. Each search engine has their own robots that scour the internet for content. In many ways these bots respond to the content on your page the same way that non-visual browsers do. In other words, they respond mainly to well-formed, well written text that is presented logically. For example, above we looked at the CAPTION attribute for tables. The CAPTION is added to your TABLE for accessibility reasons but this CAPTION probably has important keywords in it that a search engine robot will pick up. In this way, the CAPTION may help people find your TABLE data. All search engine robots place a lot of importance on your page titles. Well written, informative page titles that do not contain unnecessary information will help your page's accessibility, but they also can help your search engine results.
Here's another example. Keywords that appear in the top part of your page can get a higher degree of importance from search engine robots. We've talked about keeping important information "above the fold" for accessibility reasons. But also, keeping important information and important keywords "above the fold" can help your page's rank in search engine results.
Let's look at another example before we move on. Not all content can be communicated with text. We often use images to communicate ideas, charts, graphs, product images, logos, etc.. Although search engine robots can not determine the content of graphic images, they will read and rank the ALT attribute for an image. Again, the ALT attribute is not only a fundamental accessibility feature, it can help your content get placed appropriately in search engine results.
There are several free accessibility validators on the Web that you can send your pages through. These validators will generate a report that displays your pages's degree of accessibility. These tools are very useful, but can never be 100% accurate. They will expose many of the most common usability problems with your site, but it will also be up to you to fully understand the concepts of the Section 508 guidelines, accessibility and usability best practices in order to make your site compliant.
XHTML is a combination of HTML and XML. There are three DOCTYPEs that can be used with XHTML files, (1) strict, (2) transitional and (3) frameset. The DOCTYPE tells the browser to render the page in a particular way. The XHTML strict DOCTYPE is less forgiving than the transitional DOCTYPE.
Although XHTML strict can use most HTML 4.0 tags and syntax, some of the HTML 4.0 tags and nesting of tags that are valid in HTML 4.0 are not valid in XHTML.
Valid XHTML strict code also separates the content from the layout and style. That is, with XHTML strict it is not valid to include style information (font size, color, width, heights, positions, etc.) inside the source mark-up. Instead, all styles must be linked to a separate CSS file. The W3C owns The official XHTML specification.
The Microsoft Visual Web Developer Design Templates use the strict DOCTYPE. This DOCTYPE is added to the top of the page code.
The DOCTYPE is the first thing shown in your code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
XHTML strict pages are accessible to a broader range of viewing devices currently in the marketplace. Code used in XHTML strict pages have a longer life of relevance with products that have yet to come to market. XHTML will eventually replace HTML 4.0 as the standard. Lastly, pages that use the XHTML strict DOCTYPE require your code to be more accurate, more efficient and clean (no missing end tags).
A favicon is a 16 by 16 pixel graphic that most modern browsers will show as the icon for your site. This icon appears in the address field, bookmark list and links bar of most browsers.
Each Microsoft Visual Web Developer Design Template comes with a file called favicon.ico that can be found in the images folder for each template. These icons match the default look of the template. In order to display this icon in the browser you link to it in the HEAD of your XHTML file.
To display the favorite icon link it in the HEAD of your XHTML.
<head>
<title>div - rounded</title>
<link rel="shortcut icon" href="images/favicon.ico" />
</head>
There are several resources on the Web that can help you make your own favicon.ico files.
With HTML you were able to style your content inline with the source mark-up. As mentioned earlier, the XHTML strict doctype does not allow style information inside your XHTML. Instead, all styles must be linked to a separate CSS file. Separating the styles from the content has these advantages:
See creating the layout with DIVs.
Your heading tags (H1, H2, H3, H4, H5 and H6) should build a logical outline of your content. Building an outline of your content with heading tags will help improve the clarity of your content for all users. People using non-visual browsers can instruct their browser to only read the heading tags on your page. This allows all users to quickly understand your page contents.
Remember, non-visual browsers read all the text to users through computer voice synthesis. If there are no headings or incorrectly used heading tags these users are forced to listen to all the text read linearly from top down. In other words, heading tags help non-visual browsers scan a page.
Do not use heading tags to make a FONT bold or larger. Use CSS to style text.
You can easily change the default style (FONT-SIZE, FONT-WEIGHT, COLOR, etc.) of all heading tags through CSS.
Use heading tags to build a logical outline of your content.
<h1>site name</h1>
<h2>page title</h2>
<h3>section title</h3>
<p>Summary paragraph of the section goes here.</p>
<h4>sub section heading one </h4>
<p>Sub section one paragraph text goes here.</p>
<h4>sub section heading two</h4>
<p>Sub section two paragraph text goes here.</p>
<h4>sub section heading three </h4>
<p>Sub section three paragraph text goes here.</p>
<h3>section title</h3>
<p>Summary paragraph of the section goes here.</p>
<h3>section title</h3>
<p>Summary paragraph of the section goes here.</p>
As explained earlier tables are used in this layout only when presenting tabular data.
The THEAD, TFOOT and TBODY tags group the sections in your TABLEs. The THEAD should come first in your source, then the TFOOT then the TBODY. The footer comes before the body in the source so the browser can render it before the contents of the entire table body are downloaded. In addition, if the contents of a TABLE span multiple pages when printing the THEAD and TFOOT will be printed on each page.
The table header, table footer and table body tags group sections of your TABLE.
<table>
<thead>
<tr>
<th>Table Header</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Table Footer</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Table Body</td>
</tr>
</tbody>
</table>
See styling COLGROUP tags with CSS.
The Microsoft Visual Web Developer Design Templates are designed to work in the following browsers. Modifications and added code to the templates will require additional testing on your targeted browsers. Each browser's support for CSS and XHTML strict vary. It is a good idea to have a clear list of the browsers you intend to support before your projects begin.
CSS is a style sheet programming language that allows you to attach style (color, fonts and layout) to structural documents (HTML, XHTML). Authoring, viewing and maintaining Web sites is simplified by separating the style from the content.
Cascading style sheets are powerful and can be quite in-depth. This documentation will touch on the basic principles of CSS. The Official CSS 1 Specification contains much more detailed information and is a valuable resource.
See Keeping styles out of the HTML mark-up.
A CSS rule is made up of selectors, properties and values. Selectors tell the browser which items on your page to style. Properties identify the type of style you want to apply. Values set the style.
In the example below "H1" is the selector, "COLOR" is the property and "black" is the value.
A CSS rule is made up of selectors, properties and values.
h1 {
color: black;
}
The example below is the same as the example above since "#000000" is the hex color value for black.
h1 {
color: #000000;
}
A selector can be a class, an ID, an HTML tag or a combination of many of these.
Classes can appear several times within a single XHTML (or HTML) document. There can only be one instance of an ID in each page.
You can apply CSS styles to HTML tags. For example, in XHTML strict pages it is not valid to add MARGINTOP="0" in the BODY tag. So, instead, apply this margin style in your CSS document with "BODY" as a selector.
You can use an HTML tag as a selector. In this case "BODY" is the CSS selector.
body {
margin-top: 0px;
}
If you wanted to make the entire page use a gray, sans-serif font you can use the BODY tag as the selector and then apply styles to it. Notice that each property and value set must be separated by a semi-colon (;).
body {
color:#999999;
font-family:sans-serif;
}
If you're styling an element that only appears once in your source mark-up you can apply an ID to your element then style the ID in your CSS file. For example, if you have only one main menu DIV in your source mark-up then you can apply an ID to this DIV then style the ID in your CSS file.
IDs only can only appear once in your source mark-up. In the mark-up you identify the element by assigning it an ID.
<div id="mainmenu">Home Products Services</div>
Then, you can style this ID in your CSS file by using the ID name as the selector in your CSS file. You signify that a selector is an ID with the pound sign (#). There can be no spaces between the pound sign and the selector name.
#mainmenu {
position:absolute;
top:10px;
left:10px;
color:#FF0000;
font-weight:bold;
}
The example above absolute positions the main menu DIV ten pixels from the top of the browser and ten pixels to the left.
If you're styling an element that appears more than once in your source mark-up apply a class to it. For example, if you have many separate strings of text that need to be small you can assign a class to each occurrence of this small text in your mark-up then style the class in your CSS file.
Classes can appear many times in your source mark-up. In the mark-up you identify the element by assigning it a class.
<p class="small-text">This text will be small</p>
<p>Some more text here</p>
<p class="small-text">And more small text here</p>
Then, you can style this class in your CSS file by using the class name as the selector in your CSS file. You signify that a selector is class with a period (.). There can be no spaces between the period and the selector name.
.small-text {
font-size:.7em;
}
Class and ID names can contain only alphanumeric characters and the hyphen (-).
Do not name your classes or IDs by the style or layout they produce. For example, do not name a class or ID "redtext" since you may easily change the style of this element to use blue text down the road. The name will then have little meaning and will be confusing. You could instead name this element "productname" or "requiredtext" or "importanttext".
Browsers display visited and non-visited links differently to users so they can see what links they have visited and what links they have not. There are two special CSS classes, called pseudo classes, that allow you to control how visited and non-visited links are styled.
":LINK" is a pseudo class that controls the appearance of non-visited links. ":VISITED" is a pseudo class that controls the appearance of visited links.
Including the following two rules in your CSS file will make all non-visited links red and all visited links orange.
":LINK" is a pseudo class that controls the appearance of non-visited links.
a:link {
color: red;
}
":VISITED" is a pseudo class that controls the appearance of visited links.
a:visited {
color: orange;
}
There are two more dynamic pseudo classes that control the appearance of items that are hovered (by a pointing device, typically a mouse pointer) and activated.
":HOVER" is a pseudo class that controls the appearance of hovered links. ":ACTIVE" is a pseudo class that controls the appearance of activated links.
To have complete control over the appearance of your links use all four pseudo-classes in your CSS document.
To work properly the following four rules must be written in this order (LINK, VISITED, HOVER and ACTIVE).
a:link {
color:blue;
text-decoration:underline;
}
a:visited {
color:purple;
}
a:hover {
color:red;
text-decoration:none;
}
a:active {
color:green;
}
You can set the top, right, bottom and left PADDING or MARGIN as separate CSS attributes or you can use CSS shorthand to set them all within one attribute. CSS shorthand uses less lines of code thus it loads faster and is faster to write and edit.
This CSS rule ...
.your-class-name {
padding-top:10px;
padding-right:0px;
padding-bottom:5px;
padding-left:22px;
}
... produces the same results as this CSS rule:
.your-class-name {
padding:10px 0px 5px 22px;
}
As mentioned in the accessibility section its important to use headings to build an outline of your page content. It's wrong to use headings solely to change the font size or weight of text.
You'll probably want to change the default appearance of your headings after you build your outline. To do this, simply use the heading tags as selectors in your CSS file and make them the size and style you prefer.
To style your heading tags use the H1, H2, H3, H4, H5 and H6 tags as selectors then apply styles to them.
h1, h2, h3, h4, h5, h6 {
color:red;
font-variant: small-caps;
}
Ordered and unordered lists (the OL tag and the UL tag respectively) are appropriately used to make navigational menus. Create the menu as a list in the source mark-up then style the list layout and appearance with CSS. CSS can turn lists into a horizontal menu (top menu) or vertical menu (side menu). With CSS we can add padding, margin, background color, etc. to your menu items with great control. Here are some benefits of making navigational menus from lists rather than tables or other means.
It is clean and efficient to make navigation menus from ordered and unordered lists. Here is a simple navigation list without styles.
<div id="mainmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Login</a></li>
<li><a href="#">Join</a></li>
</ul>
</div>
The source markup above produces this list.
We take this same source mark-up and make horizontal navigation menu with it using CSS.
<div id="mainmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Login</a></li>
<li><a href="#">Join</a></li>
</ul>
</div>
By adding these three CSS rules to our CSS file we turn the list above into a horizontal navigation menu.
#mainmenu ul {
margin:0px;
padding:0px;
}
#mainmenu ul li{
list-style:none;
display:inline;
text-transform:uppercase;
font-size:.8em;
margin:0px;
padding:1px 10px;
background: #CCCCCC;
}
#mainmenu ul a:link {
text-decoration:none;
}
The three CSS rules above produce this navigation menu. The source mark-up for both examples are exactly the same.
Or by using these three CSS rules we turn the list above into a vertical navigation menu.
#mainmenu-vertical ul {
margin:0px;
padding:0px;
}
#mainmenu-vertical ul li{
list-style:none;
display:inline;
text-transform:uppercase;
font-size:.8em;
margin:0px;
padding:1px 10px;
background: #CCCCCC;
}
#mainmenu-vertical ul a:link {
text-decoration:none;
}
You'll notice that each of the three CSS rules above start with the "#mainmenu" or "#mainmenu-vertical" DIV ID. If this DIV ID was not used in the selector every UL tag on all of your pages would be styled the same way as the main menu. Therefore, it's important to target the specific lists you want to style by first targeting its containing element. In this case the container was the "#mainmenu" or "#mainmenu-vertical" DIV.
In this template you'll find three different types of list styles.
See Font families.
DIV is short for division or section. The DIV tag is a generic or empty block level element that defines a section of the document. A DIV starts with the opening DIV tag, <DIV> and ends with the closing DIV tag </DIV>.
Visual browsers add a line break before and after all block level elements. As apposed to a SPAN tag (also an empty container tag) except that line breaks are not added before and after a SPAN tag. Some other block level HTML tags include the P tag, the heading tags H1, H2, H3, H4, H5 and H6, the BODY tag and others.
DIV tags are often viewed as rectangle blocks that hold a section of content. By applying CSS classes or a unique ID to DIV tags we can control the visual appearance of the DIV itself and the content contained in the DIV.
DIV tags can be styled with CSS. We can also target the content inside the DIV to be styled. Here is a DIV with a white background and red text inside.
Here is the CSS that creates this look.
.your-class-name{
background:#FFFFFF;
color:red;
}
Here is the source mark-up.
<div class="your-class-name">This red text is inside a white div</div>
The DIV below also has a width set to it and only the heading two tag is red.
This heading tag is red
This text is the default colorThe two CSS rules below create this look.
.your-class-name{
background:#FFFFFF;
width:200px;
}
.your-class-name h2{
color:red;
}
Here is the source mark-up.
<div class="your-class-name">
<h2>This heading tag is red</h2>
This text is the default color
</div>
The DIV below has a width set to it, it has a border and it has another DIV inside it.
This heading tag is red
This text is the default color.The three CSS rules below create this look.
.your-class-name{
background:#FFFFFF;
width:200px;
}
.your-class-name h2{
color:red;
}
.another-class-name {
text-align:center;
background:green;
color:white;
}
Here is the source mark-up.
<div class="your-class-name">
<h2>This heading tag is red</h2>
This text is the default color.
<div class="another-class-name">This text is white and centered with a green background</div>
</div>
The margin is the blank space outside the DIV (or any block level element it's applied to).
The padding is the blank space inside a DIV.
The complete physical size of a DIV is its width plus margin plus padding.
Here is CSS rule for the DIV above:
.your-class-name {
width:250px;
background:white;
}
Here is CSS rule for the DIV above:
.your-class-name {
width:250px;
background:white;
margin-left:100px;
}
Here is CSS rule for the DIV above:
.your-class-name {
width:250px;
background:white;
margin-left:100px;
padding:30px;
}
Here is CSS rule for the DIV above:
.your-class-name {
width:250px;
background:white;
margin-left:100px;
padding:30px
border:1px dashed #000000;
}
The CSS attribute FLOAT makes a DIV (or other block level elements such as an IMG) align to the right or left of its containing element. FLOAT is a necessary and fundamental attribute in many types of layouts.
Always set a width on a DIV that is floated. If no width is set the results are unpredictable.
This DIV is set to float right. It uses this CSS rule:
.your-class-name {
width:45%;
background:white;
float:right;
}
Due to the nature of "floated" DIVs it is often necessary to put them within a container DIV.
The example below uses three DIVs. There is a dark gray container DIV and two other DIVs that float left and right.
This is the container DIV. It uses this CSS rule:
.your-class-name-container {
background-color:#999999;
padding:10px;
}
This DIV is set to float left. It uses this CSS rule:
.your-class-name1 {
width:45%;
background:white;
float:left;
}
This DIV is set to float right. It uses this CSS rule:
.your-class-name2 {
width:45%;
background:white;
float:right;
}
Although the gray container DIV completely surrounds the two white floated DIVs in the source mark-up the DIV does not expand down along with the white DIVs because they are both floated.
The example above uses this simplified source mark-up.
<div class="your-class-name-container">
<div class="your-class-name1"></div>
<div class="your-class-name2"></div>
</div>
In the previous example the gray container DIV does not expand down along with the white floated DIVs. By adding a fourth DIV set to CSS "clear:both" and putting this DIV as the last DIV inside the container we can force the container DIV to expand down with the white floated DIVs.
This is the container DIV. It uses this CSS rule:
.your-class-name-container {
background-color:#999999;
padding:10px;
}
This DIV is set to float left. It uses this CSS rule:
.your-class-name1 {
width:45%;
background:white;
float:right;
}
This DIV is set to float right. It uses this CSS rule:
.your-class-name2 {
width:45%;
background:white;
float:right;
}
The example above uses this abstracted source mark-up:
<div class="your-class-name-container">
<div class="your-class-name1"></div>
<div class="your-class-name2"></div>
<div style="clear:both"></div>
</div>
The CSS CLEAR attribute controls weather or not a nearby element will appear on the same line as a float or after a float. See The Official CSS Specification for the CLEAR Property.
For the purposes of this documentation we look at the basic examples of floating DIVs left and right and "clearing" a container DIV. There are many more complexities in the way different browsers render floated elements. However, each of the five Microsoft Visual Web Developer Templates provides several unique examples and strategies for different layout types, from two or three column layouts to fixed width and variable width layouts.
Each of the 5 Microsoft Visual Studio design templates uses a different layout type, different CSS and different mark-up strategy. The list below is a quick reference for these layouts types.
The Rounded template
- 2 column layout
- Both columns are fixed width
The Simple template
- 3 column layout
- The side columns are fixed width. The middle column is "stretchy"
The Grid template
- 3 column layout is used in the header section
- 2 column layout is used for the body section
- All the columns are "stretchy"
The Fun template
- 2 column layout
- Both columns are stretchy
- This layout uses absolute positioning
The Basic template
- 2 column layout
- Both columns are fixed width
The header area of this layout uses a two column layout and some tricky use of background images.
The header area of this template is created with three DIVs and some clever use of background images. Here is the simplified mark-up for the header area.
<div id="header-container">
<div id="header-left">site name goes here</div>
<div id="header-right">slogan goes here</h2></div>
</div>
Then using CSS we tell these DIVs what color to be, how wide to be, what background images to use, etc.
Notice that the background is set for the entire header area in the first DIV. The second DIV sets the top left rounded graphic. Lastly, the 5 pixel white line on the right side is a right border on the final DIV.
#header-container {
background: #828AD0 url(images/bg-main.jpg) repeat-x;
height:68px;
}
#header-left {
float:left;
width:280px;
color:#FFFFFF;
height:30px;
padding:38px 10px 0px 10px;
background: url(images/bg-curve-top-left.gif) no-repeat;
}
#header-right {
margin:0px 175px 0px 280px;
color:#FFFFFF;
padding:10px 0px 0px 0px;
height:58px;
border-right:5px solid #FFFFFF;
}
The poster photo for this template is wrapped inside a P tag. We do this since an IMG tag is not allowed inside the BODY tag when using the XHTML Strict DOCTYPE.
We wrap the poster photo in a P tag (to make it valid XHTML) then set the MARGIN and PADDING we want with the CSS below.
#posterphoto {
margin:4px 0px 0px 0px;
padding:0px;
}
We also set the DISPLAY of the image to BLOCK otherwise some browsers will place the image inline and thus create extra blank space at the bottom of the image.
#posterphoto img {
border:1px solid #A7A7A7;
display:block;
}
The main body of this template uses a two column layout.
This template's layout is created with three DIVs. A container DIV, the side DIV and the content DIV.
<div id="content-container">
<div id="content-side"> side content goes here</div>
<div id="content"> main content here goes here</div>
</div>
Then using CSS we tell these DIVs where to live, what color to be, how wide to be, etc.
We want the side column on the layout to show a blue background running completely to the bottom of the page regardless if the content in the side column stretches down the page or not. To achieve this we set a background image to the side column AND the content column.
When we attach the background image to the content column we set the background to repeat vertically (y) and we align it to the right of the DIV (see background images). If we did not set this background image the side column blue would extend only as far as the side column is filled with content.
#content-container {
background: url(images/bg-main.jpg) repeat-y right;
}
We want the side column to appear on the right side of our page so we "float" it right, then we set its width and a few other attributes including a background image.
#content-side {
float:right;
width:155px;
color:#FFFFFF;
padding:10px;
margin:0px 0px 4px 0px;
background: #828AD0 url(images/bg-main.jpg);
}
There are two particular properties in this next rule that make our layout work correctly. First, the margin-right of the content DIV is set to 180 pixels. If this margin were not set the content would overlap with the side column. Second, the breadcrumbs background image is set to repeat horizontally (x) on this content DIV. Note that the background will not show up in this DIV's margin since no content or color appears from an element appears in its own margin.
#content {
padding:0px 10px 10px 10px;
margin:0px 180px 0px 0px;
border:1px solid #A7A7A7;
background: url(images/bg-breadcrumb.jpg) repeat-x;
}
See CSS shorthand to learn how to set top, right, bottom and left MARGIN or PADDING in a single attribute. Using shorthand reduces the lines of code in your CSS.
Inside the main content area there is a three column section. This section uses 4 DIVs and some tricky and CSS.
The three column section within the main content area is built with 4 DIVs and some tricky and CSS. Notice that the third column appears before the third column in the mark up below.
<div id="three-column-container">
<div id="three-column-left">first column content</div>
<div id="three-column-right">third column content</div>
<div id="three-column-middle">second column content</div>
<div class="clear"></div>
</div>
Then using CSS we tell the these four DIVs where to live, how wide and tall to be, etc.
First we set the width and margin on the container. The top and bottom MARGIN is set to 10 pixels. The left and right margin is set to 0.
#three-column-container {
width:100%;
margin:10px 0px;
padding:10px 0px;
}
We then "float" the left column and set it's width to 30%. "Floated" elements should always be accompanied by a width. See floating divs for more information.
#three-column-left {
float:left;
width:30%
}
Next we "float" the left column and set it's width to 30%.
#three-column-right {
float:right;
width:30%
}
Lastly, we make room for the floated DIVs on both sides by setting the left and right margin on the middle DIV. If we didn't add this margin to the middle DIV then it would overlap with the "floats".
#three-column-middle {
width:30%;
margin:0px 32% 0px 35%
}
The footer area of this template is created in the same way as the header area.
CSS allows you to set the background image (JPEG, GIF or PNG files) on most HTML tags. It is common to use background images on DIV tags, list items, the BODY tag and other elements to archive a certain visual layout.
This template uses six CSS background images. Below is a simplified version of the CSS code that applies the background to each element.
#header-container {
background: #828AD0 url(images/bg-main-blue.jpg) repeat-x;
}
#header-left {
background: url(images/bg-curve-top-left.gif) no-repeat;
}
#content-container {
background: url(images/bg-main.jpg) repeat-y right;
}
#content {
background: url(images/bg-breadcrumb.jpg) repeat-x;
}
#footer-container {
background: #828AD0 url(images/bg-main.jpg);
}
#footer-right {
background: url(images/bg-curve-bottom-right.gif) no-repeat right bottom;
}
Note that there is also a hex color value listed in the background value. It's a good idea to include a hex color that approximates the color of the background image. In case the image does not load you will still be certain that your general color palette is maintained and the text in this area will still be readable. If a hex color value is not set and the background graphic does not load or is not yet downloaded you may end up with white text and a white background that is unreadable.
In the example above the repeat-x value is also given. This value indicates the background graphic should repeat horizontally.
Using the repeat-y value indicates the background graphic should repeat vertically.
Using the repeat-none value indicates the background graphic should not repeat.
Not specifying a repeat value will cause the background image to repeat both horizontally and vertically.
If you do not want the graphic to repeat horizontally you may want to align the background graphic to the right, left, center or position the background graphic by a left offset amount.
This background graphic will align itself to the left of its container and not repeat.
#your-element {
background: #828AD0 url(images/your-graphic.jpg) no-repeat left;
}
This background graphic will align itself to the center of its container and will repeat vertically (y).
#your-element {
background: #828AD0 url(images/your-graphic.jpg) repeat-y center;
}
This background graphic will align itself to the right of its container and not repeat.
#your-element {
background: #828AD0 url(images/your-graphic.jpg) no-repeat right;
}
This background graphic will align itself offset from the left of its container by 25% of the container's width and will repeat vertically (y).
#your-element {
background: #828AD0 url(images/your-graphic.jpg) repeat-y 25%;
}
If you do not want the graphic to repeat vertically you may want to align the background graphic to the top, center, bottom or position the background graphic by a top offset amount.
This background graphic will align itself to the top of its container and not repeat.
#your-element {
background: #828AD0 url(images/your-graphic.jpg) no-repeat top;
}
This background graphic will align itself to the center of its container and will repeat horizontally (x).
#your-element {
background: #828AD0 url(images/your-graphic.jpg) repeat-x center;
}
This background graphic will align itself to the bottom of its container and not repeat.
#your-element {
background: #828AD0 url(images/your-graphic.jpg) no-repeat bottom;
}
Styling a table through the COLGROUP and COL tags is more efficient than styling each individual TABLE cell. To style your tables with the COLGROUP tag you must first add them to your table in your source mark-up.
The COLGROUP tag (combined with THEAD, TFOOT, TBODY and TABLE rows) allow us to style a table much more efficiently than styling each table cell. Here is the source mark-up for a simple two column, two row TABLE.
<table class="table" border="1" cellspacing="0" >
<colgroup>
<col class="table-column-1" />
<col class="table-column-2" />
</colgroup>
<tbody>
<tr class="table-row-1">
<td>Super widget</td>
<td>$30.00</td>
</tr>
<tr class="table-row-2">
<td>Mega widget</td>
<td>$25.00</td>
</tr>
</tbody>
</table>
Instead of styling each TABLE cell we style the column groups and the rows below.
It's important to note that the BORDER-COLLAPSE property be set to COLLAPSE in the TABLE if you would like to create single pixels borders on the TABLE cells. When this COLLAPSE attribute is set adjacent TABLE elements will have their borders merged.
.table {
width:40%;
border-collapse:collapse;
border:1px solid gray;
}
.table-row-1 td, .table-row-2 td {
padding:2px 6px;
border:1px solid gray;
}
.table-row-2 td {
background-color:#FFFFCC;
color:red;
}
.table-column-1{
text-align:left;
width:65%;
color:black;
}
.table-column-2{
text-align:center;
width:35%;
color:red;
}
The source mark-up and CSS above produce a table like this.
| Super widget | $30.00 |
| Mega widget | $25.00 |
If your table had many columns or rows, say 20 or 30 of them you can see that using the COLGROUP and COL tags become much more efficient than styling each table cell. More detailed information on column groups can be found in The Official W3C Table Specification.
As mentioned earlier the XHTML strict doctype is not forgiving. Your source mark-up needs to be well-structured and free of errors. Because of this it is helpful to run your pages through a validator that checks for errors and offers solutions and explanations for errors it finds. CSS is generally more forgiving but it is also helpful to run your CSS file through a CSS validator.
Microsoft Visual Studio and many other desktop applications contain XHTML strict validators. You can also find many free on line validators. The W3C, is the organization responsible to the official XHTML strict specification. The W3C has a free XHTML validator.
Microsoft Visual Studio and many other desktop applications contain CSS validators. You can also find many free on line validators. The W3C, is the organization responsible for The Official CSS 1 Specification. The W3C has a free CSS validator.
Using graphic elements and fonts in a range from small to large can help add professional polish to your design as well as add clarity to your main sections and scanability of the content. For example:
The primary colors are red, blue and yellow.
The secondary colors are made (in theory, when using physical colors like oil paint) from two primary colors (red + blue = purple, blue + yellow = green, etc..).
The primary and secondary colors above are extremely bright and cartoon-like. In some cases it's appropriate to use these primary and secondary colors in small amounts (perhaps as a link color, in order for a link color or active link color to stand out from th