raymond yu web masthead

4:50:27 

Monday, December 11, 2017

Style Sheet on the Web
5th September, 1997.

Imagine this scenario...

You are responsible for maintaing a web site, say your personal site, with a modest 10 web pages. Trying to keep all these pages with a uniform look is not easy. It is not technically complex, but it is time consuming and mandane. Suppose you want to change all heading 1 (ie. those tag with <H1></H1>) to red for instance, you would need to go through each and every page to alter the HTML code.

And what if your want to change the headings to a different font, size and color. To further improve your presentation you may choose to create an indented paragraph effect. Although these improvement can be accompalish using plan HTML the very thought of having to go through each and every page to make the tedious modifications is not a pleasant one. With the help of web authoring programs this task is made easier but is still rather inefficient.

Astyle sheet streamlines the process: just change the style sheets and all the web pages that rely on that style sheet will now display the new style. Simple.

Style Sheet: the Advantages

Most people are familar with style sheet on a wordprocesor. Those that have use style sheet before will no doubt agree that it greatly streamlines work in wordprocessing. It saves time and effort. It is a tool that any serious writer/ publisher cannot do without. If style sheet is a great for normal wordprocessing, it is absolutely and undeniably essential for web publishing.

Like a style sheet on a word-processor, style sheet on the web allows you to specify how the text, the headings, paragraphs, etc will appear. Style sheet allows you to modify the presentation of documents without the need to labourously add new HTML tags. It gives you the convenience of defining the formatting instruction once, instead of manually applying it to all the elements on each of the pages in your site. For a large sites this would save a lots of time.

A site that is visually uniform and continuous is now a easily manageable reality with style sheet.

Style sheet will also speed up the preformance of your site. By grouping style definitions in one file, it will make your web pages smaller. And if you use a single style sheet for your site that file will only be downloaded once. The overall effect is a much quicker download time.

This article aim to introduce you to the basic syntax of style sheet. Note that the following assumes you have some familiarity with the basic elements of the HTML language.

Your First Simple Style Sheet

To illustrate how simple it is to create a style sheet take a look a the following three lines:

<STYLE TYPE="text/css">
H1 {color: RED}
</STYLE>

You probably have guessed already, this effect the change mention in the above scenario. All heading 1 (ie. those marked with the <H1></H1> tags) will be now be shown in RED.

A word on the termology. The line H1 {color: RED} is referred to as a "rule". A rule is a style definition. The part in curlly bracket {} is called a "declaration".

The declaration is made up of one or more properties. In the above example, color is a property. Think of property as a characteristic of the HTML tag that you are defining. The word RED is the value of the property in this case.

Notice that the syntax is:

property name : the value

If there are more than one property, each property is separated by a semicolon (;) as in subsequent examples.

How to Attach a Style Sheet?

There are two main ways of attaching a style sheet to your HTML document.

Embedding

This involves the use of a new HTML container tag as in the above example: <STYLE></STYLE>. This typically goes between the <HEAD> container and the <BODY> tag of the HTML file.

So what is the TYPE="text/css"? This is information for the brower so that it knows the type of style sheet you are using. Yes, there are more than one type of style sheets. One type, the type that will be illustrated in this article, is called the CASCADING STYLE SHEET (CSS).

The other type is called JAVASCRIPT STYLE SHEET. This will not be covered here. Of course, as the name suggest this latter approach required the use of javascript. It is stilled based on CSS, the only difference is the addition of objects that permit you to manipulate the style sheet elements with javascript. This introduces an element of interactivity to the style sheet.

2. Linking

Embedding is nice and simple if you only want to apply the style to one web page. If, however, you want to apply the style to more than one page Linking is a better option. This offers you the real benefit of style sheet: the ability to define the style once for all your web pages.

This is done through a <LINK> tag. An example would be:

<LINK REL=STYLESHEET HREF="http://url.address.of.the.style.sheet.file" TYPE="text/css">

This tag tells the brower to go to the url address specified to download the style sheet file. The principle is the same as downloading an image file from another source. Again, you need to specify the type using the same syntax in the embedding approach.

The target style sheet file is simply a plain text file containing the same code that you would have put between <STYLE> and </STYLE> tags under the embedding approach.

A Taste of the Unlimited Possibilities

The best way to understand HTML and style sheet is by working through an example. The HTML code for this example is in Figure 1.

Just to show the difference a style sheet can make to a web page compare Figure 2 and Figure 3. Figure 2 is a web page without any style sheet elements and Figure 3 is the same web page with a style sheet.

Fonts and Color

As in the simple example at the beginning of this article, the first part of the declaration for the rule H1 started off by defining the color. Here the color property is assigned a value Navy. An alternative way to specify value is to use the hexidecimal approach commonly used in HTML codes.

Next came the declaration for the font. The syntax is fairly self-explanatory and easy to learn. Font-size specifies the size of the font. The value in this example is given in point (pt), but it can also be given in pixels (px), centimeter (cm), or inches (in). It is fairly flexible.

Font-family specifies the name of the font that you want to use. While technically you can use any fonts that are available on the computer, practically speaking the choice is often limited because you can never be sure what fonts are available on the user's computer. You can specify multiple fonts in order of preference from left to right seperated by a commas. Just in case the first font is not available you have a backup. And one of this backup should be a generic fonts such as serif, san-serif, fantasy, monospace, and cursive. For example,

font-family: helvetica, serif;

