Let's refresh really quickly on how style sheet helps you.

1. In the early days of the web, HTML was both the language to structure and format the look of your page.

2. As the web moved along at improving itself, it was realized that it would be very difficult to update masses of pages if you ever wanted to change the look of your site. You had to edit every page to do so.

3. Thus the rules governing the look of your content (font size, colour, shape, position, and other styles) were separated from HTML to their own place - Style Sheets. Now if you change your style for "Title" in your style sheet, every peice of text marked as a title on your site changes instantly.

Designing Styles With Accessibility In Mind

Style sheets play a very important part in making your site flexible for the end user. They define the way your text will look, and often one habit in particular is for us to set the text to be a specific size. It's just a habit that we've picked up from working in programs like MS Word, Word Perfect and other document editors. We type up something, set it to 12 point Times New Roman, type something else, define it as bold, 16 point Arial to make it stand out as a title.. we grew up without accessibility in mind. I imagine it won't be too far into the future, actually, before both the web and the desktop publishing software eliminates (or switches from being the default) of using Points to the flexible method of percent values or "em" values.

Code Example 1 - Let your user do the sizing!

Here's how we define text size in style sheet language for what we'll call "regular text" (such as this text you're reading right now).

.RegularText {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 90%;
}

Holy smokes! Isn't that short and simple? We create a style named RegularText, tell it what font family to draw from on the user's computer, and then say "Whatever the user's prefered text size is, make this text 90% of that size".

In this one simple step, we just made it possible to affect the look of an entire site, but still give control to the person using your website. When they use their Text Size menu option in Internet Explorer, they can boost the size of the words they're reading by choosing "Larger" or "Largest" modes.

If we used the term "12 point" instead, then no matter what the user chose on their end, the font would not change. We deny them their preferences!

Code Example 2

.LargeTitle {
text-transform: uppercase;
font-size: 130%;
font-family: Arial, Helvetica, sans-serif;
padding: 3px;
color: #006666;
font-weight: bold;
text-align: center;
background-color: #FFFFFF;
border-top: medium solid #000000;
border-right: thin solid #000000;
border-bottom: thin solid #000000;
border-left: medium solid #000000;
}

Woah! This has alot more to say for itself. Here we've created a style called LargeTitle. We're doing a little bit of specific formatting here.

• Set the text to all be upper case format
• Make the font 130% (1.3 times larger) than that of whatever the regular font size is. So if the user has defined on their computer that all text starts at 16 points size, this text will display as 20 points
• Draw the font from the user's available font set of either Arial or Helvetica or a sans-serif font
• Create a little bit of white space all the way around the text (3 pixels)
• Colour the font green (the #006666 is what's called an RGB colour code, more on that in a moment)
• Make the text bold
• Align the text to the centre of the space it sits in.
• Set the colour of the space behind the text to white (again, an RGB colour code)
• Setup a nice little border line around the text, in black, and in an look that creates a sort of a shadow appearance by using thicker edges on the top and left versus the bottom and right.

The above two examples are the exact code used on this site. You can use it, edit it as desired to match your plans for your site.

What is RGB?

In shortest simplest terms, its a number the describes how red, green, or blue an item is. This creates the colour on the computer screen. Two characters are defined for each of the 3 parts, so you have this 6 character value with a "#" in front of it to indicate its purpose as an RGB value in the style sheet. Notice I didn't use the word "digit" - because the value is hexadecimal (meaning it can go from 00 (zero zero) to FF. Weird counting system hex is, but it makes sense to computers.

You can have a look at a nice big beautiful table of all the colour codes with an example of what colour the code looks like by checking out this RGB colour code page.

[ Back to Accessibility Index ]
[ Back to DREN Home Page ]