[Top]
More advice for the full screen mode.
   
Sivut toimivat riittävän hyvin MS IE 4.0+, Opera 5.x+, Netscape 6.0+/ vast. Mozilla ja Konqueror 3.x selaimilla. Yleisesti ottaen sivut toimivat parhaiten uusimmilla Opera selaimilla. Sivujen toimivuus vanhemmissa selaimissa on heikko, erityisesti Netscape 4.x kohdalla.

I list below all topic groups, which I have done according to subjects, which they handle. You can return to this topic group by using this menu and the link Table of topic groups on the top of the each page.
 
 
Search:
[Help]
Table of topic groupsFront page of CSS-guideGuide pages2. How to put CSS into Web pages > Linked and embedded style sheets (section 3/3)

Linked and embedded style sheets

Topics

External style sheets

In my mind it is always sensible to create external CSS-files, if you have three or more documents, where you want to use CSS-properties. Define to the separate file basic styles, which you want to use in your whole site!. Then we can speak about site-level style sheets.

Properties in external files have the same function as style attributes. For example p {color:blue; border:1px solid blue;} has the same effect as <P style="color:blue; border:1px solid blue;">. The latter definition is not however given directly to the element, but indirectly using an external file. If not otherwise especially defined p {color:blue;... concerns all paragraphs in the document (I explain later in this site what is the purpose of definitions, which are before the declaration-blocks). Properties inside a style attribute concerns only one element ([M][S][Pw]).

The effects are in both case quite the same as some HTML 3.2 presentational attributes. Using external CSS-files it however possible do the same effects as HTML attributes without using any attribute in the body parts of HTML-documents.

When you use external files, give to the file name like basic_stylesheet.css and link it to your HTML-document. Below is an example of the format of the link relation:

<LINK rel="stylesheet" type="text/css" href="styleSheetFile.css">

The code must be in the HEAD-part of the document. You can link to your own folders by using relative references or use for example core stylesheets of W3C. Below is an example of a link one of those style sheets:

<LINK rel="stylesheet" type="text/css" href="http://www.w3.org/stylesheets/Core/Modernist">

External style sheets should not have any HTML-encoding! Don't put any HTML tags or comments to them. Below is an example of very simple external CSS-file:

/* Don't use HTML-comments. Use instead of them CSS-comments. */
body {color:#333333; background-color:aqua}

I recommend that you validate CSS-files with the W3C CSS-validator. It can be installed also as an offline version to HTML-Kit but I have found, that it doesn't work properly.

W3C: CSS validator.
Other sites: HTML-Kit Home Page[Pw].

It is possible to refer external style sheets also by using the import (at-)rule. I explain in the next section of this page, how to use it. I give you also some examples, how to use external linked style sheets.

[Top]

Embedded style sheets + the import rule

Embedded style sheets mean sheets, which are "embedded" to the same document before the element BODY between <HEAD></HEAD> tags using the element STYLE. We can call them as document-level style sheets.

I recommend to put into those definitions properties, which you use only in one document. You can override properties in external CSS-files. If you for example want to use in a certain document different background-color and background-image properties, define only them. You don't need to define another time all values. They stay in use, because the browser handles first the linked style sheet.

Following examples gives to the document yellow background with a new background image, which is in the center of the document and which doesn't repeat (you can see in this example also the right position of the element STYLE and it does have also a link relation to the external style sheets, where the document gets other definitions ([M][S][Pw]):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Title</TITLE>
<LINK rel="stylesheet" type="text/css" href="external_stylesheet.css">
<STYLE type="text/css">
<!-- /* these definitions are inside HTML comments that's why that old browsers could pass them */
body {background: yellow url(new_image.gif) no-repeat center;} /* I explain in other connection, how to define background properties */
-->
</STYLE>
</HEAD>
<BODY>
...

By using embedded or external style sheets it is possible to use the the import rule (@import; It belongs to at-rules, which I handle later in this site). In the first example you can see, how the import rule is used with the STYLE element ([M][S][Pw]):

<LINK rel="stylesheet" type="text/css" href="stylesheet.css">
<STYLE type="text/css">
<!--
@import url(external_stylesheet.css); /* note that at the end of the rule is the sign ; - without this sign the browser doesn't handle further definitions */

/* definitions, which belongs only to one document */
body
{font-family: Verdana, Arial, Helvetica, sans-serif; font-size:x-small;
padding-top: 10px;
padding-left: 32px;
padding-right: 10px;
padding-bottom: 10px;
margin: 0px;}
h2
{color: #660033;font-family:Verdana, Arial, Helvetica, sans-serif;} /* remember, that this definition doesn't cancel imported definitions in other parts than again definite properties */
td
{font-family: Verdana, Arial, Helvetica, sans-serif; font-size:x-small;}
-->
</STYLE>

The other way to use the import rule is to put it in the beginning of external style sheets like in this example:

/* external_stylesheet.css - this is the main stylesheet; it is good habit to put a short description to the beginning of the style sheet about the contents of the style sheet */
@import url(another_external_stylesheet.css);
body {...} /* other definitions as usually */

Remember always, when you use the import rule, that the import rule is handled before other definitions. If there are several import rules they are handled in order starting from top. The basic idea of the import rule is that the browser reads imported style sheets as if they have been directly written in the place, where the import rules exist.

Browser-specific notes:

  1. The import rule doesn't work in Netscape 4.x browsers.

  2. MS IE for Windows browsers, which are older than 6.0 and also MS IE 6.0 if it doesn't work in the standard-compliant mode[S] it reads also import rules, which are after other definitions. Don't put import rules into incorrect places! Test the model page - in that page should not be exchanges made by the style sheet ([M][S][Pw]).

  3. The import rule has many serious problems, if the purpose is to create media decent CSS. I handle those problems in the page How to set CSS for texts and different media types[S].

  4. In MS IE Windows browsers (at least until MS IE 6.0) has the limitation of 30 embedded of linked style sheets.

  5. Because MS IE 3.02 understand only the last style sheet defined by LINK or STYLE elements, it creates its own problem, which I don't handle closer.


John Allsop: Managing Style at Large Sites[Pw]; Microsoft: BUG: 30 Style Sheet Limitation in Internet Explorer.
[Top]

Alternative style sheets

Somebody might ask, why there is two ways to link to external style sheets (the import rule and using the LINK element). The basic difference between them is, that in principle the LINK element offers the possibility to change style sheet by defining alternate style sheets (rel="alternate stylesheet"). In order to give the possibility to choice between style sheets, it is necessary to use the title attribute.

W3C: HTML 4.01: 14.3.1 Preferred and alternate style sheets.

Browser-specific notes:

  1. Alternative style sheets work only in Mozilla Gecko, Opera 7.x+ and in the file explorers of Linux at least in Konqueror 3.1, which might use incorrect CSS-file. Because browsers don't keep them when going next pages they are in practice useless. Set alternate style sheets with cookies.

  2. Opera and MS offers the possibility to set user style sheets. Especially Opera 4.x+ gives very fast way to change between user and author defined style sheets. I explain this matter in an extra page[S].

I handle in the next page which kinds of values CSS-properties can get.

[Top]

   
Copyright Tapio Markula 1999-2003, Salo, Finland
(table of topic groups, E-mail - add Tapio.Markula)
( tapio.markula@nic.fi)
Not into the public use without my permission. If you want to use my pages at some way read the copyrights.
Get Expression!

An editor for creating standard-compliant HTML and XML documents. Documents of this site have in most cases checked with HTML Tidy by Dave Ragget (W3C) and randomly with the official MarkUp Validation Service of W3C. The syntax of most pages in this site should conform with the XHTML 1.0 specification of W3C. Test this page!
Information about browsers, which render or print this site best.
[Get Opera!] [Get Mozilla!]
CSS-guide has been last edited 07.08.2004