Cascading Style Sheets and formatting your web page

Archive - Originally posted on "The Horse's Mouth" - 2013-03-10 17:47:43 - Graham Ellis
Cascading Style Sheets and formatting your web page

The most basic way of setting attributes like boldness, colour of font, centering, etc, is to use tags diret within the HTML. It's quite striaghtforward to do - simply surround the text you want to be bold with <b> to </b> for bold, with something else for colour, and so on. Problem is that whilst it's straightforward, you can end up with an awful lot ore repetition of the same groups of settings, a big job if you want to make changes, and inconsistencies that are very visible if you miss a couple of tags out.

That's where style sheets come in - you can set whole bundles of attributes into a named set, and call up the whole bundle with just one tag. And you can set general styles for the whole of a page, and then override them or replace elements of them for subsections, and do it further for subsections of the subsections. That's why they're know as cascading style sheets, or CSS for short. You can even put all your styles into a single common file for your site, and share them bewteen you pages - this is exactly how we manage our colour changes and font sizes for our accessability options on this site!

Let's take it from basics here is my page ...

... and I've already taken advantage of some CSS features to make it look better at ...

So - what has changed?

• I have replaced
  <center>
by
  <div class="middle">
and
  </center>
by
  </div>

• I have replaced
  • <font color="magenta">Open daily - 2pm to 5pm - free admission</font><br />
by
  • <span class="bright">Open daily - 2pm to 5pm - free admission</span><br />

• I have replaced
  <i>See main website at ...
by
  <span style="font-style:italic">See main website at ...

• The classes called middle and bright also need to be defined, and I have done that in the head:

  <style type="text/css">

  body	{

    font-family: Arial, Helvetica, sans-serif;

    }

  .middle {

    text-align: center;

    }

  .bright {

    color: magenta;

    }

  </style>

taking the opportunity, you may notice, to change the font away from the default into an easier-to-read Sans-Serif font all the way through. Thus far, there's only one use of each of the styles, and each only sets one attribute - but I can easily add others

• I have also added longer / more complete defintions at the top of my file:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

to tell browsers which HTML standard I've used, and which character set. This will help in rendering the page - especially in international and mobile device use - and can't hurt search engine placement.

• In putting the page through the W3 validator, I was altered that I hadn't supplied ALT attributes for my Images - so I've added in empty strings for them in this example.

You can see the original code [here], and the code with the first use of style sheets [here]. You can run the first example [here] and the second one [here].

To share the style sheet between multiple pages, all you need to do is to put the styles into a separate file (usually with a .css extension) and link that in from each page that uses it.

The changes are quite small - I have placed the style block above into a separate file hex3.css, and I've referenced that file from the main page hex3.html as follows:
<link href="hex3.css" rel="stylesheet" type="text/css">

But I can do very much more with my style sheet - I can use it to set column widths, background colours, general insets and many other things that have been within my HTML so far. Here's what I get:

from those changes, which include (in the main .html file:

Replace
<table width="100%"><tr valign="top"><td width="200">
by
<table width="100%"><tr valign="top"><td class="sidebar">
(on both sidebars - I can now make consistent changes across the site!)

Added

  <div class=technical>

to give me control over the fonts

And simplified
<h1> <br />Museum for Melksham</h1>
to
<h1>Museum for Melksham</h1>
as I'm now able to take advantage of the style capabilities.

There are a few extras in the style sheet too - take a look at the complete style sheet [here] and the html that goes with it [here].

Main Content

Cascading Style Sheets and formatting your web page