Lauri
Watts
2002-10-16
3.1
KDE
CSS
Stylesheets
Accessibility

## Stylesheets

### Introduction

CSS style sheets affect the way web pages appear. CSS stands for Cascading Style Sheets.

&kde; can use it's own stylesheet, based on simple defaults and the color scheme you are using for your desktop. &kde; can also use a stylesheet that you have written yourself. Finally, you can specify a stylesheet in this module. The options presented in this module are tuned for accessibility purposes, especially for people with reduced vision.

Your choices here affect every &kde; application that renders html with &kde;'s own renderer, which is called khtml. These include &kmail;, &khelpcenter; and of course &konqueror;. Choices here don't affect other browsers such as &Netscape;.

The module has two pages, General, where you can choose which stylesheet to use, and Customize where you can design an accessibility stylesheet.

### General

This page contains the following options:

Use default stylesheet

  &kde; will use the default stylesheet. Some of the colors will default to those defined in your chosen color scheme. Most settings are easily overridden by the page you are viewing.

Use user-defined stylesheet

  &kde; will use a stylesheet that you have written yourself. You can use the browse button to locate the stylesheet on your system. CSS iles traditionally have a `.css` extension, but this is not required.

Use accessibility stylesheet defined in "Customize"-tab

  Use the settings defined in the Customize tab. Enabling this option will enable the options on the Customize page.

### Customize

Here you can set up a user stylesheet. The options available are only a subset of the instructions you can add in a stylesheet, and they are geared towards people with reduced vision, to allow users to create a stylesheet that makes web pages and the &kde; help files more readable.

The options on this page are disabled unless you chose Use accessibility stylesheet defined in "Customize"-tab on the previous page.

#### Font Family

Base family

  Choose a font family to use for body text.

Use same family for all text

  If you enable this, then the same font family will be used for all text, regardless of the settings on the page you are viewing. This is useful for pages which have used a decorative or hard to read font for headlines.

#### Font Size

Base Font Size

  This is the default size for text on the page. Many web sites set their font sizes relative to this default, using larger or +1 to make the text bigger, and smaller or -1 to make the text smaller.

  Many people design their web pages on platforms where the ordinary default text size is too large for the average user to read, so it is very common to come across web pages that have forced the font smaller in this way.

  This setting will allow you to set the default font to a comfortable size, so that the relative sizes are also enlarged enough to be comfortable.

  Don't forget you can also have &konqueror; enforce a minimum size, so that text is never too small to read. Set that under Behavior, in the Web Browser section in &kcontrol;.

Use same size for all elements

  If you enable this option, then all text will be rendered at your specified font size, regardless of the instructions the page contains. Relative font sizes as discussed earlier, and even specific instructions that text should be rendered at a certain size will be overridden here.

#### Colors

Black on White

  Many people with reduced vision find black text on a white screen gives the most contrast, and is easiest to read. If this applies to you, you can set this here.

White on Black

  Many other people with reduced vision find the opposite to be true, that white text on a black screen is easier to read.

Custom

  Still other people find that pure black and white, in either order, is difficult to read. You can set custom colors here for both the Background and the Foreground.

Use same color for all text

  Many web sites use a different, often contrasting color for headings or other flourishes. If this interferes with your ability to read the content, you can enable this checkbox to have &kde; use the colors you have set above for all text.

#### Images

Suppress images

  If you don't want to view images, you can turn this off here.

Suppress background images

  One major problem for reduced vision users is that background images don't give sufficient contrast to allow them to read the text. You can disable background images here, independently of your choice above to view all images.

#### Preview

The Preview allows you to see the effect of your changes. A window will pop up, showing how several types of headings will appear with your stylesheet, and a sentence in the default body text.

This should allow you to fine tune your stylesheet until you have something that you can comfortably read.

Happy surfing!

### Section Authors

This section written by Lauri Watts lauri@kde.org