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.
The full source code is shown below, »the page itself is here, and will open in another window.
<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;
width:90%;
}
div#header {background:#fff0f0;
border:1px solid #ff0000;
padding:5px;
}
div#content {background:#fffff0;
border:1px solid #ff00ff;
}
div#rightbar {background:#f0f0ff;
border:1px solid #0000ff;
float:right;
padding:5px;
width:20%;
}
div#footer {background:#f0fff0;
border:1px solid #00ff00;
padding:5px;
}
div.navbar a {display:block;margin:2px;}
p.loud {font-size:larger;font-weight:bold;}
</style>
</head>
<body>
<div id="frame">
<div id="header">
<h1>Example Webpage</h1>
</div><!--header-->
<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>
</div><!--navbar-->
More text here in the sidebar
</div><!--rightbar-->
<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><!--content-->
<div id="footer">Footer section code and credits here... Email: <a
href="mailto:fred@nowhere.com"
title="Contact us by email...">fred@nowhere.com</a>
</div><!--footer-->
</div><!--frame-->
</body>
</html>
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:
- Page meta-data is missing...
- Email address is 'en clar'...
- Code is not easily shared or maintained between pages
- 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.