Small Business Computer Services - Home Computer Services
Australian Owned and Operated
Australian Owned and Operated
Cascading Style Sheets or CSS come in three types. These types are
All of these types have their own advantages and disadvantages that will be discussed in detail below.
| Type of Style | Hierarchy | Power | Applies to |
|---|---|---|---|
| inline | will override all other styles | least powerful | only the HTML tag it is used in |
| embedded | will override external styles | less then external more then inline | the document is is declared in |
| external | will override default styles only | most powerful | as many html documents as needed |
Inline Cascading Style Sheets are applied to one XHTML tag only. The style is
implemented via the style attribute that forms part of the HTML tag they are to apply to and
the value of the style attribute contains the definitions of the style to be applied. An
inline style is generally used for touch ups only. Maintaining inline styles may be difficult
as all instances of inline styles will need to be found.
Below is an example of inline CSS. It should be noted that an inline CSS could be applied to
a lot of XHTML tags.
The stractural tags have been obmitted as once a student reaches this level of expertice the
XHTML knowledge should be at least at intermeadiate level. This level of knowledge is assumed
in this tutorial.
In the code above the background colour of a paragraph has been set. The style will only
apply until the paragraph is closed. The style cannot be re-used. It needs to be coded every
time it is needed. This is one of the reasons why I suggested that this type of style should
be used for touch ups only.
Embedded Cascading Style Sheets may be used to apply a style to many elements
in a XHTML document. The styles specified are available in the document they are declared in.
It should be noted that the code below is broken up in two segments. Firstly the style tag
needs to be inserted into the container of the head. Secondly the style specified in the
container of the head needs to be applied. This is happening in the container of the body.
On the next page we will explore different ways of initiating styles. For now we will
concentrate on declaring styles.
Please note that the code inside the style tag does NOT contain any XHTML but only CSS code.
This was the fist part of the style. As for the second part . . .
The second part of the code, the application of the style, appears to be not happening at all. We'll discuss on the next page how the style got applied. For now I will need to ask for yout trust and believe me that the style is applied.
External Cascading Style Sheets are the most powerful of the stylesheets
that may be used as they are able to be applied to many HTML documents. While the
external styles are applied in the same way as embedded styles the definition of the
styles is happening in an external file. There are several steps involved in
implementing external styles.
Firstly we are going to look at linking an external style sheet to a HTML document. It
should be noted that the HTML document must contain all the usual HTML tags as pescribed
by the w3c. In addition linking a style sheet to the HTML document requires the use of
the <link> tag in the container of the <head> tag. Thus a code extract for
linking an external style sheet may look as follows:
As we can see the <link> tag takes three (3) attributes. The "rel" attribute
establishes the releationship between the external file and the HTML document. In
this case the relationship is that the external file is a style sheet.
The next attribute is the "href". This attribute states the URL of the style sheet.
A style sheet may be located anywhere at all. It may be located, as in this example,
in the same folder as the HTML document, or it may be located in a different domain.
The final attribute that should be specified is the "type" of the file that contains
the style sheet. As an external style sheet file may only contain ASCII characters
it may be written in any ASCII editor that can be used to create a HTML document. In
MS-Windows this may be Notepad. Web designers should NEVER use a word processing
application as these applications will include characters in the saved document that
will be misinterperted by web browsers.
It should be especially noted that as many link tags as needed may be used. This will
enable the web designer to use many external style sheet files.
Once the link to the external style sheet has been established we need to look what
is contained in the external style sheet file. The style sheet file will NOT contain
any HTML code. The only code allowed in the file is style sheet definitions. An
external style sheet may contain as many styles as needed. We will discuss some of
the style sheet code later but below is an example of what could be within the
external style sheet file. It should also be noted that the external file should be
named to include the file extenion ".css".
Applying a style will happen in the same way as previously discussed for embedded styles. Thus in the example used for external styles all that would be needed to apply the style specified for the <p> tag would be the code below.
After discussing three different ways to declare styles on the next few pages we will look at different styles.
Cascading Style Sheets cont . . .
