LEARNING CSS BASICS

CSS stands for Cascading Style Sheets. This allows you to separate your web sites (X)HTML content from it’s style. CSS defines how HTML elements are to be displayed. These external style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file!

Here are your topics:

CSS Syntax

The syntax consists of only 3 parts: selector {propery:value}

The selector is the (X)HTML element that you want to style. The property is the actual property title, and the value is the style you apply to that property.

Each selector can have multiple properties, and each property within that selector can have independent values. The property and value are separated with a colon and contained within curly brackets. Multiple properties are separated by a semi colon. Multiple values within a property are sperated by commas, and if an individual value contains more than one word you surround it with quotation marks. As shown below.

Spans

Spans are very similar to divisions except they are an inline element versus a block level element. No linebreak is created when a span is declared.

Divisions

Divisions are a block level (X)HTML element used to define sections of an (X)HTML file. A division can contain all the parts that make up your website. Including additional divisions, spans, images, text and so on. You define a division within an (X)HTML file by placing the following between the tags

Pseudo Classes

You can set links contained in different parts of your web page to be different colors by using the pseudo class. For example, lets say you want your links in the content area to have a different color then the links in the left or right column of your webpage.

You can do this in the following fashion:

  • #content a:link {color: #009900;}
  • #content a:visited {color: #999999;}
  • #content a:hover {color: #333333;}
  • #content a:focus {color: #333333;}
  • #content a:active {color: #009900;}

Static Positioning

Static positioning is by default the way an element will appear in the normal flow of your (X)HTML file. It is not necessary to declare a position of static. Doing so, is no different than not declaring it at all.

Relative Positioning

Positioning an element relatively places the element in the normal flow of your (X)HTML file and then offsets it by some amount using the properties left, right, top and bottom. This may cause the element to overlap other elements that are on the page, which of course may be the effect that is required.

Absolute Positioning

Positioning an element absolutely, removes the element from the normal flow of your (X)HTML file, and positions it to the top left of its nearest parent element that has a position declared other than static. If no parent element with a position other than static exists then it will be positioned from the top left of the browser window.

Fixed Positioning

Positioning an element with the fixed value, is the same as absolute except the parent element is always the browser window. It makes no difference if the fixed element is nested inside other positioned elements.

Furthermore, an element that is positioned with a fixed value, will not scroll with the document. It will remain in its position regardless of the scroll position of the page.

>At this time IE6 (Internet Explorer 6) does not support the fixed value for the positioning of an element. Thus it will not position fixed elements correctly and will still scroll with the page. To see this effect in action you will need to use a standards compliant browser, such as Firefox 1.0