WebThings - by Jan Weijers
All chapters...
Table of contents
Introduction
A simple HTML document
Images
Lists
Links
Tables
Frames
Forms
Cascading style sheets
JavaScript
Programming in PHP
Server side includes
CGI & Perl
Extended characters
Examples of colours
Learn more
Software
Recent changes
Alphabetical index
In this chapter...
Introduction
Using an external style sheet
Using a STYLE element
Using a style attribute
What is better: external, tag, or attribute?
The formatting model
Background colour
Background image
Foreground colour
Borders
Padding
Margins
Font family
Font weight
Font style
Font variant
Font size
Letter spacing
Line height
Text align
Setting link styles
Forcing a page break when printing

 

 

Taalkeuze...
U hebt gekozen om Engels als eerste taal te gebruiken.Nederlands vlaggetje Klik hier om te kiezen voor Nederlands.

Cascading style sheets

Introduction

If you use HTML 4, you have the possibility to save all lay out in a separate "cascading stylesheet (CSS). The advantage of CSS is that you can save it in a separate document. You can then change the lay out of your whole site by editing just one document.

There are three ways to use CSS:

  1. in a separate file, a so-called external style sheet
  2. in a style tag in your HTML file
  3. in a style attribute with almost every tag

All three methods are discussed in this chapter. The full specification of CSS can be found on the web site of the world wide web consortium, http://www.w3c.org/.

Using an external style sheet has clear advantages. A whole series of HTML documents can use the same style sheet, for example all the chapters of this guide use the same style sheet. That means that changing an element of the lay-out no longer involves opening, editing and uploading a whole bunch of HTML files, but just changing one line in one style sheet.

CSS works in most modern browsers. However, unfortunately there are always some imcompatibilities. It is recommended to check your work carefully in more than one browser.

A style sheet consists of a collections of rules. A rule consists of a declaration and its selector. For example:

TD.mrn {background:maroon; color:white;}

This is a rule which consists of the declaration background:pink and its selector TD.pinky. The declaration contains the information about the lay out and the selector makes clear where this lay-out should be applied. A declaration has one or more properties (background and color in this example) each with a value (maroon and white). You can apply this rule by using, for example:

<TABLE><TR><TD CLASS="mrn">
EXAMPLE
</TD></TR></TABLE>

EXAMPLE

The CLASS attribute tells that this TD element should use the TD.mrn rule. You can define different rules for the TD tag and use the CLASS element to decide which one to apply where. Alternatively you can use the ID attribute to select a style:

<P ID="yellowgreen">Ugly: yellow text on a green background.</P>

Which refers to an entry in the style sheet like you have seen above:

#yellowgreen {color:yellow; text-align:center; background:green;}

The result is this:

Ugly: yellow text on a green background.

The difference between CLASS and ID is that an ID needs to be unique in a document. It can only occur once. A class can used as often as necessary.

To the top

Using an external style sheet

Every HTML document that uses your style sheets needs a LINK element in this way:

<HTML><HEAD>
<LINK HREF="htmlguide.css" REL="style sheet" TYPE="text/css">
...
...
</HEAD>

A style sheet is a simple plain text file that can be produced in any text editor or word processor if you save the file as plain text. An HTML document can use more than one style sheet. For example, you can make a style sheet with general styles for your entire site and another style sheet with additional styles for a specific chapter.

To the top

Using a STYLE element

You can also use styles in your HTML document by putting a STYLE element inside the header. Here is an example:

<HEAD>
<STYLE TYPE="text/css"><!--
H1.green { color:green; text-align:center;}
--></STYLE>
</HEAD>

<H1 CLASS="green">Testcase</H1>

Testcase

The comments are used in this example to hide the style rule from browsers that do not recognise the STYLE element (and will therefore ignore it). In this type of style definition you can use all the various options explained below. The examples below mostly use an external style sheet, but they are easy enough to adapt.

To the top

Using a style attribute

Using a style attribute is much like the other examples you have seen.

<P STYLE="color:maroon; text-align:center;">A Maroon Paragraph</P>

A Maroon Paragraph

Again, you can use any of the styles explained below in a style attribute. You can also use the SPAN tag for a STYLE attribute. The SPAN tag's only function is as a placeholder for a STYLE attribute. It serves no other purpose.

<SPAN STYLE="color:maroon;">Maroon coloured text</SPAN>

Maroon coloured text

