Cascading Style Sheats (CSS) for Beginners - Part 3

Using CSS for Text Formatting

For the purposes of this part of the tutorial I am just going to assume you have absorbed the basic rules and terminology from the previous part - if you haven't, go back and review it now!

While CSS can control just about every aspect of the style and layout of your pages we are going to concentrate for now on the text only as this is the most useful and easy to apply aspect.

We are all accustomed to using different font, in various sizes, colors and combinations when designing our pages. The difficulty in pages where CSS are not used is that making a small change to, say the size of Heading 3 or the colour of visited links can mean having to go through each page individually. Where linked style sheets are used one page - the style sheet - is all that needs to be changed.

Exercise

1. Create a new web in FP. When it is open click File>New Page. Choose the 'Style Sheets' tab and then choose 'Normal Style Sheet'.

2. Paste the style sheet below into that page and save the file as 'site.css'.

P {font-family: Arial, Helvetica, sans-serif; font-weight: normal; color: blue;}

H1 {font-family: Verdana, Helvetica, sans-serif; font-weight: bold; color: green;}

H2 {font-family: Verdana, Helvetica, sans-serif; font-weight: bold; color: red;}

H3 {font-family: Verdana, Helvetica, sans-serif; font-weight: bold; color: #CC0099;}

A:link {text-decoration: underline; color: #ff3399;}

A:hover {text-decoration: none; color: #990000;}

A:visited {text-decoration: underline; color: #3399FF;}

3. Now insert the following into the section of a normal page in an FP site.

<link rel="STYLESHEET" type="text/css" href="site.css">

This is the method used to link a HTML file to a style sheet.

4. In normal view in this document type three headings with short paragraphs below them - any old rubbish will do! Highlight the headings in turn and select 'Heading 1' from the drop down menu for the first, 'Heading 2' for the second etc. Now create a link or two in your paragraphs. Save this page.

5. Pretty colourful eh? Now lets have a look at what is happening. This style sheet defines seven rules, one each for the HTML tags

,

,

,

and three for three separate classes of : , and

You can have a look at the stylesheet and the sample page and copy them to practice with if you like.

Each of the rules defines - using selectors and definitions - the font family, font weight and font style in which any text surrounded by those tags should be rendered on the page.

Play with this a bit, changing things in the style sheet to see the effect it has on your page.

Inheritance

You may have noticed that no font family or font weight is specified for any of the classes of a. This is because the links are appearing within a paragraph and anything that is specified for the

or paragraph tags will apply to them automatically. This is referred to as 'inheritance' and the

tag in this case is referred to as the 'parent tag'.

The only selectors that need to be defined in this case are those which either do not appear in the parent tag or which differ from the parent tag.

Linked or Embedded?

In the exercise above the style sheet is a linked one. You could just as easily paste exactly the same sheet between tags in the head of a page. However then it would only apply to that page and would need to be individually included in each page to which it applied. It would also need to be changed on each page if you wanted to vary the style of any tag. This means you would miss out on the real power of CSS.

It is best practice to use a linked style sheet for your web saving embedded ones for variations that you only want included in one page or in a group of pages. Remember the cascade: an embedded sheet will override a linked one.

Selectors for Text Style

We are going to look in detail at each of the selectors commonly used for text, how they can be applied and at the browser compatibility issues that may affect them. During this the rest of this tutorial you might like experiment with some of these things by making alterations to the CSS file you created earlier and trying them out on the page.

A Note About Browser Support...

As a general rule you can assume that versions of NN prior to version 4 and of IE prior to version 4 have no support for CSS. Opera, from version 3.6, fully supports all these properties. Things are further complicated by the fact that there are different versions of each browser for Windows and Mac and these can sometimes vary in their support of CSS. That said you will see that, provided you take care, all these properties can be applied in a browser friendly way.

Ok lets go with the various selectors!

1. font-size

This is probably the property that causes most angst so we will take quite bit of time with it. You will note that I have not actually included it in any of the rules in the style sheet above. This is because I want you to experiment - add in bits to that style sheet as we go through this section and see how they behave.

Declarations: Font size can be defined in a number of different ways, which broadly divide into three methods.

Fixed Measurements - These could be:
- point size (pt)
- pixels (px)
- millimeters, centimeters or inches (mm, cm, in)

eg

h1 {font-size: 15px;}
h2 {font-size: 12pt;}

Using a fixed size had the advantage that you are reasonably sure how your text will appear to the end user. Probably the best choice from among these is pixels. Inches and centimeters etc are not at all reliable and should be avoided.

All suffer the same problems - there is varying cross browsers support and, more importantly, they take away the users choice in how text is rendered. We will see later how other methods can give the user increased choice.

Exercise: Try adding 'font-size:12 pt' to the p rule in the sample style sheet to see its effect. You can also add various sizes to each of the header rules.


Words - xx-small, x-small, small, medium, large, x-large, xx-large.

These are very dodgy and best avoided altogether! In most version of NN anything below small is unreadable. In any case they are a fairly blunt tool.

Relative Sizes - You can use relative sizes as either percentages or ems.

Percentages of what I hear you ask? Well there are two option here:

1. Define a base size:
So for example you could define text size using the following rule for

body {text-size:12 pt}

And these rules for heading 1 and paragraphs respectively

h1 {text-size: 150%}
p {text size: 90%}

In this case heading 1 text would be rendered larger than 12 points, paragraph text smaller.

2. Allow the user's browser setting to be the base size:
In this case you simply use percentages in your rules without defining a measured size anywhere. This is a very elegant solution as it means that if a short sighted user has their browser set to render large text, you will acknowledge this just as you will the preference of someone who has, by choice set their browser default to small.

About 'ems'
Ems are a measurement of the letter capital 'M' in the font size chosen by the user, so again using ems accommodates the users choice.

You can express the proportional size you wish the font to appear in as a fraction of ems - eg 0.5 ems or 1.2 ems. Ems take some getting used to but can allow very fine gradation of sizes.

Exercise: Try adding percentage values to some of the rules in the style sheet.

Note the following important points:

• Size is inherited. So for example if you set 'p' text to 80% and also specify 80% in the 'a' rule also your link text will be smaller than text in the surrounding paragraph. It also means it is important that tags are closed, which unfortunately FrontPage sometimes neglects to do. So if you had a series of paragraphs, using p text at 80%, and the
  tags are missing, each paragraph will be 80% of the previous one until the text pretty quickly becomes unreadable.
  
• The default browser settings, which many people never change, are different in NN and IE: IE default is medium, NN default is small. Thus you many be surprised to see that your pages look different when you view them in different browsers. Do not panic about this, you can never have absolute control over the way your pages are seen. The point is that by using percentages of what the viewer is accustomed to seeing all users should be comfortable with the way your page is rendered.
  
• If undefined: Any size applied to a parent tag will apply (ie the parent style will be inherited).
  If you do not define size at all in your style sheet then the user's browser default sizes will apply. This may seem desirable and many purists would say it is as the web is intended to be. But the fact is that people do not often choose to configure their browser settings and they are accustomed to looking at pages where text size has been defined in some way. Using percentages as least acknowledges the efforts of those who, for one reason or another have chosen to use custom settings.
  
• Browser Support: Patchy if measurements are used, best for pixels; poor where words are used. In general pretty good in the case of percentages.
  

2. font-family

Declarations: Any font family name can be used and any number of alternatives suggested. It is good practice to have as a final alternative a generic family, eg serif or sans-serif.

Example: p {font-family: Americana, Verdana, Helvetica, sans-serif;}

If undefined: Any style applied to a parent tag will apply (ie the style will be inherited). If none is available then the users own browser default setting will apply.

Browser Support: Fully supported by NN 4.0+ and IE 4.0+

3. font-style

Declarations: normal, italic. Example:

h3 { font-style:italic}

If undefined: Any style applied to a parent tag will apply (ie the parent style will be inherited). Otherwise 'normal' is assumed.

Browser Support: Fully supported by NN 4.0+ and IE 4.0+

4. font-weight

Declarations: There are two ways in which font weight can be defined:

a) normal, bold, bolder, lighter
bolder and lighter must be applied with reference to a parent with the property 'bold' applied.
b) Using numeric values: 100, 200, 300, …..800, 900. (Normal text has a value of 400).
These values can only be used where the font has a range of weight values built in. Relatively few fonts have - arial and veranda do.

Example:

p { font-weight:bold }
a.link {font-weight:bolder }

Where supported this would result in link text in a paragraph being bolder than the main paragraph text.

If undefined: Any style applied to a parent tag will apply (ie the parent style will be inherited). Otherwise 'normal' is assumed.

Browser Support: Both 4.0+ browsers fully support 'normal' and 'bold'. After that it gets a little complicated!

• Netscape Navigator prior to version 4.7 does not support 'bolder' and 'lighter'. 100-500 is all drawn as normal. 600-900 is all drawn as bold.
• Internet Explorer for Mac prior to 5.0 will render 100-400 as normal, 500-900 as all bold.
• Internet Explorer for Windows prior to version 5.5 will render 100-500 as normal, 600-900 as increasingly heavy.

5. text-decoration

Declarations: none, underline, overline, line-through, blink

Example:

a:link { text-decoration: underline;}
a:hover { text-decoration: none;}

which would cause the underline on the link to disappear when the link is moused over.

If undefined: In most cases none is assumed; in the case of the selector a (which applies to everything within tags, ie links) underline is assumed.

Note that this value is not inherited.

Browser Support: These features are pretty well supported with the exceptions that IE does not support 'blink' and NN prior to 4.7 does not support 'overline'. Also note that 'a:hover' is not supported by NN, but using it will not cause a problem in that browser.

6. text-transform

Declarations: none, capitalize, upper-case, lower-case

What they do:
1. Capitalize capitalizes first character of each word
2. Uppercase capitalizes all characters of each word
3. Lowercase uses small letters for all characters of each word
4. None is self explanatory!

Example: h1 { text-transform:capitalize }
This Will Cause Each Word In Heading 1 To Be Capitalized

If undefined: Any style applied to a parent tag will apply (ie the parent style will be inherited). Otherwise 'none' is assumed.

Browser Support: Fully supported by NN 4.0+ and IE 4.0+