Com4tzone



 

 

 

How to nail down a proper web development brief

Backgrounds and Type

Building a Better Web Page

Web Page Color Scheming using your photos

Comprehensible PHP Code

The Doctype declaration

Using frames on your Web site

Dynamic generation of static webpages

Photographing for web pages

Some tips to make your Web graphics and animation look more professional

Style Sheets without tears

Is the Web Safe Palette really dead?

Writing for the Web

 

 

 

Style Sheets without tears

Taking a sneak-peek behind the scenes at some popular Web sites shows me that the dreaded <font> tag is still alive and kicking.

It's strange, considering that it has been on 'death-row' for some time and is liable to be banished from new browsers any day now.

Well, come to think of it, maybe it's not so strange after all. The preferred alternative, the 'Cascading Style Sheet', is not as easy to use or as reliable as it should be. If you want to use a particular font in a word processor or DTP program, you just highlight the text, go to the font menu and choose from the list – and that's it. You can also set the type size in points and choose from a number of different styles like 'bold' or 'italic' with a few mouse-clicks. After a while, you have a pretty good idea what you are going to get.

Most current WYSIWYG Web page editors let you do something similar but in doing so, apply the <font> tag along with <font size> and <font color>, <b> and <i>. Well, it is easy, and not exactly illegal, so people carry on regardless.

Although they do support cascading style sheets, somewhere, you have to dig around to find it and when you do, it is all very confusing. Why does it all have to be so difficult?

Considering the many advantages of using style sheets over <font> tags, you would think that they would go away and die quietly - but not so. It seems that the advantages of using style sheets are outweighed, in part, by the disadvantages.

Yes, there are disadvantages to using style sheets. Compared to making simple font choices in other programs, they are considerably more complicated to implement and if you never look 'behind the scenes' at a Web page's source code, can be quite hard to grasp initially. If you add to that the fact that they don't solve all the problems that you think they should and introduce a few more of their own, you might well ask yourself, "Why bother?"
If you have moved to Web design from more traditional areas, you will be aware that, on a Web pages, you don't have a near-infinite choice of fonts and typestyles and the ability to place them wherever you want and at any angle. You are stuck with using a few 'common' fonts that are available on every computer. Bor-ing!

Then somebody comes along and drops the bombshell that, despite your efforts, other people will probably still see another font and at a different size from what you intended! In fact, the more savvy you are with the minutiae of typographic finesse, the more frustrating it is. Even the latest CSS specs give little more typographic control than an ancient typewriter - without the tab key!

For better or worse, CSS2 is the best we have at the minute and we have to make the best we can of it. Rather than fight it, it is better to use it. Like anything else, the more you understand it, the better chance you have of getting decent results.
Let's stand back a bit and see what it's all about.

Let's forget the 'cascading' part for the minute and start with the easier bit.
'Style' is a word that means many things to various people. It can make a difference to the clothes you wear or the type of car you drive.

In typography, style can be traditional, grid 'n' grot, avant garde, grunge or many other things but, in essence, it describes the overall 'look and feel' of a page.

In CSS, style has a more basic meaning. It means anything that is not plain 'structure' - call it 'decoration' if you like - the icing on the cake.

Take a bag of flour, some butter, sugar, egg and sultanas, mix them up, bake them and add some icing and a few bits and pieces and what do you get? Well, you have a kid's birthday cake, an afternoon tea cake, a wedding cake or a holiday party cake. The ingredients are basically the same, they are just arranged and presented in different styles. How appealing they are depends on the cook.
If you have used 'styles' in Microsoft Word, Quark XPress or some other program, you will appreciate the fact that you can put together a collection of type specifications - font, size, colour, leading, or whatever - and give that particular 'style' a name. A 'style' is a collection of attributes. So, you might have one style called 'body copy', another called 'captions' and others for different levels of headlines, sub heads and so on.
HTML provides the 'structure' of the page and should be devoid of style. This is the basic fruitcake! It has a top, bottom and edge and some contents, but that's about it. Earlier versions of HTML have had both structural and style elements jumbled up with one another, but we are trying hard to get away from that now.

The basic ingredients of a Web page are the words, numbers and pictures – the content. This 'document', as it's called, also has a top, bottom and edges and is usually read from the top down and from left to right – in Western languages anyway. It will probably have parts that are more important than others and this is where the first confusion between structure and style creeps-in. Is a 'heading' part of the structure or part of the style?
The 'function' of a heading is definitely structural - to present information more prominently than the general body copy. In typography, there are many ways to create a hierarchical order of information, the most banal being 'big and bold'. HTML does not dictate 'how' the prominence is achieved, it merely provides a set of heading tags from <h1> down to <h6> - but to add to the confusion, are graded by size and boldness by default - they don't have to be. <h1> can be the same size and weight as your body copy if you like, but displayed in red to make it stand out but then, what if the page is being displayed on a black and white screen? Suffice it to say, that some method of creating prominence is required. The way you achieve it depends on the circumstances.

 
comments
Cascading Style Sheets

