Simple HTML and CSS

CSS (Cascading Style Sheets)

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");


Previous Start Next

Copyright © 2002 R. Harmsen