Font-weight specifies the thickness of the font. In this example, the value is bold. Other values are normal, bolder and lighter. And you can also use numbers {100, 200,.... 900}.

Overridding

You may wonder what happen to the default definition for the heading 1 or <H1> tag. Normally, without style sheet, Heading 1, Heading 2 and so forth has a certain font size associated with it such that Heading 1 is bigger than Heading 2 and so on. Each Heading is also given a font family property by the browser. What happen to these and other default values? It is still there. The style sheet declaration simply override these default values. This point illustrated by the next declaration in relation to H2 and H3. In the declaration only the color and font-family is specified. In Figure 3 it can be seen that Heading TWO and Heading THREE appear gray with a san serif font. Because the font size is not specified here the default font size value is used.

This declaration also introduce a quick way to define multiple tag that you want to have properties with the same values. This is achieved by putting the tags, such as H2, H3 and H4, in a row separated by a commas as shown in the example.

Not only do style declaration override default value, a subsequent style declaration will override a previous declaration in relation to the same tag to the extend that there is any inconsitency. Sorry for this rather convoluted explanation. The next example may help.

Consider the first three lines of the declaration for H4. Remember that H4 is previously been defined as having a color gray and a font-family of san serif. In this declaration font-family is given a value helvetica. As can be seen in Figure 3, Heading FOUR is displayed in the helvetica font. Notice that it is still in gray because this property has not been overrided here.

Indenting Your Text

Style sheet allows you to indent your text. In the example, the block of text enclosed by the paragraph container <P></P> is indented relative to the rest of the web page. This is achieve simply by the properties marginLeft and marginRight that specify the left and right margin respectively.

See how simple this is. And you can quickly change the margin size by changing the values of these two properties. Previously a margin like effect can be created only by the use of tables that is rather clumbersome to work with particularly in a lengthy page.

Border and Background

With style sheet you can easily apply different borders effect around a block of text. Look at the border around Heading FOUR. The color of the border is specified by the property border-color. The properties border-left-width, border-right-width, border-top-width, and border-bottom-width specified the width of the left, right, top and bottom of the border respectively. As with the font size, the value can be given in point (pt), pixels (px), centimeter (cm), or inches (in).

The border-style property specifies the style of the border. The value that can be used are: ridge (used in heading FOUR in this example), inset (used with the ordered list in this example), doted, solid, double, dashed, groove, and outset.

Technical Note

A Word On Syntax

In the above example, the properties within the declaration are written in separate lines. This approach provides a clearer style sheet. This is, however, not a mandatory part of the syntax. You can write it all out in a single line if you want. It is a matter of personal taste.

There are also different and simpler ways of writing some of the codes in the above example. The border definition in Heading FOUR can be written as:

border: 0.2cm ridge red

The values after the border property are values for the width, style and color properties. In fact, they do no have to appear in this order. The style sheet syntax is flexible enough so that you can specify these values in any order you want. Notice that there is no commas between the values here.

If you want to specify different width for the top, right, bottom and left border, you can do the following:

border-width: 0.5cm 0.2cm 0.5cm 0.2cm;

The order of the values are important here. They are in the order of top, right, bottom and left.

This approach is much more compact than the 6 statements used in the original example. However, this sacrifice clarity. To a novice, like myself, I prefer the long form because it makes the meaning of the statement self-evident and it also makes subsequent modification much easier. Again this is a matter of personal taste.

Don't Forget Older Browsers

So as not to confuse browers not capable of handing sytle sheet, it is best to put the style sheets inside HTML comments. The HTML comment tokens "<!--" and "-->" can be placed before, after, and in between the statements.

Cascading Style Sheet

The Cascading Style Sheet (CSS)approach described in this article is style sheets standard defined by the group known as the World Wide Web Consortium (W3C). The W3C is an industry consortium that develop common protocols for the evolution of the World Wide Web.

As of writing of this article, CSS is supported by both Microsoft Internet Explorer 3.0 and Netscape Communicator (ie. Navigator 4.0). But as with most so called standard in relation to the net, the implementation is not necessarily uniform.

Why is it given a fancy descriptor like "cascading"? It is cascading because the browser follows a specify set of rules (the cascading order) in resolving conflict between multiple styles. You have already encounter an example of this cascading order in the above example, only that it is not refer to as such. Remember how the style sheet declaration override the browsers default values for the HTML tags. That is an example of cascading order in action.

In general, the overarching principle is this: the most recent declaration or style definition override any previous declaration to the extend there are inconsistency. It follows from this that style defined inlined (ie. as part of the HTML tag) has precedence over embedded style sheet, and embedded style sheet has precedence over linked style sheet.

Further details on the CSS standard W3C web site.

Authoring Softwares

Softwares are beginning to appear on the market that facilitate the writing of style sheet. There are currently two softwares available:

  • Cascade 1.0- An editor that uses series of dialog boxed to help you construct a style sheet using the CSS standard.
  • BeyondPress 3.0- A web authoring XTension that convert QuarkXPress documents into HTML and CSS.

Final Words

Style sheet have introduced a whole new dimension to publishing on the web. It provides a simple way to manipulate the appearance of a web page and an easy way to sychronise the appearance of multiple web pages in a site.

 

This introduction to the elements of a style sheet have really only touch the surface of the large (and no doubt increasing) range of properties that can be manipulated using style sheet. Figure 4 show you one such possibility. The overlapping text effect in different colors, fonts and style is created purely using a style sheet. Very impressive!

The limit is your imagination.

 

 

[back to index]