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].
(written 2013-03-10, updated 2013-04-13)
Associated topics are indexed as below, or enter http://melksh.am/nnnn for individual articles
W704 - Web and Intranet - Cascading style sheets - putting it all together [501] .css - using PHP to make dynamic style sheets - (2005-11-21)
[565] Using PHP to output images, XML, Style sheets, etc - (2006-01-15)
[994] Training on Cascading Style Sheets - (2006-12-17)
[996] Setting your colour theme through PHP - (2006-12-17)
[1677] CSS training - Cascading Style Sheets (UK course) - (2008-06-15)
[2223] CSS Style Diagrams - working out where attributes come from - (2009-06-08)
W702 - Web and Intranet - Elements of cascading style sheets [999] Cascading and the buses - (2006-12-18)
[1017] css - handling white space and pre - (2007-01-01)
[1019] span and div tags - a css comparison - (2007-01-02)
[1831] Text formating for HTML, with PHP - (2008-10-11)
[1998] Text on a background image - (2009-01-16)
Some other Articles
Report on the last year - Melksham Chamber of Commerce and Industry for Melksham Without Parish CouncilReport on the last year - Melksham Railway Developement Group for Melksham Without Parish CouncilSeed Swap at Well House ManorUsing Pygments to colour our training examplesCascading Style Sheets and formatting your web pageHTML tags uses in these blog articlesSpecial characters in HTMLThe VERY basics of a web page ... and web siteOfficial Star ratings for hotels - still worth having?Easier public transport from Melksham to Bristol Airport