cascading stylesheet (CSS)

HTML should be used to define the content of your web page, Javascript should be used to define how it behaves. In between the two and interacting with both we have cascading stylesheets (also known as CSS). Stylesheets define the appearance of your web page.

CSS can be linked to a document in two way:
hard coded into the head secrion of the document

<HEAD>
...
<style type="text/css">
.p { font-family: "Times New Roman", Times, serif}
</style>
...
</HEAD>

called from an external file

Long gone are the days where you would use <font> tags to define the fonts to be used in your web page. Almost as long gone are the days of using align="center" to centre the content of your page. As for using tables for layout well that is so limiting as well as being a misuse of what tables are for. By using stylesheet commands to define the way that your web content looks as well as how the page is laid out you open up a number of possibilities that are not available any other way.

Validation is an important part of ensuring that your web pages are useable by as many current and future web visitors as possible. The following links will take you directly to pages on the web that will assist you in this validation.

Why upload your page and then discover that the source does not meet the HTML standards? The official W3C HTML validator will allow you to check your page source against the HTML or XHTML standards before you upload. W3C set the standards so who better to validate your page for you.

Another way to fix many of the errors in your HTML source before you upload it is using HTML Tidy which is a free download that will not only validate your source but will also fix many coding errors for you.

Once your HTML is valid you then need to check the other source on your page such as your stylesheet. The CSS Validator (also from W3C) can assist you with this.

You don't only need valid code for your page, you also need the page to be accessible to many visitors who for one reason or another do not use the latest version of Internet Explorer or Netscape. Bobby can test your page for accessibility once you have uploaded it.

Another problem is broken links. Some web sites will sell you a program that will check your links for you. I don't know why you'd want to buy one of those though because W3C also provide a free link checker that can validate all of the links on one page in one go. Alternatively you can download a free program from Xenu that can check for broken links over an entire web site in one go and then display the results in a web browser window for you. Both of these options also tell you about temporary and permanent link redirections so that you can decide whether you are linking to the most effective address.

Anatomy of a CSS page

CSS anatomy

Applying CSS

If the tag already exists the style should automatically apply itself, for example the previous page used the p selector, so every instance of <p>, in a html page that this stylesheet is applied to, will use 'times new roman' font size 'xsmall' etc...
To apply our own styles to tags (or to override previous assignments) we can use the attribute class as follows:
<p class=”mysmall_heading”> new paragraph markup</p> this will override the <p> tag assigned above.
We can use this class=”abc” attribute in a number of different tags for example, <tr>,<td>,<th>,<div> etc... and there contents will be styled in the way specified.