[Top]
More advice for the full screen mode.
   
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]
To the normal page

2. How to put CSS into Web pages

Topics

I have divided this page into sections, which handle following topics:

The content as a one big page

Common

Sections two and three should be inspected through the main philosophy of HTML and CSS. The basic idea of HTML 4.0 is to separate presentation and contents so, that the whole site would be easy to modify afterwards.

Cascading Style Sheets

CSS can use three special attributes. The attribute style(style="...") is for direct style definitions. Attributes class (class="...") and id (id="...") are for external (linked) and embedded style sheets. I handle in this connection closer only the usage of the attribute style because I handle in this page just basid method to use CSS.

[Top]

Declarations

Style sheets are like collections of presentational attributes. In that mean CSS works at attribute level. The purpose of CSS is the same as HTML 3.2 presentational attributes in spite of the method how the presentation of the elements have been defined.

Presentational definitions inside style sheets are not however called as attributes but properties.

One CSS-property can replace several HTML-attributes. There is also situations, where replacing one HTML-attribute must define several CSS-properties even so, that they must define for several elements. If the HTML-attribute and CSS-properties handle the same presentational features, this matter doesn't have in the principle level any decisive meaning. The basic task of CSS is to be able to take off or change the effect of any presentational HTML-element or HTML-attribute. The only relevant matter is, if CSS can be overall applied to the situation.

Properties create declarations, which means one property with its value or a value set. An individual property definition inside a declaration has the following form: a property name followed by a colon (:) and a value or list of values. But you can define at the same time innumerable quantity of properties, but individual properties and their values must separate with semicolons (;), for example:

color:#660033; background-color:yellow;

Declarations are commonly inside so-called declaration-blocks, which use curly brackets ({}) as their delimiters. Below is the conceptual scheme of the declaration block (the author can set as much whitespace between curly brackets, semicolons and colons as he wants):

Declaration-block
declaration
property value
{ color : #660033 }

The author of the page can define properties in most cases with two ways. He can define individual properties or use so-called shorthand properties, where he combines several properties together. It is common habit to use in backgrounds shorthand properties like this ([M][S][Pw]):

body {background: white url(background_image.gif) repeat-y 2px 0px;}

In the previous example the declaration-block contains only one declaration. You can give the same properties and their values also by using several declarations like in the next declaration-block (I don't explain in this connection, what those properties' mean):

body
{background-color: white;
background-image: url(background_image.gif);
background-repeat: repeat-y;
background-position: 2px 0px;}

All properties can't show as shorthand descriptions, but if they can, the principle is quite simple:
In shorthand properties all values are put one after another using a space and the section is closed with a semicolon. Also sub-properties can sometimes have shorthand descriptions like in this example:

body {border-top: 1px #660033 solid;}

/* compare it to the following declaration-block */

body {border: 1px #660033 solid;}
[Top]

Style sheets inside style attributes

If style sheets have been used inside elements, thy have been defined inside style attributes. In this connection declaration blocks don't have curly brackets. Below is an example:

<TD style="border:1px solid #660033">

This method doesn't differ essential from HTML 3.2 attributes. This method is called also as using inline style sheets or just inline styles (this is a little bit problematic term, read the Footnote 1[S][Pw]). If you want to exchange afterwards CSS, which are inside elements, you must search them among other code as you must do in HTML 3.2 level attributes! This kinds style sheets could be called as element-level style sheets. Most elements can get them, but they can't be defined in HTML to the root element, because it can get in HTML 4.01 only language attributes.

Even if that style attributes are limited to element level, the usage of the style attributes have some some basic level differences to presentational HTML 3.2 attributes:

  1. CSS-definitions can be much richer. HTML 3.2 presentational attributes (there are also other kind of attributes) can have only single value at a time but CSS doesn't have this limitation.
  2. You can give to a certain element a limited quantity of attributes. This limitation is not in CSS-properties. They are not element dependent like HTML 3.2 attributes, but in certain circumstances some properties are discarded (I handle these kinds of situations in other pages in individual connections).

Even if style attributes are the less powerful way to use CSS-properties they are however useful for example in situations, when the author wants to define into a certain element the absolute position. Following properties give to the image 120 pixel position from the top of the HTML-document. You can add more properties into the style attribute or use HTML 3.2 presentational attributes in order to give more adjuncts to the element ([M][S][Pw]):

<IMG src="../Kuvat/Css/omakuvaIso.gif" style="position:absolute; top:120px;">

Use style attributes with consideration! Think first, if you really need them or could you still use some other method.

Browser-specific notes:.

  1. Netscape browsers don't tolerate curly brackets inside style attributes (this matter is not however so simple and I handle problems in the Footnote 2[S][Pw]).

  2. Direct CSS can be read by all CSS-capable browsers and that's why it is non-recommended way to use CSS. Netscape 4.x has serious problems and it should have an own CSS. I handle in a separate page[S][Pw], how to pass it reasonably.


 

Footnote 1. The problem of the term inline style sheets (or rather inline styles) is that the word inline is commonly used as opposite to the word block. Both describe the natural behavior of elements. If the term could be consistent with this use of the word inline, inline style sheets should be used only as inline-level elements, for example from the element EM. It could fit best to the element SPAN, which is particularly designed to inline-level style and language passing.

In this case the term inline styles the word inline doesn't describe the behaviour of elements. It means simple style sheets, which are inside the document body in style attributes (style sheets are embedded to the source code). When I asked about this matter, I got the following answer:

Yes, inline has two meanings: something can be inline in the source or in the output... An inline style is a style that is embedded in the source, an inline element is an element that will look like a phrase in a line on output... Most people talk about "inline style" or "style attribute",...

The expression inline styles sounds relative good. Indeed for the people like me, who don't speak English as their native language, the different usage of the word inline might cause confusion. I write also about element-level style sheets.

[Top]

Footnote 2. There has been disagreement what it is the correct syntax of declarations, which are inside style attributes. Some applications accept style="{}", which tells much better, that style attributes includes embedded declarations. But this is against the normal HTML attribute syntax, and Netscape accepts only style="". According to David Baron this is correct. But if I think about this matter deeper, I disagree. It is only an agreement, that the dominating syntax is normal HTML attribute syntax. Today style-attribute has the same kind of syntax as so-called javascript, which use also ";" as the separation mark like onClick="uusikkunaa(); if(browser) nayta(10, 'b')".

[Top]

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]