EverWeb Codebox

CSS

Cascading Style Sheets

The basic HTML shown on the previous page doesn't look too exciting at all so this time a styesheet is added using this code...

<link rel="stylesheet" type="text/css" href="page-style.css">

... which references an external styesheet. The result, shown below, is more like the kind of thing required.

h1 {

     font: 20px 'Verdana', Helvetica, sans-serif;

     text-align: center;

     color: #cdcdcd;

}

Styles define the way in which HTML elements are displayed and can be added to the HTML doc in several ways. These are...

     1.     Using an external styesheet as shown above. This is used for styles that apply to more than one page of the site.

     2.     Internal styles which are inserted into the page HTML doc head and apply to unique styles for that page.

     3.     Inline styles which can be used to style individual elements.

It's important to understand why they are referred to as "Cascading" and what this means. The various styles cascade into a virtual stylesheet in a certain order and each one has priority over those preceeding it. This is the order...

     1.     Browser Default Styles

     2.     External Stylesheets

     3.     Internal Styles in the document head

     4.     Inline Styles inside the individual HTML elements

Any style will overwrite those preceeding it. An inline style will overwrite an internal style which in turn will overwrite an external style and the browser default.

If there is more than one external stylesheet, the last one entered into the document head will take precedence over the previous ones. This is really important to remember since it is the principle used in adding custom styles to any individual page - either as an internal style via the Head Code box or as an inline style via an HTML Snippet.

Style Examples

External Stylesheets

The styles in an external stylesheet are written like this example for a heading...

..and the document saved with a suitable name and the file extension ".css". Example - "master-styles.css"

The stylesheet is referenced in the head of the HTML doc like this...

<link type="text/css" rel="stylesheet" href="css-folder/master-styles.css">

... which is a link to a text document containing css whose relationship to the HTML doc is a stylesheet. The "href" is the path from the HTML doc to the stylesheet.


Internal Styles

The same style used internally would be enclosed in style tags and inserted into the page head code. It would only effect the <h1> on that page and overwrite the style in the external stylesheet.

<style type="text/css">

h1 {

     font: 20px 'Verdana', Helvetica, sans-serif;

     text-align: center;

     color: #cdcdcd;

}

</style>

Inline Styles

Used as an inline style, our example would look like this...

<h1 style="font:20px 'Verdana', Helvetica, sans-serif;text-align:center;color:#cdcdcd">Heading</h1>

This would be one way to style elements inside an HTML Snippet. Although inline styles are convenient they should be used sparingly as they are not very efficient and a whole bunch of inline styles will take the browser a lot longer to read than if they were grouped together in the internal styles or an external stylesheet.