Let's forget the 'cascading' part for the minute and start with the easier bit.

'Style' is a word that means many things to various people. It can make a difference to the clothes you wear or the type of car you drive.
        In typography, style can be traditional, grid 'n' grot, avant garde, grunge or many other things but, in essence, it describes the overall 'look and feel' of a page.
        In CSS, style has a more basic meaning. It means anything that is not plain 'structure' - call it 'decoration' if you like - the icing on the cake.

Take a bag of flour, some butter, sugar, egg and sultanas, mix them up, bake them and add some icing and a few bits and pieces and what do you get? Well, you have a kid's birthday cake, an afternoon tea cake, a wedding cake or a holiday party cake. The ingredients are basically the same, they are just arranged and presented in different styles. How appealing they are depends on the cook.

If you have used 'styles' in Microsoft Word, Quark XPress or some other program, you will appreciate the fact that you can put together a collection of type specifications - font, size, colour, leading, or whatever - and give that particular 'style' a name. A 'style' is a collection of attributes. So, you might have one style called 'body copy', another called 'captions' and others for different levels of headlines, sub heads and so on.

HTML provides the 'structure' of the page and should be devoid of style. This is the basic fruitcake! It has a top, bottom and edge and some contents, but that's about it. Earlier versions of HTML have had both structural and style elements jumbled up with one another, but we are trying hard to get away from that now.

The basic ingredients of a Web page are the words, numbers and pictures – the content. This 'document', as it's called, also has a top, bottom and edges and is usually read from the top down and from left to right – in Western languages anyway. It will probably have parts that are more important than others and this is where the first confusion between structure and style creeps-in. Is a 'heading' part of the structure or part of the style?

The 'function' of a heading is definitely structural - to present information more prominently than the general body copy. In typography, there are many ways to create a hierarchical order of information, the most banal being 'big and bold'. HTML does not dictate 'how' the prominence is achieved, it merely provides a set of heading tags from <h1> down to <h6> - but to add to the confusion, are graded by size and boldness by default - they don't have to be. <h1> can be the same size and weight as your body copy if you like, but displayed in red to make it stand out but then, what if the page is being displayed on a black and white screen? Suffice it to say, that some method of creating prominence is required. The way you achieve it depends on the circumstances.
Structural Elements
Body, table, headings, lists, forms, preformatted, citation, strong, emphasis are all structural elements that describe 'where' and 'how' the information is presented.
Style Elements
Font face, size, color, bold, italic, underline, and so on, describe what it looks like.
So, the principle is that you keep the structure (HTML) and the style (CSS) completely separate so that they can be mixed 'n' matched. That is why the <font> tag, and its entourage, really has to go.
Family Affairs
If your parents both had red hair and green eyes, then it is very likely that you and your brothers and sisters have them too. There is also a pretty good chance that some of your children will have the same family characteristics. They will have inherited them.
        Inheritance also plays a major part in the way that styles work on a Web page. Think of the <body> of the page as being the parent. Okay, it's a one parent family but that's not unusual these days.
        Any other items, the siblings, placed within the <body> should adopt the same characteristics as the parent by default. I say 'should' because that's the way it is supposed to work. In practice, some browsers just don't play the game - and there's your first 'gotcha'. Current browsers are inconsistent in the ways they handle the same style specification. The newest browsers are better, Netscape and Explorer 6, Opera etc. Netscape 4.x is pretty bad and ones earlier than that you can just forget about - luckily, they are now very rare.
Now, I'm going to show you how, with minimal effort, you can totally abandon the <font> tag and embrace Cascading Style Sheets in all their glory.

First, the cake mix...
       
<html>

        <head>

        The stuff that doesn't show-up on the page

        </head>

       <body>

       The content that displays

       </body>

</html>
 
Shows a basic HTML page that is all structure and no style. It has a <h1> at the top, a <h3> below that, some body text, a numbered list and a table. Whatever you see here is down to your default browser settings entirely.
       
 
Here, I've just added a 'body' style into the <head> ... </head> section of the page. This is a fairly ordinary style, but serves its purpose. It goes like this: -
1
<style type="text/css" media="screen"><!--
2
body
3
       {
4
       font-size: 0.8em;
5
       line-height: 1.4em;
6
       font-family: Georgia, "Times New Roman", Times;
7
       background-color: #fffff1;
8
       margin-top: 20px;
9
       margin-right: 50px;
10
       margin-left: 50px
11
       }
