A very basic style sheet

Originally written for one of the members of the Blind Webbers list, this style sheet is a good starting point. It won’t dazzle anyone, but it’s very legible. You can find the css at sandyfeldman.com/resources/starterstyles.css and a template page at template.

html

This bit of code helps IE cope with end users changing text sizes.

body

The colour #222 is just a bit off black and the background colour, #fff, is white. This gives a good level of contrast, and avoids the halation that black text on white can cause on some monitors.

The line height of 1.67em opens up space between lines and that increases legibility.

.wrapper

The wrapper is set at 780 pixel width. This means the page will fit in a small 800 x 600 window, as still enjoyed by about 15% of users. The ‘auto’ margin setting will mean that the page will float to the centre in a wider screen. Type that is more than 50em wide starts getting hard to read, but it would have to be teeny, tiny to get that wide in this window.

.menu

The menu is set up as a list, and it floats horizontally across the top. I've got a few links there, and you can probably up it to ten without it looking bad. The only thing to worry about is ending up with a link by itself wrapping onto a second line. That’s going to look silly. If that happens, narrow the width of the menu so that the orphan link has a friend. If you need more than ten links, you should really think about a custom design for your site. #thispage is used to highlight the link to the current page.

other info

All font sizes are declared in ems. This allows the browser to use the users declared font size preference. All positions are relative so that if you increase text sizes, the page degrades very nicely. I would hardly call it degrading. Good luck, and please let me know if you use this.