Re: XHTML (was shtml)

At 18:54 25/01/02 -0500, cbirds(at)earthlink.net wrote:
<snip>
>And while you are at it, can you please explain the three different ways
>of including CSS with webpages?
<snip>

There are three basic ways of doing it.

         o Using a LINKed stylesheet;
         o Using a stylesheet embedded in the head of a document;
         o Using inline styles.

In addition, you can import stylesheets using an @import rule.

The best way to do it, in terms of browser compatibility and 
maintainability, is to use a LINKed stylesheet. To do this, you put the 
following into the HEAD of the document you want styled:

         <.link rel="stylesheet" href="[url]" />

Obviously, the . should be omitted from the tag, and [url] should be 
replaced by the URL of the style sheet.

The stylesheet should be a text file with just CSS rules in it - no HTML at 
all. Generally, the filename extension should be .css.

Every page on your site should be linked to the same stylesheet. That way 
you can update the appearance of all of your pages by changing just one file.

Putting stylesheets in the head of the document is a similar method, but it 
is less efficient because you have to change every page when you want the 
styles to be updated. To do this, put the following into the HEAD of the 
document:

         <.style type="text/css">
         /* CSS rules here */
         <./style>

You can combine this with the above method, like this for example:

         <.link rel="stylesheet" href="[url]" />
         <.style type="text/css">
         /* CSS rules here */
         <./style>

This is useful if you want to add or override some rules on a page by page 
basis. I encourage caution when doing this. Ideally you should use the same 
set of styles for the whole site, but there are some occasions when you 
shouldn't.

The third method involves using inline styles. This method is very nasty. 
It combines the worst aspects of HTML 3.2 and HTML 4.01. It makes files 
difficult to edit, and large to download. It means you are combining 
presentational information with structural. Only use it if you really 
REALLY have to.

Suppose you want to apply an inline style to an element E. You do it like this:

         <. e style="/* CSS rules here */"> content <./e>

Obviously, you don't want to do this for a large number of rules!

There is a fourth method as well, which can be useful if you need to get 
around NS4 bugs: using @import.

An @import rule can go at the start of a stylesheet, either an external one 
or one inside <.style> tags. It is used like this:

         <.style type="text/css">
         @import url('[url]')
         /* additional rules here */
         <./style>

This effectively puts the contents of the CSS at [url] into the stylesheet 
at the location of the @import rule. This has a very big advantage over the 
LINK method, because you can use it to import stylesheets into stylesheets, 
not just HTML. The other advantage is so big that it gets an entire 
paragraph to itself.

Netscape 4 does not support @import. Therefore if you have rules that cause 
problems with NS4 you can put them into a separate stylesheet and @import 
them. Netscape 4 will not see them.

There are many other things you can do - using media specific stylesheets 
for example - but I won't go into them now. I will mention multiple LINKed 
CSS though, because this feature is so useful, or it will be when browsers 
support it. The following example requires Mozilla 0.9.5 and above.

Take a look at this, which is taken from the HEAD of the home page of 
aamcf.co.uk:

    <link 
rel="stylesheet"           href="/styles/blue"    title="Blue"            />
    <link rel="alternate stylesheet" 
href="/styles/red"     title="Red"             />
    <link rel="alternate stylesheet" 
href="/styles/green"   title="Green"           />

In Mozilla, if you go to the view menu you get a use stylesheet option. By 
default you will view the page using the blue stylesheet. You also get the 
option of changing to the red or green stylesheets.

Why is that useful? Well, they way I have it on aamcf.co.uk isn't 
especially useful. Its done just to show it can be. However, I could have 
produced an ordinary stylesheet and a high visibility one. This would mean 
that people who needed the high visibility sheet could choose it, but most 
people would be able to view it with the normal sheet. If I was to use the 
CSS for page layout, I could provide several different layouts which the 
end user could choose between.

HTH,

Andrew


--
http://aamcf.co.uk/

HWG hwg-techniques mailing list archives, maintained by Webmasters @ IWA