How do web documents work? For many people running websites, what follows will be the most elementary information. For others, it may be something you’ve never needed to know. So let’s investigate!
If you just save some plain text as a document, it can be opened and read by a browser. Like this. How it looks (the font, size, alignment, etc.) is determined in the viewer’s browser by the ‘defaults’ set up there for instances when there are no style instructions.
If I put some ‘tags’ around my text, the browser can interpret different parts as different things. Examples would be ‘h1’ to indicate the main headline, and ‘p’ to indicate a paragraph of body text. It doesn’t show them, but just takes note! Like this. How the headline and the paragraph are displayed is set by the default styles applied at the viewer’s end for those particular elements.
That’s all there is to an HTML (Hyper Text Markup Language) document. The original idea was that the writer of the document specified the headlines, paragraphs, tables, etc., and the readers would set up their browsers to display those to their individual preferences.
With the advent of the web, document creators wanted more control over how their ‘pages’ displayed, so a whole new code set was developed so that the reader’s browser preferences could be over-ridden, and the document coded to specify what its creator wanted the fonts and sizes to be. Fortunately, in the mid-1990s an idea was quickly adopted to allow all this styling information to be put in separate accompanying documents, called Cascading Style Sheets (CSS). This meant that different styling could be offered and applied for different types of screen (or even printers). With mobile web devices still years away, it proved to be a far-sighted move.
The best demonstration of CSS is a website called CSS Zen Garden, which has been around since 2003. This site takes a standard HTML document, with a simple set of markup tags, and presents it in unbelievably different ways, just by using different style sheets. After all this time, it’s still the best demonstration of what CSS is for.
And that’s it really. You can see the HTML code behind any web page by ‘viewing the source’ in your browser, and in that HTML document you’ll see links to the relevant CSS documents, which you can also freely view. It’s worth understanding how all this comes together if you want to manage any website confidently.