CSS Cursors

Cursors

To add context to the elements in your documents you can use the Cursor property to control how the pointer will be displayed when it passes over your elements.

This declaration only works in IE4 Animated cursors can not be defined.

Values and their descriptions include:

auto: Allows the Enduser’s browser to select the Cursor.

crosshair: Crosshair

default: Default Cursor

pointer: Pointer that indicates a link.

move: Indicates something is to be moved

*-resize: Cursor used to reposition windows.

text: Text I-bar.

wait: Busy or wait hourglass cursor.

help: Help cursor

url: Is used to download a cursor. Special Care should be taken using this Value.

The selector and tag would look like:

<style>

A.help {cursor:help}

</style><A class=help href="faq.html" mce_href="faq.html">help</a>

Here are some test cursors you can try:

AUTO Crosshair Default Pointer
Move *-resize Text wait help

Aural CSS

Aural style sheets

To provide visually impaired users access to your pages CSS has provided some formatting declarations that will control how your pages are converted to synthesized speech. To date there are no browsers or addon products that
will take advantage of these features. One similar application would be the Hawaii Education Literacy Project’s
Freeware application Read To Me.

Although their program uses proprietary scripting to define how web pages are converted to speech it seems to be a good partial simulation of what will be provided by Aural style sheet declarations in future versions of web browsers.

There are three main groups of Aural declarations that will be available to Authors.


Volume properties

The first group will allow the author to control the volume and flow of the content through pauses. It will also provide a way to combine audio files that will be played in the background at defines times as the text is generated.

The possible declarations include:
volume, speak, pause-before, pause-after, pause, cue-before, cue-after, cue, play-during


Spatial Values

The second set of declarations will control the 3D spatial value of the direction of the speech. This is similar to the properties that are found in VRML and Multimedia Games.

Spatial Property Declarations include:
Azimuth which positions the sound in a 360 degree plane can be
used to position the direction of the speaker and if more than
one speaker is active then relative positions will be used to
offset their position to reduce confusion.

Values include: angle, left-side, far-left, left, center-left, center, center-right, right, far-right, right-side, behind, leftwards, rightwards

Elevation: is used to position the Y value or height of the direction the sound is coming from.

Values include: angle, below, level, above, higher, lower

By using these two declarations if you wanted the sound to come from the lower right you would set Azimuth to right and Elevation to lower.


Voice characteristic properties

The final group of declarations will control the quality of the voice used to generate the synthesized speech. Choice of characters the rate of speech and the ability to control how words are emphasized to provide sentences structure will allow authors to tweak their presentation.

The possible declarations include:
speech-rate, voice-family, pitch, pitch-range, stress, richness, speak-punctuation, speak-date, speak-numeral, speak-time

Applying CSS to Forms

Forms are an essential part of interaction on the Internet but they can look rather drab. With CSS we can position form items so they all line up nicely and add a bit of colour to jazz them up.

The original form





That form looks horrible! Here’s the code behind it:

<form action="destination.htm">
<label for="name">Name</label> <input type="text" id="name" /><br />
<label for="e-mail">E-mail</label> <input type="text" id="e-mail" /><br />
<input type="submit" value="submit" />
</form>

Positioning the form with CSS

The first thing we need to do to the form is make it line up nicely. In the old days this could only be achieved with tables – not anymore, courtesy of our old friend, CSS. First, we’ll assign a class to each form item:

<form action="destination.htm">

<label for="name">Name</label> <input type="text" id="name" class="input-box" /><br />

<label for="e-mail">E-mail</label> <input type="text" id="e-mail" class="input-box" /><br />

<input type="submit" value="submit" class="submit-button" />

</form>

The two input boxes have been assigned the class, input-box, and the submit button, submit-button – hmm… how did we think up those names?

Now they’ve got their classes we’ll need to assign some rules to them:

label

{

width: 4em;

float: left;

text-align: right;

margin: 0 1em 10px 0

clear: both

}
.input-box

{

margin-bottom: 10px
}
.submit-button

{

margin-left: 5em;

clear: both

}

Right, let’s go through that CSS bit-by-bit. We gave the label a fixed width of 4em, although this should obviously be increased if the prompt text in the form is anything longer than what we’ve got now (‘name’ and ‘e-mail’). We also specified the width in terms of em and not px so that if users increase the text size the width will increase with the larger letters.

The margin: 0 1em 10px 0 CSS command means the labels will have a margin above them of 0, to the right of 1em (so that the text isn’t up against the input box), a bottom margin of 10px (to create some space between each line) and a left margin of zero. The clear:both CSS command is necessary to ensure the text (‘name’ and ‘e-mail’) starts on a new line.

The submit button has a left margin of 5em so that it aligns with the input boxes, which are 5em from the left. This includes the 4em width and the 1em right margin of the prompt text.

So, putting that altogether gives us this form:




Looks much better, but it’s still rather plain. Let’s use some more CSS to jazz up the form so it’s more inline with the colour scheme on the page.

Applying colours to the form

The three CSS commands we’ll use to make those forms look good are border, background and color (you can also use any other CSS command, such as font, text size, bold etc.).

