The Virtual World
In-line Styles :: Embedded Styles :: I.D.tags :: Links :: DIV :: SPAN :: Further Reading
Chapter Index
Introduction
History
Getting Connected
Browsers
Copyright
Search
Engines
HTML
Linking documents
Images
Newsgroups
Tables
Forms
Frames
Photoshop
Page and Site Design
Publishing
Javascript
Style Sheets
Introduction
We have style sheets in desk top publishing packages such as PageMaker and QuarkXPress. They have even made their way into the more sophisticated word processing packages. However, until recently we had no way of using them on the web.
A style sheet is a collection of definitions. You may want all your headings to be 20 point Helvetica, bold and coloured red. Make a style definition along those lines, and all you then have to do is apply that style definition to all the parts of your text that you want to display as headings. The point is, you apply the style in one go, rather than a selection of individual bits of formatting.
It gets better. Suppose you want to change your mind at a later date. All you have to do is change the style definition. Maybe you want all your headings to be slightly bigger, say 24 point, but not bold, and you want the red to be lighter. You don't have to go through all your text finding headings and changing their formatting, all you do is re-write your style definition and all the headings change.
You can define not only the font, style, and size, but also the margins of your text, and whether it is enclosed in a border, and whether there is a background colour.
There is, however, one snag (there usually is): all of this is only visible in version 4.x browsers. Internet Explorer version 3.0 recognises styles, but not in all their glory.
These styles are known as Cascading Style Sheets (CSS for short). Let's look at how we create them. There are, as usual, several ways of implementing CSS.
In-line Styles
We can create them in-line, i.e., as we go along we apply style attributes to our text. To do this we add the STYLE attribute to any HTML tag. An example is given below:
<H1 STYLE="color:red; font-family:helvetica; font-size:24pt">This is a main heading</H1>
The actual text is in black, the code in green. We have given the style a name, and have given that style several attributes. Each set of attributes is closed with a semi-colon. The name of each attribute and its characteristic is separated by a colon.
You can use style tags in conjunction with many HTML tags. You will probably use it mainly on the heading tags and the paragraph tag.
This usage of styles is the least powerful. The whole point of styles is that you can change them from a central location and their effect then becomes either document wide, or site wide.
