1 2 3 4 5 6 7 8 9 10 11 12 F L S Topics Index Copyrights

Practising: Collected.css

The Finnish version has BODY without the class CssSite. This is a model page for home practising. Note, that I have not updated the content of this document - this is only a model page.

Topics

Common

The three first matters in the index of this page 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 style (style="...") for direct style definitions, class (class="...") and id (id="...") for external and embedded style sheets. I handle in this connection closer only the usage of the attribute style.

Style sheets inside style attributes

If you define styles inside elements using style attributes, like <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 sheet( attribute)s. If you want to exchang 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 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 ordinary HTML 3.2 attributes:

  1. CSS-definitions can be much richer. CSS definitions are not called as attributes but properties. HTML 3.2 stylistic attributes (there are also other kind of attributes) can have only single value at a time. An individual property definition has the following form: a property name followed by a colon (:) and a value or list of values. But you can dfefine at the same time innumerable quantity of properties, but individual properties and their values must separate with semicolons (;) like style="color:#660033; background-color:yellow;".
  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 this matter at the end of this page).

If we think the whole matter goal oriented and then at the sight of HTML of XML documents, properties are like collections of stylistic attributes. In that mean CSS works at attribute level. The purpose of CSS is the same as HTML 3.2 stylistic attributes in spite of the method how properties are given. In order to avoid confusion, I write about properties when CSS2 specification use that term.

Style attributes are the less powerful way to use CSS-properties. They are however useful when you want 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 stylistic attributes in order to give more adjuncts to the element ([M][S][Pw]):

<IMG src="../../Kuvat/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.

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 definition is not however given directly to the element, but indirectly using an external file. The effects are in both case quite the same as some HTML 3.2 stylistic attributes. Using external CSS-files it however possible do the same effects as HTML attributes without using any attribute in the body of HTML-documents ([M]], [[S][Pw]).

When you use external files, give to the file name like basic_stylesheet.css and link it to your HTML-document. The format of the link relation is <LINK rel="stylesheet" type="text/css" href="external_stylesheet.css">. You can link to your own folders by using relative references or use for example core style sheets of W3C. Those kinds of links are format <LINK rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/Core/Modernist">

It is possible to refer external style sheets also by using import rule. I explain how to use it, when I introduce you into Embedded style sheets.

Embedded style sheets + 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 only those kinds' 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 other 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>
...

Unfortunately Netscape 4.0x browsers have however big difficulties in CSS-implementation and if you want to optimize supporting those browsers, you must partially pass them. It is possible by using the import rule (@import), because Netscape 4.0x can't understand it. In the first example you can see, how the import rule is used with STYLE -element ([M][S][Pw]):

<LINK rel="stylesheet" type="text/css" href="NS_4_0x.css">
<STYLE type="text/css">
<!--
@import url(external_stylesheet.css); /* from the NS_4_0x.css the browser get those kinds' properties, which works well in NS 4.0x; using the import rule the browser get from external style sheets those kinds of definitions, which don't work or work badly in NS 4.0x browsers; there can be several import rules, but all import rules must be before other definitions; note at the end 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>

This is the most powerful way. You can give to NS 4.0x browsers own properties, which can be redefined by using the import rule, which is embedded into the document. The other way to pass NS 4.0x and 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); /* there can be several import rules, but all import rules must be at the beginning of the file; remember the sign ;! */

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. Warning: MS IE reads also import rules, which are after other definitions. Opera and the future Netscape don't read them! 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]).

Declarations

When you use CSS-properties, it is possible to define them in most cases with two ways. In both cases you define so-called declarations. Declarations are inside blocks, which are marked with curly brackets ({}). The block can contain one or more properties, separated by semicolons. You can use individual properties or so-called shorthand properties, where you can combine 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;}

Exactly written before a semicolon is always only an individual declaration. The collection of several declarations inside a pair of curly brackets is called as a declaration-block. 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; look as a chart at the point of the declaration-block ([S][Pw]):

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;}

You can create declaration-blocks for example with NotePad. All wizards in applications are imperfect, but you can make with them some basic definition. I have an appendix page about some CSS-applications.

The usage of block and inline elements with CSS

Block elements have common agreed default margins, but margins can be a little different in various browsers. Inline elements should not take certain CSS-properties, which belongs only to block level elements like text-align, padding-top and padding-bottom. They are defined from block level elements.

Authors may use inline elements incorrectly and put inside inline elements block level elements. IE shows those kinds of definitions in most cases as blocks. But using CSS-properties the future Netscape is more strict. I have found that incorrect usage of inline elements cause extra line breaks and CSS-properties don't work as they are intended. A warning: Be careful to use correctly inline elements if you want that all blocks are displayed properly!

Block and inline elements have two universal elements. Common block element, which is DIV and also old browsers understand it. For language and CSS-properties is common inline element SPAN. It is not allowed to put any block level element inside it.

The only elements, which you can use both in inline and block level elements are INS and DEL. But you can't used them at the same time as inline and block-level elements.

Inline elements works relative well in Opera 3.6x. Opera support however only CSS1 level properties. It doesn't display them correctly if a SPAN element starts a new row. MS IE does have very serious implementation deficiency in inline element (I handle it later).