Most web sites now use style sheets to format the look of their pages, especially as the new W3C specifications have depreciated certain tags:-
<applet> <basefont> <center> <dir> <font> <menu> <s> <strike> <u>
With style sheets, much more formatting is available, but the main reason is to try and get conformity across different browsers, and also to make web pages available for different devices.
A blind person or surfer with other disabilities should be able to use the net. When the surfer enters a page (with the right program installed such as 'Jaws') it will speak the words. That's one of the reasons why images should always have a meaningful 'alt' statement, so the surfer gets a idea of what the image is about. Not all browsers display images.
Inline Styles
The 'Inline' style is the easiest to explain, but is only useful for one-off styles that are not used much. It can be used in many ways and could be used to style most elements, but only effects the element that it's in.
Example:- <b style="padding:1px 5px; color:black; background:yellow;">Hello<b>
Hello
Styles have the format 'Name colon Value semicolon' and you can add as many commands in a list as you require. These are called 'style rules'.
A semicolon is used to separate different items in a style list.
Example:- <b style="padding:1px 5px; color:white; background:red;">Hello<b>
Hello
The last command doesn't need a semicolon, but it doesn't hurt to include one. If you omit a colon or semicolon (or make an error in any way) the style rule will just be ignored. It will not generate an error.
Embedded Style Sheets
The 'Embedded' style sheet is more useful (but still not the best), as it will effect every occurrence of that element on your page. I use an embedded style sheet for developing a page, then when it's finished, transfer it to an external style sheet. The following format is inserted in the <head> of your page:-
<style type="text/css">
<!--
b {background: yellow;}
-->
</style>
Every occurrence of bold text on that page would now have a background colour of yellow. This is just an example, as you might not want to have every bold tag to be coloured with a yellow background.
The <!-- --> are comment tags, and are only there for browsers that don't support style sheets. Also, you must also use curly brackets { } for the style attribute. Standard brackets ( ) don't work, and the style rule will be ignored.
Linked (or External) Style Sheets
The 'Linked' style sheet is the most useful, and is the PREFERRED type. One style sheet can control a complete website with a 1000 pages. If you look at other pages in this section, they are all in the same format and are formatted by just one style sheet (I'm lying here as some pages have 2 or 3 style sheets). I could alter the title colour in the style sheet, and on every page the title colour will change accordingly.
Another benefit is that once your browser has loaded the style sheet, when you access another page, it doesn't need to reload the style (as the style sheet information is cashed by your browser) so making the page load faster.
A style sheet is just a simple text file with a list of Style Rules. Nothing else is needed (no comment tags are needed, as in an Embedded Style Sheet). You can use Notepad to create one and save it, with the file extension '.css'. It will now act just like an 'Embedded' style sheet, but can be linked to any other page that requires the same style.
Here's an example of a very simple externally linked style sheet:-
body {color: black; background: url(bg1.jpg);}
h1 {color: red; background: transparent; font-size: 30px;}
h2 {color: blue; background: yellow;}
img {margin: 5px; border: 0px;}
A style sheet can be named whatever you like, providing it has the .css file extension. To link to an external style sheet, insert a line in the <head> of your page as follows, with a name matching the style sheet you've created:-
<head>
<link rel="stylesheet" href="name.css" type="text/css">
</head>
I usually use the embedded method to start with as it's easier to edit, then when the page is finished, I cut and paste the style sheet and turn it into an externally linked style sheet.
You can also have more than one style sheet, a mixture of all 3 types or you can 'Import' a sheet into an embedded sheet. With the 'Media' attribute, you can even state which device you want the style sheet to be used for e.g. Screen, Print, Aural, Braille etc. but lets keep it simple to start with.
Style Sheet 'Classes'
You can attach different styles to the same tag by using the 'Class' attribute. A 'Class' begins with a full-stop and can be named anything you fancy, but it's better to use names that mean something in the structure of your program. In the example below, I've used the name 'redtext', but this would be misleading if I edited the colour to blue at a later date. The name 'heading' or 'subtitle' would have been more apt.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>My First Web Page</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.redtext {border: 1px solid red; color: red; background: white; text-align: right;}
.highlight {background: yellow; padding: 2px;}
-->
</style>
</head>
<body>
<p class="redtext">Red text with a red border aligned right</p>
<p class="highlight">This text is highlighted</p>
<p>This text is not affected by the style sheet</p>
</body>
</html>
Red text with a red border aligned right
This text is highlighted
This text is not affected by the style sheet
Style sheets in general
Html tags can also be grouped, so as to affect more than one element. The tags are just separated by a comma.
Example:-
h1, h2, h3 {color: green;}
A useful html tag when using styles is the <span> tag. It can be used to affect just part of a line of text like so.
Example:-
.important {color: red; font-size: 20px;}
<p>This line of text is <span class="important">Important</span> to me</p>
This line of text is Important to me
A point to remember when creating a webpage in the usual default colours (black text / white background) is to include this in your style sheet, as it's possible the surfer has altered his setting and your page might not display as you wanted it to.
Something most people forget when using style sheets is that you can use the 'Class' attribute in the 'body' tag of your html page. You can use this method to give varying backgrounds to different pages, but yet using only one style sheet.
body.aircraft {background: #abc;}
body.document {background: #ccc;}
body.memorial {background: #369;}
Then, by using <body class="aircraft"> the background colour will be whatever's in the style sheet. By editing the colour, all pages referring to that style will change. Notice that I have now put the word 'body' in front of the class. If I used this class in any other element, it would have no effect because it's tied to the body tag.
A quick look at 'IDs'
The 'ID' attribute starts with a hash sign #. With an ID, you can only refer to it once in your webpage. An ID must have a unique identifier i.e. it should match only one reference to it. You may find that some browser versions let you refer to them more than once, but it's bad programming and that's not what they are for. Use a 'Class' if it's used more than once.
An example of an ID rule in a style sheet:-
#maintitle {color: navy; font-size: 22px; font-family: Arial, sans-serif;}
How it is used in a webpage:-
<h1 id="maintitle">My Website Title</h1>
I hope this has given you enough to start experimenting with Style Sheets. There are hundreds of commands and some have multiple values so you really need a book on the subject to go further into it. Style sheets can be used to format and position text and images on your webpage, but this is more advanced and not covered here.
