Layout Options

  • Fixed Header
    Makes the header top fixed, always visible!
  • Fixed Sidebar
    Makes the sidebar left fixed, always visible!
CSS Syntax

CSS Application

There are three basic ways to apply CSS styles to an HTML document. They are:

  • Inline
  • Internal
  • External

Inline

Inline styles are applied directly to the HTML by using the style attribute.

The following style sets the text color of the text in this paragraph to 'blue'.

<p style="color:blue;">text</p>

Use Inline styles sparingly and only when a single element has a unique style to be applied.

Internal

Internal styles are specified within the <head></head> tags of an HTML document and apply to the whole document. The following example would set the text color to blue for all paragraphs in the document. 

<html>
<head>
  <title>CSS Inline Example</title>
  <style type="text/css">
    p {
      color:blue;
    }
  </style>
</head>

Use Internal styles when a single page has a unique style to be applied.

External

External styles are specified in a separate CSS file and 'included' into HTML documents in which they are to apply.

The following code shows the contents of an example style sheet, styles.css:

p {
  color:blue;
}

The following HTML code shows how to include the external style sheet named styles.css into an HTML document. Notice that the <link> tag is specified within the <head></head> tags.

<html>
<head>
  <title>CSS External Example</title>
  <link rel="stylesheet" type="text/css" href="styles.css"/>
</head>

External style sheets are recommended when the styles are to be applied across multiple HTML documents. This allows for consistency throughout an entire web site and any style changes automatically apply to all files that include the style sheet.

CSS Cascading Order

When multiple styles are specified by any of these methods, the styles 'cascade' into a single style by following this list in order of increasing priority:

  1. Browser default
  2. External style sheet
  3. Internal styles
  4. Inline style

Therefore, an Inline style has the highest priority, meaning it will override the same Internal style, or in an External style sheet, or in a browser (a default value).

logo