Priority 1 Item 3
Use style sheets to control presentation while ensuring that all content is accessible in user agents that do not support or do not fully support style sheets.
Using CSS to markup a detailed list
- Telephones
- Computers
- Portable MP3 Players
- Idaho
- Wisconsin
In the two examples below, the CSS will visually place the Product and Location lists in the same way. However, the different uses of CSS in bolth examples will fair differently when CSS is disabled.
The first example places styles on the detailed list markup. Because CSS was used to create styles for the detailed list markup, this method allows for a gracefull transition when CSS is disabled.
How this example views with CSS disabled.
- Products
- Telephones
- Computers
- Portable MP3 Players
- Locations
- Idaho
- Wisconsin
<style type="text/css">
#box {
width:230px;
border:1px solid #eee;
text-align:left;
}
.menu1,.menu2 {
margin: 0px;
font-family: sans-serif;
font-weight:bold;
font-size: 120%; color: red;
}
.item1,.item2,.item3,.item4,.item5 {
margin: 0px
}
</style>
<div id="box"> <dl style="float:left;padding:10px;"> <dt class="menu1">Products</dt> <dd class="item1">Telephones</dd> <dd class="item2">Computers</dd> <dd class="item3">Portable MP3 Players</dd> </dl> <dl style="float:right;padding:10px;"> <dt class="menu2">Locations</dt> <dd class="item4">Idaho</dd> <dd class="item5">Wisconsin</dd> </dl> <div style="clear:both"></div> </div>
The second example does not use the detailed list markup, but rather uses CSS to control the position of the elements. This method causes readabilty problems when CSS is disabled.
How this example views with CSS disabled.
Products Locations Telephones Computers Portable MP3 Players Wisconsin Idaho
<style type="text/css">
#box {
width:230px;
border:1px solid #eee;
text-align:left;
}
.menu1,.menu2 {
margin: 0px;
font-family: sans-serif;
font-weight:bold;
font-size: 120%; color: red;
}
.item1 {
position: absolute;
top: 7em;
left: 0em;
margin: 0px
}
.item2 {
position: absolute;
top: 8em;
left: 0em;
margin: 0px
}
.item3 {
position: absolute;
top: 9em;
left: 0em;
margin: 0px
}
.item4 {
position: absolute;
top: 7em;
left: 14em;
margin: 0px
}
.item5 {
position: absolute;
top: 8em;
left: 14em;
margin: 0px
}
</style>
<div class="box"> <span class="menu1">Products</span> <span class="menu2">Locations</span> <span class="item1">Telephones</span> <span class="item2">Computers</span> <span class="item3">Portable MP3 Players</span> <span class="item5">Wisconsin</span> <span class="item4">Idaho</span> </div>
More Resources
Cascading Style Sheet (CSS) techniques for generating content - WAI recommendation.
Using style sheet positioning and markup to transform gracefully - WAI recommendation.
View WAI checkpoint 6.1 - Organize documents so they may be read without style sheets.
Use the W3C CSS Validator - Test a stylesheet with the W3C CSS Validator.