508 Spot Resource Center for Accessibility and Usability - 508Spot.com
Section 508 Checklist, Section508 Guides, and FREE Resources for Web Accessibility and Usability
computers > data formats > style sheets > css
Cascading Style Sheets CSS Tutorials
Cascading Style Sheet (CSS) is a markup language to format data for presentation of information on computers and other devices. We will learn how to apply css to our applications to create accessibility and usability.
CASCADING STYLE SHEETS CSS TUTORIALS
Navigation > Introduction
Here we will learn how to apply CSS to common structure elements to create navigation modules with greater accessibility and usability.
CASCADING STYLE SHEETS CSS TUTORIALS
Navigation > list structures
<!--START navBar --><div id="navBar001" class="navBar">
<!--START unordered list --><ul>
<!--START skip navigation --><li
id="skipnavBar001" class="navBtnHide" ><a class="navBtn"
href="#contentAfterNavBar001" accesskey="S"
title="Skip navBar001 Navigation - Accesskey = S" ><span
class="btnText">Skip navBar001 Navigation</span></a>
<!--END skip navigation -->
</li>
<li><a class="navBtn" id="navBar00101"
href="page01.html" accesskey="1" title="PAGE 01 -
Accesskey = 1">PAGE 01</a></li>
<li><a class="navBtn" id="navBar00102" href="page02.html"
accesskey="2" title="PAGE 02 - Accesskey = 2"
>PAGE 02</a></li>
<li><a class="navBtn" id="navBar00103" href="page03.html"
accesskey="3" title="PAGE 03 - Accesskey = 3"
>PAGE 03</a></li>
<li><a class="navBtn" id="navBar00104" href="page04.html"
accesskey="4" title="PAGE 04 - Accesskey = 4"
>PAGE 04</a></li>
<li><a class="navBtn" id="navBar00105" href="page05.html"
accesskey="5" title="PAGE 05 - Accesskey = 5"
>PAGE 05</a></li>
<!--END unordered list --></ul>
<!--END navBar --></div>
This is how our navigation module looks before css is applied.
CASCADING STYLE SHEETS CSS TUTORIALS
Navigation > Style for list structures
.navBar{
position:relative;
}.navBar ul{
margin: 0px;
padding: 0px;
border: none;
display:inline;
}
.navBar li{
display: block;
float: left;
text-align: center;
padding: 0px;
margin: 0px;
border-bottom: 1px solid #ffffff;
border:none;
}.navBar ul li a{
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
color: #FFFFFF;
letter-spacing: 1px;
line-height: 2em;
background-color: #7a7af2;
text-align: center;
vertical-align: middle;
margin: 0px;
padding: 0px;
height: 2em;
width: 124px;
border: 2px outset #c7c4da;
text-decoration:none;
position: relative;
display:block;
/*START IE only*/
}* html body .navBar ul li a{
width: 128px;
}
/*END IE only*/
.navBar ul li a:visited{
color:#cccccc;
}.navBar ul li a:hover, .navBar ul li a:active, .navBar ul li a:focus{
color:#000000;
text-decoration:none;
background-color: #ffffff;
border: 2px outset #857fad;
}
This is how our navigation module looks after css is applied.
CASCADING STYLE SHEETS CSS TUTORIALS
Navigation > Alternate Styles for list structures
Simple modifications to our css will adjust the presentation of our navigation module.
Our Mission
Helping the web design and development community with programming software and web applications towards Standard, Accessible, Intelligent Designs (S.A.I.D.). The S.A.I.D. Architecture does comply with International Standards, Usability and Accessibility Guides, and Section 508 Checklist for Faster more Flexible design development.
