This module discusses using XHTML's basic document building blocks, and how to have them displayed using some basic styles. Along the way, we'll discuss the important rules for setting up styles.

The first building-block you're likely to need in any document is a heading. Headings are the parts of a document that give people a brief idea of what the document and each of its sections are about. By default, user agents such as Web browsers show headings in larger sizes, and leave more space around them to help them stand out.

Because documents can potentially have several levels of sections and subsections, (X)HTML provides six levels of headings:

(The headings illustrated here are not rendered using the browser defaults. Instead, a stylesheet defines each heading's size, color, and spacing. Applying styles is discussed in t he next section.)

Most text in any document is found in paragraphs, which begin with the tag <p> and end with </p>. Within a paragraph, the text may start on a new line by adding a break entity: <br />. This is illustrated here:

There are a couple of common circumstances in which text requires slightly different treatment. One is the block quote <blockquote>, and the other is preformatted text, <pre>. These are illustrated here:

<pre>'How doth the little crocodile
Improve his shining tail,
And pour the waters of the Nile
On every golden scale! 
'How cheerfully he seems to grin,
How neatly spread his claws,
And welcome little fishes in
With gently smiling jaws!'</pre>

'How doth the little crocodile
Improve his shining tail,
And pour the waters of the Nile
On every golden scale!

'How cheerfully he seems to grin,
How neatly spread his claws,
And welcome little fishes in
With gently smiling jaws!'

There are many other kinds of blocks in (X)HTML. These are covered in other modules in this series, but the most useful are listed here.

• Head and Body - two blocks that all (X)HTML documents contain. Body contains all the other blocks of the document.
• Lists - with automatic numbering or bullets (like this list)
• Tables - in which rows and columns allow information to be displayed more clearly, and Web pages can be organized
• Divisions - general-purpose container, usually used to assign styles to large areas of a document.
• Code - for displaying sections of program or (X)HTML code
• Variable - for designating programming variables
• Citations - to set apart bibliographic and similar listings
• Definitions - to create lists of terms and their definitions
• Samples - similar to code, for displaying examples of code

Since so many kinds of block are available, you might think everything in (X)HTML is a block. Not so!

• Blocks can contain other blocks, and they can also contain inline elements;
• Inline elements can't contain anything else. Text and images are the most frequent examples.

Some of the most useful non-block entities are:

• Strong - used to display text that is more important, usually shown in boldface type.
• Emphasis - used to emphasize words of phrases, shown by default in italic.
• Span - a general-purpose inline container, usually used to apply styles to inline elements such as individual words or phrases in a paragraph. Here's an example:

Styles can be put into (X)HTML files in any of three places:

• External: into a separate file, which can be used by more than one (X)HTML document;
• Internal: into the Head section of a document;
• Inline: into (X)HTML tags. We'll be using this location to start with.

Here's an illustration of a style declaration:

When you set up a style, you are "declaring" how you want something to appear in the browser. This is called a declaration. The illustration shows this declaration:
font-family: Verdana, Arial, Helvetica; color: blue;

Declarations are made up of one or more rules, each of which says how some property will look. Each rule ends with a semi-colon ;
There are two rules in the illustration. The simplest one is this:
color: blue;

Rules start with the name of the property being set - in this case, first the font-family, then the color. Property names have no spaces in them, and end with a colon :
There are many valid properties; these are listed in the CSS specifications at W3C: http://www.w3.org/TR/1999/REC-CSS1-19990111#css1-properties

Each property has certain values that can be assigned to it. How these values work depends on the individual property, but the general idea is...

• if there is more than one value, values are separated by a comma ,
• if a value has space(s) in it, the value must be in quotation marks "

This rule illustrates both these syntax constraints:

font-family: Georgia, "Times New Roman", Times, serif;

Here are some useful properties and values to make rules for displaying blocks of (X)HTML. this doesn't attempt to be complete, it just gives you some useful tools.

Background Color

• Property: background
• Values: Any color value. These can be:
  • A defined color name. W3C suggests sixteen of these:
    aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow
  • A hexadecimal color value, like #0099cc
    See module W22e for details on color values in hexadecimal.
• Example:
  <h1 style="background: purple;">About Cats</h1>

Border

• Property: border
• Values: you may choose any or all of these border values:
  • width: thin, medium, thick or a width (in pixels)
  • style: dotted, dashed, solid, double, groove, ridge, inset, outset
  • color: any color value
• Example:
  <h1 style="border: medium groove teal;">About Cats</h1>

Text Alignment

• Property: text-align
• Values: left or right or center or justify
• Example:
  <h1 style="text-align: center;">About Cats</h1>

Most Web pages feature lots of text. Here are some ways of making text look the way you want it to:

Font Family

• Property: font-family
• Values: any valid font names.
  • Browsers look for fonts on the individual users' computers. Since it's unlikely that all users have the same fonts, it's smart to put a list of font options. When more than one font is listed, separate them with commas.
  • Browsers will try to find a font in the order you list them, so put your favorite choice first.
  • End the list with a generic font type, such as serif or sans-serif.
  • If a font name has spaces in it, the whole name must be in quotes (single quotes if inside double quotes; double quotes if inside single quotes)
• Examples of practical selections of font names:
  <h1 style="font-family: Verdana, Helvetica, Arial, sans-serif;">About Cats</h1>
  <p style="font-family: Georgia, 'Times New Roman', serif;">Cats are warm, soft, and cuddly, but can also be mischievous.</p>

Font Size

• Property: font-size
• Values:
  • size in pixels
  • percentage of normal size
• Example:
  <h1 style="font-size: 30px;">About Cats</h1>
  <p style="font-size: 90%;">Cats are warm, soft, and cuddly, but can also be mischievous.</p>

Bold

• Property: font-weight
• Values: bold, bolder
• Example:
  <p style="font-weight: bold;">Cats are warm, soft, and cuddly, but can also be mischievous.</p>

Italics

• Property: font-style
• Values: italic
• Example:
  <p style="font-style: italic;">Cats are warm, soft, and cuddly, but can also be mischievous.</p>

Text Color

• Property: color
• Values: color: any color value
• Example:
  <p style="color: brown;">Cats are warm, soft, and cuddly, but can also be mischievous.</p>