Imagine you're running a job-listing site, and you need to put up a list of newly-posted jobs every week. Your boss wants the job titles highlighted by putting them in large print and a different color.
Version 1, with in-line <span style="..."> tags.
Your boss just came in and said "The green looks great, but I'd really prefer bright green for the pay scale, and a light blue-green for the job title." The result is in Version 2.
Knowing that your boss is likely to change his mind again and again, you'd rather not have to edit all the colors in every job listing (of which there could be hundreds) every time.
So in Version 3, we've created a style sheet at the head of the document, which defines what a "jobtitle" and a "payscale" look like, as special "classes" of <span> tags. Each <span> tag now refers only to its class name, rather than specifying all the formatting details. The next time your boss changes his mind, you can just change the colors in one place (the stylesheet, at the head of the page) rather than in every single job listing.
Since these listings come out every week, you've actually got a lot of different HTML files that should all use the same style. In Version 4, I've moved the style sheet into a separate file, version4.css so it doesn't need to be repeated in each HTML file. And if you have changes to make, you can make them in one place (the version4.css file) and they'll affect all the HTML files that use that stylesheet.
Note that if you're using an external stylesheet, then instead of
<style type="text/css">...</style>,
you need a line like
<link rel="stylesheet" type="text/css" href="whatever.css">
to tell where the stylesheet is for this Web page.
This line, like the <style... stuff, must be in the
document head (not the body).
I don't know how to create an external CSS file in Mozilla or SeaMonkey, but once you've got one, you can change it in Mozilla or SeaMonkey: go to the "File" menu, choose "Open File", select "Files of type: All Files", double-click the name of the existing file, then back to the "File" menu and choose "Edit Page". So you could simply copy one of my CSS files as a starting point, and change it as you wish. Or if you prefer, you can write the thing from scratch in WordPad (just make sure to "Save as type: Text Document", not Rich Text Format).
In version 5, I've added a few other style rules: the first line of each paragraph is indented 0.5cm, all headers are centered, and all <LI> list items have a half-centimeter space after them. (There are lots of other formatting controls, most of which I don't know myself; for details and examples, see W3Schools's CSS Tutorial.)
Note that I haven't changed anything in the HTML file except what stylesheet it uses; the additional rules are all in version5.css.