CSS-guide - Practising: A template for practicing 1

Practising: A template for practicing 1

You have also the page Oppilas2.html. Exchange it as you like and look at it in the pop-up -window!. Note, that I have not updated the content of this document - this is only a practising page. This page has also an assistant page, which have practising tasks.

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.

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!

Even if this limitation, the usage of the style attribute has some some basic level differences to ordinary HTML 3.2 attributes:

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;".
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 ():

<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!

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 ().

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="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.

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 ():

<!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">  </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 ():

<LINK rel="stylesheet" type="text/css" href="NS_4_0x.css"> <STYLE type="text/css">  </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 ().

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 ():

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 ():

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.