12
--></style>
 
Anatomy of a style declaration
I've split this all out onto separate lines for clarity but normally they would just join up into one log line.

The first line 1 <style type="text/css" media="screen"><!-- tells the browser that there is a style that it must use. Its 'type' attribute is 'text/css' because we are asking it to apply the style to all the text in the Web page.
 
The media="screen" part is there because you can have media other than 'screen' such as 'print', 'aural', 'Braille' or 'tv' each with separate style sheets. For now, we are only concerned with a regular computer screen.

The <!-- is a comment tag that, together with its end tag 12 -->, stops the style declarations from displaying as text on the page in stupid, old browsers.

The next line, 2 body is the name of the style, called then 'selector' and because it is a 'reserved word', part of the structure of a page, it becomes the default style for the whole page - the big daddy.

All the following 'property' declarations take place between two curly braces 3 {...} 11 and take the form:-

       property: value ;

If there is more than one, as I have here, they are separated by semi-colons but the final item doesn't need one.

4 font-size: 0.8em means that the default size for the text on this page should be 0.8 (80%) of the user's default font size.
        1 em is the user's default size (usually about 12 points, but point sizes are different on Macs and PCs, that's why we never use points as measurement for text on a Web page. )
        You can use ems, and fractions thereof, as I have here for the font-size and line-height, or you can use pixels - px which are more absolute and give more or less the same result on all computers.

5 font-family: Like the old <font> tag, you have to provide a list of fonts. The preferred one, and a few similar alternatives that kick-in if the preferred one is not available on the user's machine. Where a font name is more than a single word, it has to be enclosed in quotes - "Times New Roman" - and commas separate the alternatives.

6 background-color: #fffff1 is the pale yellow background colour specified in hexadecimal RGB values. ff(red), ff, (green) and f1, (blue) is almost white but with a little less blue - giving pale yellow. Note that when the three pairs of these values are the same eg (#00ff00), you can leave off one of one set. The value for white then becomes #fff and green #0f0.

The three margin declarations 8, 9, 10, simply specify the margins on the left, right and top of the page in pixels.

And, to finish up, the ending 12 </style> tag just terminates the body style definition.
 

 
Uses exactly the same HTML as the two previous examples but the style properties change slightly to give a completely different look and feel to the page. This time I have used pixel measurements for the font-size and line-height, which means they are 'fixed' and will not change in different browsers. If you need them to change, to work at the maximum number of screen sizes and resolutions, stick to ems.

<style type="text/css" media="screen"><!--
body
       {
       color: #ccf;
       font-size: 12px;
       line-height: 24px;
       font-family: Verdana, Geneva, Arial, Helvetica;
       background-color: #609;
       margin-top: 40px;
       margin-right: 50px;
       margin-left: 200px
       }
 --></style>

 

So far, I have only giving a general specification for the <body> of the page. That should cover everything on the page because of the 'inheritance' involved. Often, you will want to change these defaults, to make headings a different colour, weight or size, for instance.

As you start to become more specific, the new specifications you make over-ride the default ones.
 
Now, I have reverted to the more usual 'all in one line' layout for compactness.

h1 { color: white; font-weight: bold; font-size: 24px }

h3 { color: #f6f; font-weight: normal; font-size: 18px }

ol { color: #6f3 }

tr, td { color: #ff6; font-size: 12px; line-height: 24px; font-family: Verdana, Geneva, Arial, Helvetica }

a:link { color: white; text-decoration: none; background-color: transparent }

a:visited { color: #ccf; text-decoration: none; background-color: transparent }

a:hover { color: #6f3; text-decoration: none; background-color: transparent }
 
Here, I have over-ridden the default settings for <h1> and <h3> by specifying different colours and weights.

ol, is the 'ordered list' and can have its own specifications.

tr and td affect the table tags. This is one you really have to watch because some browsers don't inherit the body settings inside tables. There is very little consistency in this particular respect between browsers at the minute. The solution is this; define what you want to happen inside a table deliberately, don't assume that the body style will be inherited, as you would expect.

a:link, a:visited and a:hover set the colours for links interaction. text-decoration: none get rid of the underline on links but should only be used in situations where there will be no confusion as to what is a link and what isn't.
 
That covers the basics of Style Sheets. Play around with the values, try different combinations and see what happens. Next month, I will go into some of the finer details and warn about more of those 'gotchas'.

Send your suggestions and comments to web@com4tzone.dk
Com4tzone • web developer digest © 2019-2023
Copenhagen, Denmark