Originally, HTML was meant to structure a text, but not specify how it should look. So there were "tags" (the "commands" between < and >) for a title, headings at various levels (<H1>, <H2>, <H3>, etc.), paragraphs <p>, lists and hyperlinks.
The browser determined what the text should look like, based on its structure and the features of the monitor, but it wasn't defined in HTML.
Later on people wanted to be able to specify that too, and extra "tags" were introduced, for font size, text colour, background colour, etc. etc. That seems great, but it has many drawbacks:
CSS (Cascading Style Sheets) has elegant solutions to all these problems.
With CSS you associate presentation characteristics to HTML tags.
These properties can be described with few details or many, but
it is done only once, not every time again. It's best to use the
standard HTML tags (for example body, h1, h2, p, strong), so the
content (HTML) doesn't have to contain anything special about
presentation aspects (CSS).
Example: Suppose I want a nice
looking font in all my pages. I select one, and in the CSS file
I link to I write:
body
{
font-family: Trebuchet MS, Arial, sans-serif;
margin: +32pt;
}
That's because I kinda like Trebuchet, tastes differ. But it is a
Windows font, which other operating systems probably don't have.
It could be that only rather new Windows releases have it, and
older ones don't. I don't exactly know that, and I don't want
to know, don't want to have to know. I can afford that by
specifying alternative fonts. If the browser doesn't have the
first font mentioned, it can use the second, or else even the
third. Arial is also sanserif, and is available in any Windows
version since 3.1.
A sans-serif font is implemented in
some form or another on any system. This means my pages won't
look exactly the same on all systems, but they
look approximately as I intended them.
I also specified a right and left margin, expressed in points (pt).
By specifying a font for the body, it also
automatically applies to p, h1, h2, li, strong etc. I can specify a
special font for each of these tags separately, but I don't have to.
If I want the same font, there's no need to repeat it.
That saves room, and limits complexity and interpretation effort
for the browser.
Microsoft®
Word®
often does it quite differently, much more
clumsily.
Some tags have subdivisions. An example is the HREF Anchor, for which
there is link (a hyper text reference that hasn't
been visited yet), visited
(a link you have visited before), active
(the link that the cursor is currently positioned to;
keys Tab and Shift-Tab usually move it), hover
(the link that the mouse cursor hovers over, without clicking
it yet).
You can have all of these
coloured
differently, by putting something like this in the style sheet:
a:link {color: #66ffbb; }
a:visited {color: #ff8800; }
a:active {color: #5577ff; }
a:hover {color: #5577ff; }
If you find these number codes difficult, you can also simply use English words to indicate them.
Earlier on I talked about how to make text
bold or italic or underlined to make it stand out. That has the
disadvantage that you must decide in advance how this bit of text
is made more conspicuous. If you prefer some other way later on,
you must go through all instances to change them. It is therefore
better to only mark which text should stand out,
not how, because that's in CSS, effective for all
pages that use the same definition.
HTML has <strong> for this purpose, text placed between those
tags gets a special, more conspicuous presentation. Above, I applied
that to the words
<strong>which</strong> and
<strong>how</strong>. It isn't necessary to write anything
for this in CSS, because the browser itself already has a built-in
way to represent <strong> text, for example by making it bold.
But if you want something else, say italics or some colour, you put
this in your CSS style sheet:
strong
{
font-style: italic;
color : red;
}
It is also possible to define your own sub-classes. Above, I did that to make the listed disadvantages stand out. I created a sub-class called disadv (short for disadvantage) of the standard element li (list-item). In HTML I then write instead of <li> : <li class="disadv">, to make those list items belong to that class, so they'll get the presentation defined for that. I define that presentation in CSS, as follows:
li.disadv
{
color : green;
font-style: italic;
}
This sub-class specifically belong to <li>. But I can also make a more general sub-class:
.disadv
{
color : green;
font-style: italic;
}
This allows me to specially mark a
disadvantage
in running text, by writing it in HTML like this:
<span class="disadv">disadvantage</span>
CSS has many more features than I mentioned here.
You'll find a more extensive explanation at
w3.org's site,
as well as full
specifications.
Hans de Jong provides this
explanation
in Dutch.
I can also recommend the book "Webdesign" by Peter Kentie
(2003
or
2005)
, and not only to get to know more about CSS.
See also this explanatory note.
I only started
using CSS myself after studying the explanation (written by Edwin Martin)
in Peter's book. My earlier attempts to get into CSS by just reading the
specs failed miserably, I just didn't understand anything.
The style sheet I use for this explanation is in the file located at "../html_en/style.css". Note that I use only one style sheet for all the languages, which was reason enough to put it in a different directory than the original Dutch text, even though I do refer to that same style sheet also from the Dutch HTML files. This is because I find the same presentation suitable for both English and Dutch, so a common style sheet suffices.
It is possible to set up a basic style sheet, which is used for many
different web pages. Additional, specialised presentation properties
for smaller sets of pages could then be in other style sheets.
These can invoke the basis style sheet, as follows:
@import url("basis.css");