So, let’s say we want the input boxes in this form to have a dark blue text colour and border and a pale orange background, and the submit button to have black text, an orange background and a dark blue border. In addition to the above CSS, we would add in the following commands:

.input-box

{

color: #26a;

background: #feb;

border: #26a solid 1px

}
.submit-button

{

color: #000;

background: #fb0

border: 2px #9cf outset

}

(#26a is an abbreviation of #2266aa – you can apply this shorthand version with any colour value with repetitive numbers like this.)

We use ‘outset’ for the button’s border so that it looks like a button. If we used ‘solid’ it would look flat. Here’s how the form comes together:



One word of warning, be careful about using a light text colour for text with input boxes. More and more Internet users are using the Google Toolbar which fills in online forms for you. Whenever a form appears it automatically turns the background colour of input boxes to yellow – if you’ve specified white text it would be virtually impossible for your site visitors with this toolbar installed to see what they’re writing when completing the form.

Formatting the whole form

We may want to give this form its own title and border. To do this we add the <fieldset> and <legend> commands to the HTML code:

<fieldset>

<legend>This is my form</legend>

<form action="destination.htm">

<label for="name">Name</label> <input type="text" id="name" class="input-box" /><br />

<label for="e-mail">E-mail</label> <input type="text" id="e-mail" class="input-box" /><br />

<input type="submit" value="submit" class="submit-button" />

</form>

</fieldset>

We’ll apply some CSS commands to the fieldset and legend to give the form a blue border and a title with an orange background:

fieldset

{

border: #26a solid 1px;

width: 20em

}
legend

{

background: #fb0;

border: #26a solid 1px;

padding: 1px 10px

}

The final form

Drum roll… Here it is:

This is my form



Here’s the CSS we used to make this, all in one place:

label
{

width: 4em;

float: left;

text-align: right;

margin: 0 1em 10px 0

clear: both

}

.input-box
{

float: left;

margin-bottom: 10px

color: #26a;

background: #feb;

border: #26a solid 1px

}

.submit-button
{

margin-left: 5em;

clear: both

color: #000;

background: #fb0;

border: 2px #9cf outset

}

fieldset
{

border: #26a solid 1px;

width: 20em

}

legend
{

background: #fb0;

border: #26a solid 1px;

padding: 1px 10px

}

Take this further

This article only touches on what you can achieve with CSS and forms. You can pretty much apply any CSS command to a form item, so the only limit is your imagination. Play around with a form and see what you can come up with!

This article was written by Trenton Moss. He knows an awful lot about accessibility and the Disability Discrimination Act.

Applying CSS

Style Sheets in External Files

Link
To define an external Style Sheet to be used to format your HTML you use place a Link element in the Head area of the HTML file.

The basic tag would be:

<LINK REL=stylesheet href="mystyle.css" mce_href="mystyle.css">

HREF specifies the location and file name and REL indicates the file is a Style Sheet.

Additional Declarations include:

Media

Media is used to define the application of the CSS to its end use. If more than one external style sheet is defined with the link element the Media type would set the proper file to be used for the proper use of the page. The Media definition is not implemented in IE4 or NS4.

<LINK REL=stylesheet MEDIA=”screen” href=”mystyle.css” mce_href=”mystyle.css” TYPE=”text/css”>

You can also define more than one profile with comas between the values.

Media=Print,Screen,Aural

PRINT – For documents viewed on screen in print preview mode.

SCREEN – a continuous presentation for computer screens.

PROJECTION – paged presentation for projected presentations.

BRAILLE – for Braille tactile feedback devices.

AURAL – aural presentation, e.g. for a speech synthesizer.

ALL – the default value, the style sheet applies to all output devices.


Title

The Title Attribute can be used to define the type of style sheet. Not using the TITLE tag makes your file persistent. This means the Selectors in a file without a title will always be applied to the document.

TITLE=”default”

If you define more than one Style Sheet to be applied to your document you can use the title attribute to group them.

<LINK REL=”alternate stylesheet” TITLE=”bluepage” href=”b-paragraph.css” mce_href=”b-paragraph.css”>

<LINK REL=”alternate stylesheet” TITLE=”bluepage” href=”b-tables.css” mce_href=”b-tables.css”>

<LINK href=”largefont.css” mce_href=”largefont.css”>
TYPE can be used to describe the file type of the Style Sheet.

<LINK href=”mystyle.css” mce_href=”mystyle.css” TYPE=”text/css”>


Meta Tag

The Meta element can be used on your page to identify to the Enduser’s client that your page includes CSS information.

<META HTTP-EQUIV=”Content-Style-Type” CONTENT=”text/css”>


Style Sheet use by the Enduser

If the Enduser would like to construct their own style sheet they would follow the same method as an author that is constructing an external style sheet. However because the enduser will not be able to prepare style selectors that will override all the possible ID and Class Element Declarations the enduser’s User Agent should be able to ignore server side Style Sheets.

Internet Explorer agents define the client side Style Sheet in the Internet Options – General Tab Under the Accessibility area.

Pages: