Home Accessibility Courses Twitter The Mouth Facebook Resources Site Map About Us Contact
 
Python and Tcl - public course schedule [here]
Private courses on your site - see [here]
Please ask about maintenance training for Perl, PHP, Lua, etc
 
Cascading Style Sheets and formatting your web page

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>&nbsp;<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].
(written 2013-03-10, updated 2013-04-13)

 
Associated topics are indexed as below, or enter http://melksh.am/nnnn for individual articles
W702 - Web and Intranet - Elements of cascading style sheets
  [1998] Text on a background image - (2009-01-16)
  [1831] Text formating for HTML, with PHP - (2008-10-11)
  [1677] CSS training - Cascading Style Sheets (UK course) - (2008-06-15)
  [1019] span and div tags - a css comparison - (2007-01-02)
  [1017] css - handling white space and pre - (2007-01-01)
  [999] Cascading and the buses - (2006-12-18)
  [994] Training on Cascading Style Sheets - (2006-12-17)

W704 - Web and Intranet - Cascading style sheets - putting it all together
  [2223] CSS Style Diagrams - working out where attributes come from - (2009-06-08)
  [996] Setting your colour theme through PHP - (2006-12-17)
  [565] Using PHP to output images, XML, Style sheets, etc - (2006-01-15)
  [501] .css - using PHP to make dynamic style sheets - (2005-11-21)


Back to
HTML tags uses in these blog articles
Previous and next
or
Horse's mouth home
Forward to
Using Pygments to colour our training examples
Some other Articles
Report on the last year - Melksham Chamber of Commerce and Industry for Melksham Without Parish Council
Report on the last year - Melksham Railway Developement Group for Melksham Without Parish Council
Seed Swap at Well House Manor
Using Pygments to colour our training examples
Cascading Style Sheets and formatting your web page
HTML tags uses in these blog articles
Special characters in HTML
The VERY basics of a web page ... and web site
Official Star ratings for hotels - still worth having?
Easier public transport from Melksham to Bristol Airport
4759 posts, page by page
Link to page ... 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96 at 50 posts per page


This is a page archived from The Horse's Mouth at http://www.wellho.net/horse/ - the diary and writings of Graham Ellis. Every attempt was made to provide current information at the time the page was written, but things do move forward in our business - new software releases, price changes, new techniques. Please check back via our main site for current courses, prices, versions, etc - any mention of a price in "The Horse's Mouth" cannot be taken as an offer to supply at that price.

Link to Ezine home page (for reading).
Link to Blogging home page (to add comments).

You can Add a comment or ranking to this page

© WELL HOUSE CONSULTANTS LTD., 2019: 404 The Spa • Melksham, Wiltshire • United Kingdom • SN12 6QL
PH: 01225 708225 • EMAIL: info@wellho.net • WEB: http://www.wellho.net • SKYPE: wellho

PAGE: http://www.wellho.net/mouth/4037_Cas ... -page.html • PAGE BUILT: Sat May 27 16:49:10 2017 • BUILD SYSTEM: WomanWithCat