GeoffKnagge.com

Home

Web Development

Short Contents

For Beginners...
Introduction
Changes from 3.2
Document
Attributes
...that are available for all BODY objects
Text
Organisation tools
Forms
Images
Sounds
Style Sheets
Special Effects - Javascript
Search Engines

Full Contents

For Beginners...

Introduction

Other HTML sites
Putting pages online
Tips For beginners
Download this Guide

Changes from 3.2

Document

Specifying Language
Structure

The <HEAD> section

...General attributes
...Title
...Setting the Base address
...Queries : ISINDEX
...META tags
...Character sets
...<LINK>s

The <BODY> tag
... General Attributes
...Document Colours
...Background

Attributes

...that are available for all BODY objects

Text

Headings
Fonts
Preformatted text
Change text direction
Special Characters
Character Formatting
...Blink
...Bold
...Italics
...Underline
...Strikethrough
...Superscript
...Subscript
Paragraph formatting
...Blockquote
...Line Breaks
...New Paragraph
...Stop Line Breaks
...Word Break
...Centre text
...Marking Modifications
Miscellaneous
...Abbreviation
...Acronyms
...Addresses
...Use Bigger/Smaller fonts
...Citations
...Code
...Definitions
...Keyboard input
...Sample
...Teletype
...Variables
...XMP

Organisation tools

Comments

Horizontal lines

DIV and SPAN

Links
...<LINK>s
...within pages
...Image maps

Frames
...Naming and Targeting
...Inline Frames

Tables
...example tag
...Rows
...Cells
...Captions

...Head, Body & Foot

Lists
...Definition lists
...Directory Lists
...Menu Lists
...Ordered Lists
...Unordered Lists

Embedding special files
The Object Element

Forms

Inputs and buttons
Selection menus
Element Labels
Fieldsets and legends

Images

Sounds

Style Sheets

specifying version
individual elements
in the HEAD section
specifying media types
external sheets
cascading sheets
media-dependant defaults
HTTP headers

Special Effects - Javascript

Events
...onAbort
...onBlur
...onChange
...onClick
...onError
...onFocus
...onLoad
...onMouseOver
...onMouseOut
...onReset
...onScroll
...onSelect
...onSubmit
...onUnload
Basic Commands
...Changing the status bar
...Opening a new window
...changing page being viewed

Search Engines

Style Sheets

Style sheets allow you to more easily setup the appearance of a HTML document, and are designed to overcome the limitations of the standard HTML attributes. Style Information can be assigned to almost any element in HTML. However, not that older web browsers will not support style sheets, so ensure that your pages are still reasonably readable for those people, or a least provide an alternative version. If the headings and program code in this guide appear in different colours, your browser is supporting style sheets.

THIS IS NOT A STYLESHEET GUIDE!! This is only a quick guide on how to use style sheets in HTML documents. For the CSS specification, see my CSS guide or the W3C site.

Setting the default style sheet language

To use style sheets, you should tell the viewing program what language you are using. The default, and most common, is currently "css", but you should still define this, either by the meta tag:

<META http-equiv="Content-Style-Type" content="text/css">
or the following HTTP header :

<Content-Style-Type: text/css
>

This information can also be specified with the type="???" attribute in the opening <STYLE> tag.

Setting Style Info - individual elements

This is done by adding the style="???" attribute to the opening tag of the element, where ??? is the style information in the form name: value, with each seperated by a semi-colon (;). For example,
<P style="font-size: 10pt; color: white">

Setting Style Info - in the HEAD section

All of the document's style information can be set in the HEAD section of the document,as seen by the following example:

<STYLE type="text/css" media="all">
<!--
  H1 {style info for all H1 elements}
  H1.classname {style info for H1 elements assigned to classname}
  #idname {style info for a single element with id="idname"}
-->
</STYLE>

Note that the  comment tags are intended to prevent the contents being displayed if style sheets aren't supported.

The above shows the three ways in which style infromation can be specified:

for all elements of the specified type
for all elements assigned the same classname by use of the class="???" attribute within their opening tag
for an individual element named by the id="???" attribute in its opening tag.

Selecting the media type

As you may have spotted in the above example, Style sheets have provision for the media="???" attribute. This allows you to specify different style information for different viewing devices. The value is a comma seperated list of the below values, where the names are case sensitive...

screen	Common web browsers
tty	fixed-pitch character devices : teletypes, other text only displays
tv	devices with low resolution, color, limited scrollability
projection	projectors.
handheld	handheld devices (small screen, monochrome,etc).
print	where documents are split into pages.
braille	braille tactile feedback devices.
aural	text-to-speech aids
all	all devices.

Setting style from another file

There are three ways in which you can specify an external style sheet :

The preferred sheet : The style sheet which you would prefer people to use. Add a link of the following format to the <HEAD> section of the document :
<LINK href="stylesheetname.css" title="(your title or description)" rel="stylesheet" type="text/css">
An Alternative : This allows people to select a format that best suits them. Add a link of the following format to the <HEAD> section of the document :
<LINK href="stylesheetname.css" title="(your title or description)" rel="alternate stylesheet" type="text/css">
No alternatives :When you only have one available style sheet, do not specify a title :
<LINK href="stylesheetname.css" rel="stylesheet" type="text/css">

Cascading Style Sheets

You can also specify information in addition to what is given in the LINKed style sheets, by using the <STYLE> element as normal, after the LINKs.

Media Dependant Defaults

You can set a different default for different types of media, by seperate <LINK href="stylesheetname.css" title="(your title or description)" rel="stylesheet" type="text/css" media="???"> links for each media type. The LINK that applies to all other media types should be placed last, without the media= attribute.

Using HTTP headers

Instead of the HEAD tags as described above, you can also use the following format, placed before the HEAD section :

Link: <filename.css>; rel="stylesheet"; title="(your title)"

Site Map

(C)opyright, Geoff Knagge.
Continued use of this site indicates your agreement to the Conditions of use and Privacy Policy.