In the rest of this chapter you will see more examples of the use of the SPAN element.

To the top

What is better: external, tag, or attribute?

What is better to use: and external stylesheet, a STYLE tag or a STYLE attribute? You can use the following guidelines for that:

  • Use an external stylesheet ( a separate file) for all lay out that applies to more than one HTML document.
  • Use a STYLE tag for lay out you want to use in several places within one document.
  • Use a STYLE attribute for layy out you want to use in only one place in only one document.

In practice you will use a combination of several methods. Usually an external style sheet for lay out you use in your entire web site with a combination of tags and attributes for exceptions and additions to that lay out.

To the top

The formatting model

The formatting model consist of four 'boxes':
- the contents;
- around that, the padding;
- around that, the borders;
- around that, the margins.
So this is more or less how it looks:

Contents, Padding, Borders and Margins

The content in this example is a bit of text but it can equally be other things such as a graphic or a table. The following sections will deal with foreground and background colour of the content and after that the padding, borders and margins.

To the top

Background colour

To set the background color for your whole document put this line in your style sheet:

BODY {background:yellow;}

This will give your page a yellow background colour. The colour codes are the same ones you have seen in many other examples. You can use the background declaration for any element, for example, P, H1, etc. Here is an example with the P tag:

<P STYLE="background:gray; text-align:center;">This is a grey background</P>

This is a grey background

The background you set affects the contents as well as the padding as shown in the formatting model above but not the border or the margin:

<P STYLE="background:aqua; color:red; padding:5px; border-style:solid; border-width:1px; margin:5px; text-align:center;">This is an aqua background</P>

This is an aqua background

In the above example you can see how the background property affects the content and the padding but not the margins. The margins remain transparent.

To the top

Background image

Style sheets allow you to use a background image not only with the body tag, meaning the whole document, but with basically any tag. You can put an image behind one paragraph of text:

<P STYLE="background: url(html4.gif) no-repeat white;">Semper ubi ... periculo deicerentur.</P>

Semper ubi sub ubi. Quone modo nunc, fulve bos? Si hoc non legere potes, tu asinus es. Tua mater tam antiqua ut linguam latinam loquatur. Itaque cum adpropinquarent Britanniae et ex castris viderentur, tanta tempestas subito coorta est ut nulla earum cursum tenere posset, sed aliae eodem unde erant profectae referrentur, aliae ad inferiorem partem insulae, quae est propius solis occasum, magno suo cum periculo deicerentur.

The background colour white as specified above is used for those parts of the background that are not covered by the image. By default the image is positioned in the top left corner. You can change this:

<P STYLE="background: url(html4.gif) no-repeat bottom right white;">Semper ubi ... periculo deicerentur.</P>

Semper ubi sub ubi. Quone modo nunc, fulve bos? Si hoc non legere potes, tu asinus es. Tua mater tam antiqua ut linguam latinam loquatur. Itaque cum adpropinquarent Britanniae et ex castris viderentur, tanta tempestas subito coorta est ut nulla earum cursum tenere posset, sed aliae eodem unde erant profectae referrentur, aliae ad inferiorem partem insulae, quae est propius solis occasum, magno suo cum periculo deicerentur.

The no-repeat keyword means that the image is shown only once. If you use repeat instead the image is shown multiple times to cover the whole background. You can also use repeat-y to repeat the image only along the vertical axis or repeat-x to repeat it only along the horizontal axis.

<P STYLE="background: url(parts/valid-html401.png) repeat white;">Semper ubi ... periculo deicerentur.</P>

<P STYLE="background: url(parts/valid-html401.png) repeat-y white; width:300px;">Semper ubi ... periculo deicerentur.</P>

<P STYLE="background: url(parts/valid-html401.png) repeat-x white;">Semper ubi ... periculo deicerentur.</P>

Semper ubi sub ubi. Quone modo nunc, fulve bos? Si hoc non legere potes, tu asinus es. Tua mater tam antiqua ut linguam latinam loquatur. Itaque cum adpropinquarent Britanniae et ex castris viderentur, tanta tempestas subito coorta est ut nulla earum cursum tenere posset, sed aliae eodem unde erant profectae referrentur, aliae ad inferiorem partem insulae, quae est propius solis occasum, magno suo cum periculo deicerentur.

