CSS training - Cascading Style Sheets (UK course)

Archive - Originally posted on "The Horse's Mouth" - 2008-06-15 14:56:36 - Graham Ellis
It's Sunday ... and I've been teaching Cascading Style Sheets (or rather "I've been teaching a customer about cascading style sheets") ... one of our delegates for this week's PHP course asked me to spend a few hours going through CSS with him ahead of time.

Here's an example ... using the "KISS" approach (Keep it Simple, Stupid) to avoid the whole thing getting too complex for its own good. I've chosen to post this today to show you just how much better it is to use classes and divs than other more complex specifiers on standard HTML elements - for I have only to add in another surrounding tag and my standard classes would fail, but the classes go on working.

The source code:

<html>
<head>
<style>
table table {
  align: center;
  color: red;
  background: blue;
  }
table table tr td {
  padding-left: 100px;
  color: yellow;
  background: green;
  }
.maths{
  padding-left: 100px;
  color: green;
  background: yellow;
  }
</style>
</head>
<body>
Flubber<br />
<table width=100%><tr><td width=100% align=center>
<table border=1>
<tr><th>Say what</th><th>To whom</th></tr>
<tr><td><div align=center class=maths>Hello</div></td>
<td>World</td></tr></table>
</td></tr></table>
<br />
</body>
</html>

How it looks:

And you can see the full source listing on its own page here and run it for yourself here

Main Content

CSS training - Cascading Style Sheets (UK course)