// Copyright Allen & Company 2003 - all rights reserved
if (Ln>=2) {s=Xc+"<span>
User-definable text-level tag. Closing tag </span>"+Xk+"(a) <span> has no intrinsic style features
It has <span>no effect</span> on its own.
It has no effect on its own.
A <span> has no style features: you add your own.
(b) Add color rule
Add <span style=color:red>red</span>colour.
Add red colour.
You can add several rules in a style= section, see for example: "+Xo+"('font-family')'>font-family, "+Xo+"('font-weight')'>font-weight, and "+Xo+"('font-size')'>font-size. If a rule includes Space s you must use "quotes" around it (see example under <"+Xo+"('div')'>div>). Rules can be grouped in a re-usable "+Xo+"('Class')'>Class.
Rules that would make sense only in a block context, such as "+Xo+"('text-align')'>text-align, are ignored in a text <span>.
The corresponding block-level tag is <"+Xo+"('div')'>div>."+Xn;Cn["span"]=s}
if (Ln>=2) {s=Xc+"<div>
User-definable block-level tag. Closing tag </div>"+Xk+"(a) <div> has no intrinsic style features
<div>
This text appears in a block.
</div>
This text appears in a block.
The enclosed text is rendered in a block: it begins on a new line; text following the block starts a new line. There are no built-in style features, you add your own.
(b) Add "+Xo+"('text-align')'>text-align rule
<div style=text-align:center>
This is centred.
</div>
This is centred.
The added rule centres the text in the <div>.
(c) Add "+Xo+"('font-family')'>font-family rule
<div style="font-family:Times New Roman">
Rendered in Times New Roman font.
</div>
Rendered in Times New Roman font.
If the rule includes Space s you must use "quotes" around it, as shown. You can add several rules in a style= section. Separate each rule with a ; (semi-colon). Rules can be grouped in a re-usable "+Xo+"('Class')'>Class.
The corresponding text-level tag is <"+Xo+"('span')'>span>."+Xn;Cn["div"]=s}
if (Ln>=2) {s=Xc+"<style>
Encloses CSS style rules. Closing tag </style>
(a) Set <"+Xo+"('body')'>body> defaults
<head>
<style>
body{font-family:arial, sans-serif;
font-size:0.8em;
color:green;
background-color:wheat}
</style>
</head>
The <style> tag goes in the <"+Xo+"('head')'>head>. This example sets defaults for the <"+Xo+"('body')'>body> tag with "+Xo+"('font-family')'>font-family, "+Xo+"('font-size')'>font-size, "+Xo+"('color')'>color and "+Xo+"('background-color')'>background-color rules. These rules will apply to the whole of the current document.
(b) Define a re-usable "+Xo+"('Class')'>Class
<head>
<style>
.headings{font-family:\"Times New Roman\";
font-size:1.5em;
color:black;
text-align:center}
</style>
</head>
Defines the re-usable "+Xo+"('Class')'>Class: headings with rules for "+Xo+"('font-family')'>font-family, "+Xo+"('font-size')'>font-size, "+Xo+"('color')'>color and "+Xo+"('text-align')'>text-align (suitable for headings). This "+Xo+"('Class')'>Class could be used throughout the document (as the style attribute of a <"+Xo+"('div')'>div> tag)"+Xn;Cn["style"]=s}
if (Ln>=2) {s=Xc+"Class
A named group of Cascading Style Sheet rules. The choice of name is up to you."+Xk+"(a) A keystroke Class
<head>
<style>
.key{background-color:silver;
color:white;
font-family:verdana}
</style>
</head>
<body>
Press the <span class=key>Return</span> key.
</body>
Press the Return key.
A simple Class to refer to keys you might press. Note that vital Period needed in the Class definition .key in the <"+Xo+"('style')'>style> section in the <"+Xo+"('head')'>head>. The choice of a name for the Class (key in this case) is up to you.
(b) A Class to centre main headings
<head>
<style>
.heading{text-align:center;
color:red;
font-size:1.5em}
</style>
</head>
<body>
<div class=heading>Main headings</div>
</body>
If a Class is used for your headings, then you can change them all at once merely by changing the Class definition. It also helps to maintain a uniform appearance of pages.
See also <"+Xo+"('div')'>div>, <"+Xo+"('span')'>span>."+Xn;Cn["Class"]=s}
if (Ln>=2) {s=Xc+"font-family
Cascading Style Sheet rule to set font family."+Xk+"(a) Changing font inline
You can change
<span style="font-family:Times New Roman">A Font</span> used within a line of text.
You can change A Font used within a line of text.
Use "quotes" around any rule that contains Space s.
(b) Specify font for entire document
<head>
<style>
body{font-family:"Book Antiqua",serif}
</style>
</head>
Text in the <"+Xo+"('body')'>body> will be shown in Book Antiqua. If it's not available, any available serif font is used. A serif font is often the default anyway, but it's better to be specific. Some Browsers don't need "quotes" around rules with Space s when they're in a <"+Xo+"('style')'>style> section of the <"+Xo+"('head')'>head>, but it's safer to use them.
See also "+Xo+"('font-size')'>font-size, "+Xo+"('font-style')'>font-style, and "+Xo+"('font-weight')'>font-weight."+Xn;Cn["font-family"]=s}
if (Ln>=2) {s=Xc+"font-size
Cascading Style Sheet rule to set font size."+Xk+"(a) Changing font size inline
You can change
<span style=font-size:1.2em>the size</span> of the font used.
You can change the size of the font used.
Using em-heights changes the font relative to the default size in force. This is better than specifying an absolute size, since it leaves control with the user.
(b) Specify size for entire document
<head>
<style>
body{font-size:1.2em}
</style>
</head>
Text in the <"+Xo+"('body')'>body> is displayed at 1.2 times the size the user has set by default.
See also "+Xo+"('font-family')'>font-family, "+Xo+"('font-style')'>font-style, and "+Xo+"('font-weight')'>font-weight."+Xn;Cn["font-size"]=s}
if (Ln>=2) {s=Xc+"color
Cascading Style Sheet rule to set text colour."+Xk+"(a) Add to another tag
Change
<b style=color:red>text colour</b>
of a bold tag
Change text colour of a bold tag.
The bold text is shown in red. The rule must be spelt as in US English: color. To change the bold tag everywhere in the document, use a b{color:red} rule in a <"+Xo+"('style')'>style> section in the document <"+Xo+"('head')'>head>.
(b) Blocks of coloured text
<div style=color:coral>
All text in the block is shown in coral colour.
</div>
All text in the block is shown in coral colour.
To change text colour for the whole document, use a body{color:coral} rule in a <"+Xo+"('style')'>style> section in the document <"+Xo+"('head')'>head>.
See "+Xo+"('background-color')'>background-color rule to change background."+Xn;Cn["color"]=s}
if (Ln>=2) {s=Xc+"background-color
Cascading Style Sheet rule to set background colour."+Xk+"(a) Add to another tag
Change
<b style=background-color:red>background</b>
of a bold tag
Change background of a bold tag.
The bold text is shown in red background. The rule must be spelt as in US English: background-color. To change the bold tag everywhere in the document, you can use a b{background-color:red} rule in a <"+Xo+"('style')'>style> section in the document <"+Xo+"('head')'>head>.
(b) Blocks of background colour
<div style=background-color:yellow>
All text in the block has a yellow background.
</div>
All text in the block has a yellow background.
We use this rule to show our rendered examples in this colour, and the yellow overrides it, of course.
To change text colour, see the "+Xo+"('color')'>color rule."+Xn;Cn["background-color"]=s}
if (Ln>=2) {s=Xc+"text-align
Cascading Style Sheet rule to set text alignment."+Xk+"(a) Centred text
<div style=text-align:center>
This is centred.
</div>
This is centred.
Centred text is useful for headings and footnotes.
(b) Left-aligned text
<div style=text-align:left>
This is left-aligned.
</div>
This is left-aligned.
This is the default alignment for most purposes.
(c) Right-aligned text
<div style=text-align:right>
This is right-aligned.
</div>
This is right-aligned.
May be useful for some specialised layouts.
(a) Justified text
<div style=text-align:justfiy>
Only you can hear and see, behind the eyes of the sleepers, the movements and countries and mazes and colours and dismays and rainbows and tunes and wishes and flight and fall and despairs and big seas of their dreams.
</div>
Only you can hear and see, behind the eyes of the sleepers, the movements and countries and mazes and colours and dismays and rainbows and tunes and wishes and flight and fall and despairs and big seas of their dreams.
Justfied text is harder to read than left-aligned. With long words, peculiar gaps can result (for an example, see <"+Xo+"('p')'>p>). The quotation used above is from Dylan Thomas: Under Milk Wood."+Xn;Cn["text-align"]=s}
if (Ln>=2) {s=Xc+"font-weight
Cascading Style Sheet rule to set the font weight."+Xk+"(a) Changing font weight inline
You can change
<span style=font-weight:bold>the weight</span> of the font used.
You can change the weight of the font used.
You can also use numeric weights (from 100 to 900). 400 is normal and 700 is bold (in most cases, these are the only two weights rendered differently).
(b) Equivalent HTML tag
The <b>HTML Bold</b> tag is an alternative.
The HTML Bold tag is an alternative.
With the simple <"+Xo+"('b')'>b> tag available, you would normally use font-weight only in a Class.
See also "+Xo+"('font-family')'>font-family, "+Xo+"('font-size')'>font-size, and "+Xo+"('font-style')'>font-style."+Xn;Cn["font-weight"]=s}
if (Ln>=2) {s=Xc+"font-style
Cascading Style Sheet rule to set normal/italic font."+Xk+"(a) Changing font style inline
You can change
<span style=font-style:italic>the style</span> of the font used.
You can change the style of the font used.
The styles available are normal, italic, and oblique (in most Browsers, this is equivalent to italic).
(b) Equivalent HTML tag
The <i>HTML Italic</i> tag is an alternative.
The HTML Italic tag is an alternative.
With a simple, equivalent HTML tag available, you would normally use font-style only in a "+Xo+"('Class')'>Class. For most fonts, an Italic rendering is less easy to read.
See also "+Xo+"('font-family')'>font-family, "+Xo+"('font-size')'>font-size, and "+Xo+"('font-weight')'>font-weight."+Xn;Cn["font-style"]=s}