Semper ubi sub ubi. Quone modo nunc, fulve bos? Si hoc non legere potes, tu asinus es. Tua mater tam antiqua ut linguam latinam loquatur. Itaque cum adpropinquarent Britanniae et ex castris viderentur, tanta tempestas subito coorta est ut nulla earum cursum tenere posset, sed aliae eodem unde erant profectae referrentur, aliae ad inferiorem partem insulae, quae est propius solis occasum, magno suo cum periculo deicerentur.

Semper ubi sub ubi. Quone modo nunc, fulve bos? Si hoc non legere potes, tu asinus es. Tua mater tam antiqua ut linguam latinam loquatur. Itaque cum adpropinquarent Britanniae et ex castris viderentur, tanta tempestas subito coorta est ut nulla earum cursum tenere posset, sed aliae eodem unde erant profectae referrentur, aliae ad inferiorem partem insulae, quae est propius solis occasum, magno suo cum periculo deicerentur.

If you use a background image with the body tag you can fix it, which means that the image stays in place when you scroll through the page:

<BODY STYLE="background: url(valid-html401.png) no-repeat white fixed;">

This means that the html4.gif image will stay in the top left corner of the window, even when you scroll down through the text.

To the top

Foreground colour

In a very identical way, you can set the foreground colour. In your external style sheet you include these two lines:

