|
How web page are displayed and act is achieved by specifying the layout
with HTML tags. HTML is limited in how flexible such layouts can be. To
add more power to controlling layout of web pages the World Wide Web
Consortium (w3C) in 1996 added cascading style sheets to the web
designer’s code resources. A second more advanced version arrived in
1998. As they are a fairly recent addition, only Netscape V4 and above or
Internet Explorer V4 and above support them.
There are many things you can do with a Cascading Style Sheet (CSS).
- Control all your style descriptions from one place as styles
- Storing all the style tags in one place makes HTML files smaller and
load faster
- Define font sizes and other attributes to a pixel size to control
the layout of the text
- Define your own styles for links to control colour, hover, and
underline effects
- Define and use layers to allow one block of text to lay over another.
There are two ways you can create style sheets. If you just want the
CSS definition to affect a single page then insert it in to that pages <head>
section i.e. between the <head> and </head>
commands. If you want to have your CSS definition work on multiple pages
then you put it in its own text file with a .css suffix. You then refer to
this from web pages.
The basic syntax for a CSS definition is as follows:
Selector { property: value }
You can also place multiple property settings in a single statement
separated by semicolons:
Selector { property1: value1; property2: value2 }
The Selector is usually an HTML tag such as ‘H1’ or ‘P’ . The
property/value pairs are where you specify the actual styles.
The first example modifies the H1 header tag to align the header to the
centre of a web page and to colour it blue. Whilst you can modify almost
any HTML tag, you cannot change its basic function. For instance, if you
try to make an H1 header the same size as body text, it will be ignored.
As this example is only for use in a single page, it is embedded in the
<head> section rather than kept in a separate file.
<HEAD>
<STYLE
TYPE=”text/css”>
H1 {
text-align: center; color: blue }
</STYLE>
</HEAD>
To have the styles available on multiple web pages allows changes to be
performed in one file and this this applies to all linked pages. To make
use of the external .css file, you need to tell your web pages about the
file. Assuming we had a style sheet called mystyles.css, this would be
done by inserting the following line in the page’s <head> section:
< LINK REL="stylesheet" TYPE="text/css"
HREF="mystyles.css" >
The code in the mystyles.css to perform the same task
would be:
<STYLE
TYPE=”text/css”>
H1 {
text-align: center; color: blue }
</STYLE>
Note that FrontPage and other web editors can insert this code for
you. FrontPage used the Format Style Sheet Links
menu choice.
This is a very powerful technique. If you had a 40 or even 400 page web
site, you could have a separate style sheet controlling the layout of
every page. If you decide later on that you preferred red text instead of
blue, you only need to change the code in a single file to change the look
of all 400 pages. A huge time saving for just a little planning ahead or
to allow you to quickly change the look of large areas of the web site in
a matter of minutes.
You can apply the same style to several related tags via grouping. This
saves repetitive lines of code and speeds up page loading. This example
changes all the headers styles so they generate text in a red sans-serif
font.
H1, H2, H3, H4, H5, H6 { color: red; font-family:
sans-serif }
As your pages may be viewed using older browsers that do not understand
style sheets, you need a way to make the older browsers ignore the extra
code. This is done by wrapping HTML comments around your CSS declarations
as follows:
<STYLE
TYPE="text/css">
<!--
H1 {
text-align: center; color: blue }
-->
</STYLE>
This way, any non CSS compliant browsers should simply ignore all the
extra CSS code and ensures your site is more compatible to a wider range
of browser.
HTML has always been a bit limited in terms of text control. Using
style sheets gives much greater control of all of text presentation.
The font-family property lets you select which font will be used to
display text. You can specify a number of fonts and if the first one
isn’t available, the second one will be used and so forth until the list
is used up. This allows you to have a controlled degradation of quality in
your page’s look based on what fonts the reader's
system actually has installed. An example of this property in use is
listed below.
BODY { font-family: Times,
TimesRoman, serif }
The fonts are listed in the preferred order. Note also that where
multiple fonts are specified, if a particular character isn’t available
in a particular font, the browser will try to extract it from the next one
in the list. If you are specifying a font which has spaces in its name,
you need to surround that name in quotes e.g.
H1 { font-family: “Courier
New”, Courier, monospace }
The font-style can take the following values: normal, italic, and
oblique. Oblique is very similar to italic. Using font-style is simple:
H1 { font-style: italic }
The font-variant property can be either normal or small-caps.
Small-caps are basically scaled down versions of normal caps such that
they are the same size as lower case characters.
H1 { font-variant: small-caps }
The font-size property, not unsurprisingly specifies the size of the
font. There are several different ways to do this.
You can specify absolute size in points or pixels i.e. 7pt, 14pt etc.
or 100px, 80px and so on.
You can specify relative sizes by using the keywords xx-small, x-small,
small, medium, large, x-large and xx-large. You can also use percentages
such as 30% or 66%. Finally, you can use ems e.g. .5em, 1.5em, 3.0em etc.
The relative sizes are relative to the parent font. You would normally set
this base size in the <body>
section of your page.
You should be aware that Netscape does not
recommend using pixel sizing of fonts so your pages may not come out
correctly on the Netscape Navigator browser. It’s probably best to test
before you upload your pages.
An example of font-size in action is:
H2 { font-size: 36pt }
The font-weight property allows you to select the following weights:
normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800,
900
The first few are obvious. The numeric ones are simply a progression of
heavier weights where each one is guaranteed to be darker than the
previous. Whilst you can use any of values, be aware that normal and 400
are synonymous as are bold and 700.
Body { font-weight: 500 }
The font property allows you to combine several of the above properties
in to one line e.g.
H1 { font: bold 36pt Impact,
"New SchoolBook", sans-serif }
As you can see, there is a big improvement in the font control. Let’s
move on to the text features.
These two specify the spacing between letters and words. The valid
values here are any length values including em, px, pt and so on. An
example that would control the layout of paragraphs is as follows:
P { word-spacing: 1.0em;
letter-spacing: 10px; }
Text-decoration supports several values, not all of which are
particular useful. These are normal, underline, overline, line-through,
and blink. The latter is particularly annoying so use it sparingly, if at
all!
H3 { text-decoration: underline
}
Most of these possibilities will be rarely used outside scientific or
maths pages where things like chemical formulae are being discussed.
However, if you have such a need, you can choose from baseline, sub,
super, top, text-top, middle, bottom and text-bottom.
This property lets you change all the text so that it appears as either
capitalize, uppercase, lowercase or none. As most people generally type in
their text how they want it to appear, I can’t imagine this gets used
very much. However, exactly how the browser changes the text from
uppercase to lower case etc is dependent on the language used so perhaps a
site that performs language translation from English to Urdu
might have a use for such a feature.
H4 { text-transform: uppercase }
This is a far more familiar feature. You can control how the text is
aligned horizontally much as you would in a word processor. The valid
options are left, right, center, and justify. Note the US spelling of
center.
H1 { text-align: Center }
The text-indent property controls how much (if any) the first line of a
paragraph is indented. The values can be any of the usual lengths and
percentages such as ems.
P { text-indent: 3em }
This allows you to set the spacing in-between lines. It works
well on paragraphs but can be problematic elsewhere. You cannot use
negative values to try to overlay text! An example is:
P { Line-height: 80% } |
