Webpage Coding
Getting Started
#1 Example Webpage
#2 Adding CSS
Compatible CSS
#3 Adding Metadata
#4 JS Masked Email
#5 Sharing SSIs
#6 Support Testing
Password Access
Custom 404 Page
Next section...
JS Applications

Webpage Coding

Example #2 Adding CSS

The »previous example established a simple page with most of the required elements. Its main drawback though was that all of the formatting was hard-coded into the HTML tags, thus style was inextricably linked to content which is not desirable.

The first step is to separate content from style by removing it to the <head>...
...and ultimately to an external file...

The main change in this second example is that all of the style attributes have been removed from the HTML elements and put into a single <style> block within the page <head> section.

To identify each element and to associate it with its defined style the <div> elements have been given IDs and classes, with corresponding CSS definitions within the <style> block.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>Example Webpage #2</title>
<style type="text/css">
  body {font-family:lucida console,courier,verdana,georgia,arial,Comic Sans MS,sans serif;}
  p {margin:5px;padding:5px;}
  div#frame {background:#f0f0f0;
    border:1px solid #000000;
  div#header {background:#fff0f0;
    border:1px solid #ff0000;
  div#content {background:#fffff0;
    border:1px solid #ff00ff;
  div#rightbar {background:#f0f0ff;
    border:1px solid #0000ff;
  div#footer {background:#f0fff0;
    border:1px solid #00ff00;
  div.navbar a {display:block;margin:2px;}
  p.loud {font-size:larger;font-weight:bold;}
<div id="frame">
<div id="header">
<h1>Example Webpage</h1>
<div id="content">
<div id="rightbar">
Site Links
<div class="navbar">
<a href="./simpleskel2.shtml#link" title="Return to the example notes page..."
  >Link to Notes</a>
<a href="./example1.shtml#link" title="View the first example page - raw..."
  >Example #1</a>
<a href="./example2.shtml#link" title="View the second example page - CSS tidied away - content separated from style..."
  >Example #2</a>
<a href="./example3.shtml#link" title="View the third example page - External CSS and page metadata added..."
  >Example #3</a>
<a href="./example4.shtml#link" title="View the fourth example page - Email addresses masked using JavaScript..."
  >Example #4</a>
<a href="./example5.shtml#link" title="View the fifth example page - Code sharing using server-side includes..."
  >Example #5</a>
<a href="./example6.shtml#link" title="View the sixth example page - Testing for DHTML and 'advanced' support..."
  >Example #6</a>
More text here in the sidebar
<h2>Example #2</h2>
<p class="loud">Welcome line - hello visitor etc etc</p>
<p>Mary had a little lamb, its fleece was white as snow, and everywhere that Mary went that lamb was sure to go... Mary had a little lamb, its fleece was white as snow, and everywhere that Mary went that lamb was sure to go...</p>
<p>Some more website content here</p>
<div id="footer">Footer section code and credits here... Email: <a
  title="Contact us by email...">fred@nowhere.com</a>

CSS Comments

The CSS is far from ground breaking with just the very basic selectors to illustrate this example. Each of the display areas has been given a 1 pixel wide border and a light background colour so that its 'area of influence' can be clearly seen in the final page. A few additional margins and padding have been added for ease of display where required.

The body {...} is a good place to set many of the main font and colour directives, any other display element will generally default to these values unless you set other defaults or explicit values. Here we set just a default font.

p {...} Not strictly necessary for this example but a basic margin for this element for ease of display.

div#frame {...} This is intended to enclose the page proper (as distinct from the browser window background). This has a grey background. The key value here is its width, this has been set to 90% to give a scalable page whose width will vary with the display window.

div#header {...} This is intended to enclose the top header section of the page, coloured light red here.

div#content {...} The general page body, coloured ligh yellow here.

div#rightbar {...} The right-hand sidebar. This is light blue and has a width defined as a percentage so that this too will resize itself with the page. This block is also right-floated so that it takes its own place in the top right corner of the 'content' div, other content flows around it.

div#footer {...} This is intended to enclose the bottom footer section of the page, coloured light green here.

div.navbar a {...} This is 'contextual CSS', it applies to those <a> elements which are with <div class="navbar"> By making these ordinarily 'in-line' links display as 'block' elements they force themselves to the full width of their containing element (the righthand side-bar) and thus one to a line below each other.

p.loud {...} A general set of values is set for all <p> elements. However there will often be regular exceptions within any set of pages, perhaps some paragraphs need calling out, or shown as small-print, the solution is to assign a class to that paragraph and define its own special CSS rules.

Note how clean the main page body HTML is now, the barest minimum of HTML tags with no formatting in sight!

However this can be taken a good deal further. Assuming that the 'style' we have created here is intended for the entire website it needs to be shared, this is easily achieved by removing the entire <style> section to an external file and linking the stylesheet in within the <head> section.

This has been done for the next example... where we will also look at the remaining issues:

  1. Page meta-data is missing...
  2. Email address is 'en clar'...
  3. Code is not easily shared or maintained between pages
  4. Support for DHTML and 'advanced' features?

Note! There are still some remaining compliancy issues to be dealt with. Even having taken all of the steps (described in detail later) to ensure that the browser has basic DOM, CSS and DHTML compliancy there are still variations in how some browsers interpret the CSS rules and defaults.

The main differences are between Internet Explorer and the Mozilla based browsers, we can leave this example for a moment and discuss these differences in more detail in 'cross-compatible CSS', the next section.

Show Style-Switcher...