P.first {color:maroon; background:yellow; text-align:center;}
P.second {color:#008B8B; text-align:center;}

The colour codes should look familiar by know. In your HTML document you put:

<P CLASS="first">The First paragraph</P>
<P CLASS="second">The Second Paragraph</P>

The First paragraph

The Second Paragraph

You can see again the use of the CLASS attribute to select a style to go with a paragraph.

To the top

Borders

If you want to set the same style, colour and width of border on all four sides of your element, the task is easy:

<P STYLE="border: dashed navy thick; text-align:center;">Now hear this!</P>

Now hear this!

For the colours you can use the usual standard names. For the size of the borders you can use thin, medium, thick, or a number. A number is the width of the border in pixels. You can also set the attributes for each border separately. Here is another example:

<P STYLE="border-top-width:thin; border-right-width:thick; border-bottom-width:medium; border-left-width:medium; border-color:red; border-style: solid; text-align:center;">Different borders!</P>

Different borders!

The same example can be achieved in a more compact way:

<P STYLE="border-width:thin thick medium medium; border-color:red; border-style: solid; text-align:center;">Different borders!</P>

Different borders!

If you use one border-width property with 4 values, these will be applied to the top, right, bottom and left margins respectively. This is easy to remember: start at the top and go clockwise. You can also just specify two values in which case the first value will be applied to the top and bottom and the second value to the left and right borders:

<P STYLE="border-width:thick; border-color:red navy; border-style: solid; text-align:center;">Differently coloured borders!</P>

Differently coloured borders!

To the top

Padding

As you can see in most of the above examples, the border of the element is right around the contents. This is where padding comes in. It inserts space between the contents and the border:

<P STYLE="background:aqua; text-align:center; padding:5px; border: thin solid black;">Some room to swing a cat</P>

Some room to swing a cat

Padding can be set differently for top, right, bottom and left:

<P STYLE="background:teal; text-align:justify; padding-top:5px; padding-right:50px; padding-bottom:20px; padding-left:20px; border: thin solid black;">Semper ubi ... periculo deicerentur.</P>

Semper ubi sub ubi. Quone modo nunc, fulve bos? Si hoc non legere potes, tu asinus es. Tua mater tam antiqua ut linguam latinam loquatur. Itaque cum adpropinquarent Britanniae et ex castris viderentur, tanta tempestas subito coorta est ut nulla earum cursum tenere posset, sed aliae eodem unde erant profectae referrentur, aliae ad inferiorem partem insulae, quae est propius solis occasum, magno suo cum periculo deicerentur.

Or again in a shorter way, similar to the thing with the borders.

<P STYLE="background:teal; text-align:justify; padding:5px 20px 20px 20px; border: thin solid black;">Semper ubi ... latinam loquatur.</P>

Semper ubi sub ubi. Quone modo nunc, fulve bos? Si hoc non legere potes, tu asinus es. Tua mater tam antiqua ut linguam latinam loquatur.

Notice once again how the background fills not only the element but also fills the space created by the padding.

To the top

Margins

The margins can be set in much the same way as the borders. The margins are transparent space around your object, to keep it away from surrounding text and images or, in this case, the border I draw around all the examples in this guide.

<P STYLE="background:#99F; text-align:center; margin-top:5px; margin-right:50px; margin-bottom:5px; margin-left:50px;">Clear The Margins!</P>

<P STYLE="background:#99F; text-align:center; margin:5px 100px 5px 100px;">Clear The Margins More!</P>

Clear The Margins!

Clear The Margins More!

Notice how the margins determine the distance to the surrounding object, in this case the light grey box. The paragraph with the larger margins therefore becomes smaller.

To the top

Font family

You can set the font family for any element in two ways, either by choosing a generic font family of specifying an exact font name. The following generic families are available:

  • serif (for example Times)
  • sans-serif (for example Helvetica)
  • cursive (for example Zapf-Chancery)
  • fantasy (for example Western)
  • monospace (for example Courier)

Using a generic font family enables the browser to find something that comes close. If you specify a font by name, the browser will try to find that specific font. You can combine the two possibilities:

P.font1 { font-family:times,times new roman,serif; text-align:center;}
P.font2 { font-family:helvetica,sans-serif; text-align:center;}
P.font3 { font-family:courier,profont,monospace; text-align:center;}

Now in your HTML document you can use:

<P CLASS="font1">First Example</P>
<P CLASS="font2">Second Example</P>
<P CLASS="font3">Third Example</P>

First Example

Second Example

Third Example

The browser will first try to find the font you specify, for example courier and profont and if it cannot find those use a generic monospace font depending on what is available.

To the top

Font weight

Font-weight is used to specify the weight of the font, creating lighter or darker version of the normal font (oddly enough, lighter is not valid even though bolder is).

<SPAN STYLE="font-weight:lighter;">A lighter line</SPAN>
<SPAN STYLE="font-weight:normal;">A normal line</SPAN>
<SPAN STYLE="font-weight:bold;">A bold line</SPAN>
<SPAN STYLE="font-weight:bolder;">A bolder line</SPAN>

A lighter line
A normal line
A bold line
A bolder line

In the example above you can also see the use of the SPAN tag. It serves no purpose except as a placeholder for STYLE or CLASS attributes. Alternatively you can use a numerical value as in the example below. Partial values such as 250 are not accepted. You should note that 400 is the same as normal and 700 is the same as bold.

<SPAN STYLE="font-weight:100;">Gradient Weight 100</SPAN>
<SPAN STYLE="font-weight:200;">Gradient Weight 200</SPAN>
<SPAN STYLE="font-weight:300;">Gradient Weight 300</SPAN>
<SPAN STYLE="font-weight:400;">Gradient Weight 400 (normal)</SPAN>
<SPAN STYLE="font-weight:500;">Gradient Weight 500</SPAN>
<SPAN STYLE="font-weight:600;">Gradient Weight 600</SPAN>
<SPAN STYLE="font-weight:700;">Gradient Weight 700 (bold)</SPAN>
<SPAN STYLE="font-weight:800;">Gradient Weight 800</SPAN>
<SPAN STYLE="font-weight:900;">Gradient Weight 900</SPAN>

Gradient Weight 100
Gradient Weight 200
Gradient Weight 300
Gradient Weight 400 (normal)
Gradient Weight 500
Gradient Weight 600
Gradient Weight 700 (bold)
Gradient Weight 800
Gradient Weight 900

As you can see, not all the different gradient weights actually appear different on the screen. This depends on the font in use, not all font families have the full range of weights available.

To the top

Font style

There are three styles available: normal, italic and oblique. You cannot apply more than one value at the same time.

<SPAN STYLE="font-style:italic;">Italic Text</SPAN>
<SPAN STYLE="font-style:normal;">Normal Text</SPAN>
<SPAN STYLE="font-style:oblique;">Oblique Text</SPAN>

Italic Text
Normal Text
Oblique Text

If and how exactly the three styles display depends on the fonts that are available to the browser. "Normal" is the default value but you may still want to use it sometime:

<P STYLE="font-style:italic">Sometimes you may want one <SPAN STYLE="font-style:normal;">normal</SPAN> word in an italic paragraph.</P>

Sometimes you may want one normal word in an italic paragraph.

So you see how you may want to use "normal" even though it is the default.

To the top

Font variant

Font-variant can be used only to swap between normal and small-caps fonts.

<SPAN STYLE="font-variant:small-caps;">Small-caps font</SPAN>
<SPAN STYLE="font-variant:normal;">Normal font</SPAN>

Small-caps font
Normal font

You only need the use the normal value if an element has inherited a small-caps setting from its parent and you wish to use a normal font.

To the top

Font size

There are different ways of defining font sizes. The first one is by using absolute sizes. How large these sizes actually look on the screen may vary depending on the font family in use.

<SPAN STYLE="font-size:xx-small;">Extra, extra small text</SPAN>
<SPAN STYLE="font-size:x-small;">Extra small text</SPAN>
<SPAN STYLE="font-size:small;">Small text</SPAN>
<SPAN STYLE="font-size:medium;">Medium (default) text</SPAN>
<SPAN STYLE="font-size:large;">Large text</SPAN>
<SPAN STYLE="font-size:x-large;">Extra large text</SPAN>
<SPAN STYLE="font-size:xx-large;">Extra, extra large text</SPAN>

Extra, extra small text
Extra small text
Small text
Medium text
Large text
Extra large text
Extra, extra large text

You can also set the font-size in absolute terms in millimeters, centimeters, inches, point, pixel, pica, x-height (the height of the font's lowercase letter x) or em (the height of the font). Obviously font sizes cannot be negative.

<SPAN STYLE="font-size:6mm;">6 Millimeter</SPAN>
<SPAN STYLE="font-size:1cm;">1 Centimeter</SPAN>
<SPAN STYLE="font-size:0.5in;">0.5 Inches</SPAN>
<SPAN STYLE="font-size:12pt;">12 Points (12/72 of an inch)</SPAN>
<SPAN STYLE="font-size:14px;">14 Pixels</SPAN>
<SPAN STYLE="font-size:2pc;">2 Pica (24 points)</SPAN>

6 Millimeter
1 Centimeter
0.5 Inches
12 Points (12/72 of an inch)
14 Pixels
2 Pica (24 points)

An alternative is to define relative text sizes, using the values "smaller" and "larger":

<P STYLE="font-size:large;">This is an example of <SPAN STYLE="font-size:smaller;">smaller</SPAN> and <SPAN STYLE="font-size:larger;">larger</SPAN>.</P>

This is an example of smaller and larger.

In the above example the paragraph has a large font, and the words smaller and larger get a relative size. If you compare this example to the previous one you can see that smaller relative to large results in medium and larger relative to large results in x-large.

Finally, you can set the font size as a percentage of the font size of the parent:

<P STYLE="font-size:large;">This is an example of <SPAN STYLE="font-size:50%;">fifty percent</SPAN> and <SPAN STYLE="font-size:150%;">hundredfifty percent</SPAN>.</P>

This is an example of fifty percent and hundredfifty percent.

To the top

Letter spacing

Style sheets allow you to control the distance between the characters in a word. The distance can be set in millimeters, centimeters, inches, points, pixels, picas, ex and em, just like the font sizes above.

<SPAN STYLE="letter-spacing:2mm">2 millimeters</SPAN>
<SPAN STYLE="letter-spacing:0.5cm">0.5 centimeter</SPAN>
<SPAN STYLE="letter-spacing:0.5in">0.5 inch</SPAN>
<SPAN STYLE="letter-spacing:3pt">3 points</SPAN>
<SPAN STYLE="letter-spacing:3px">3 pixels</SPAN>
<SPAN STYLE="letter-spacing:1pc">1 pica</SPAN>
<SPAN STYLE="letter-spacing:0.5ex">0.5 x-height</SPAN>
<SPAN STYLE="letter-spacing:0.5em">0.5 font height</SPAN>

2 millimeters
0.5 centimeter
0.5 inch
3 points
3 pixels
1 pica
0.5 x-height
0.5 font height

As you can see a very large letter spacing doesn't necessarily make your text very readable. The value normal can be used to set the letter spacing back to the default for whatever font you are using if a different value was inherited from a parent element.

<P STYLE="letter-spacing:0.5cm">Large and <SPAN STYLE="letter-spacing:normal">normal</SPAN> spacing.</P>

Large and normal spacing.

To the top

Line height

This property can be used to set the distance between two lines of text, also called leading. The value can be set as a number, which sets the distance between lines to the font size multiplied by that number.

<P STYLE="line-height:2.0;">Semper ubi sub ubi ... periculo deicerentur.</P>

Semper ubi sub ubi. Quone modo nunc, fulve bos? Si hoc non legere potes, tu asinus es. Tua mater tam antiqua ut linguam latinam loquatur. Itaque cum adpropinquarent Britanniae et ex castris viderentur, tanta tempestas subito coorta est ut nulla earum cursum tenere posset.

The value for line-height can also be set in millimeters, centimeters, inches, points, pixels, picas, ex and em, just like the font sizes and letter spacing above. Because these examples take up so much space, I will give only one.

<P STYLE="line-height:8mm;">Semper ubi sub ubi ... periculo deicerentur.</P>

Semper ubi sub ubi. Quone modo nunc, fulve bos? Si hoc non legere potes, tu asinus es. Tua mater tam antiqua ut linguam latinam loquatur. Itaque cum adpropinquarent Britanniae et ex castris viderentur, tanta tempestas subito coorta est ut nulla earum cursum tenere posset.

You can also use a negative number for line-height, which will create overlapping text. You can also use a percentage for line-height, this will create a line distance as a percentage of the font size.

To the top

Text align

The text-align property is used to specify the alignment of text. It can have one of four values: left, right, center or justify.

<P STYLE="text-align:left">Left aligned text</P>
<P STYLE="text-text-align:center">Centered text</P>
<P STYLE="text-align:right">Right aligned text</P>
<P STYLE="text-align:justify">Semper ubi ... periculo deicerentur.</P>

Left aligned text

Centered text

Right aligned text

Semper ubi sub ubi. Quone modo nunc, fulve bos? Si hoc non legere potes, tu asinus es. Tua mater tam antiqua ut linguam latinam loquatur. Itaque cum adpropinquarent Britanniae et ex castris viderentur, tanta tempestas subito coorta est ut nulla earum cursum tenere posset, sed aliae eodem unde erant profectae referrentur, aliae ad inferiorem partem insulae, quae est propius solis occasum, magno suo cum periculo deicerentur.

To the top

Setting link styles

This is what the style sheet for this guide says about colours for links:

A:link {color:black;}
A:visited {color:black;}
A:active {color:red;}
A:hover {color:red;}

The first three lines define the text colour for a link, for a link that has been visited recently (whereby recently depends on preferences set in the browser) and an active link respectively. A link is active if you put the mouse pointer over it an keep the (left) button down. The fourth line is what happens to a link if the mouse pointer is hovering over it, without the button being down.

If you want to use different link styles on your pages you can put something like this in your style sheet:

A:link.one {color:black; font-family:sans-serif; font-style:italic;}
A:link.two {color:green; font-family:serif; font-weight:bold;}
A:hover.two {color:red; font-family:serif; font-weight:bold;}
A:link.three {color:red; font-family:monospace; text-decoration:none;}

In your HTML document you define the links like this:

<P><A HREF="xxx.html" CLASS="one">non-existent file</A><BR>
<A HREF="yyy.html" CLASS="two">another non-existent file</A><BR>
<A HREF="zzz.html" CLASS="three">the last non-existent file</A></P>

non-existent file
another non-existent file
the last non-existent file

Alternatively, you can use a STYLE attribute with every A element.

<A HREF="xxx.html" STYLE="color:black; font-family:sans-serif; font-style:italic;">non-existent file</A>
<A HREF="yyy.html" STYLE="color:green; font-family:serif; font-weight:bold;">another non-existent file</A>
<A HREF="zzz.html" STYLE="color:red; font-family:monospace; text-decoration:none;">the last non-existent file</A>

non-existent file
another non-existent file
the last non-existent file

To the top

Forcing a page break when printing

Style Sheets can be used to force a page break at a certain point when printing. This is how the title of this section is done:

<H2 CLASS="myheader2" STYLE="page-break-before:always;">Forcing a Page Break</H2>

If you look at "print preview" in your browser or print this document you will see that this section always starts on a new page. You can also force a page break after a paragraph or a header. The following will result in another page break at the end of this section:

<P STYLE="page-break-after:always;">Break again after this paragraph...</P>

Break again after this paragraph...

You should be aware, however, that not all browsers support this way of forcing a page break when printing.

To the top

 

Feedback welcome...

Please let me know your opinion about this guide, information you would like to be added or any errors you have discovered. Click here.

 

Open standards...

This site conforms completely to open standards of the World Wide Web Consortium (W3C). Click on the logos to verify that.

HTML 4 logo

CSS logo

 

 

©1995-2017 Jan Weijers, the Netherlands. All rights reserved.
No reproduction by any means or in any language without prior permission of the author.