oblaat
a guide to conceiving, creating & publishing your own website
a guide to conceiving, creating & publishing your own website
HTML was originally published in 1991 as a format for easily sharing information and documents between physicists. HTML was released to the public In 1993, the same year that the first browser capable of displaying images and text at same time, Mosaic, released. Academics were all over it.
The general American public got some access to the World Wide Web in late 1994 thanks to the commercial Web browser Netscape Navigator. In 1995, the web directory service GeoCities decided to allow its users to put their very own Web pages for free. The World Wide Web was for everyone.
By now people were no longer only sharing research and boring academic things with HTML. Companies sold products, people shared their lives, and you could even satiate your curiosity about the weather in Paris today. All this and yet CSS wouldn't be a thing until December of 1996.
The World Wide Web was exciting, but plain text is less flattering than something with some visual interest. So people made their websites look nice, via some hacks. When Netscape Navigator released, the developers had invented their own attributes to insert into HTML. Most common was how they allowed one to set the background of a page to a bright red, or the text to a blinding yellow. A page made for Netscape might begin like this:
<BODY BGCOLOR=RED TEXT=YELLOW>
Other browsers might not understand what the attributes BGCOLOR or TEXT mean, but they are generally designed to just ignore these weird attributes. This leaves the content to display fine for people who aren't in the loop while still putting some creativity into the hands of anyone who wanted to make a website. Any browser that wanted to compete added compatibility for this, too, because who doesn't want to look at fun things?
People also discovered that they could abuse HTML tables for wonderful effects. Instead of lines of text, one after another, it was possible to introduce a sidebar by having one column of a table full of links on the side of the screen, including all of the page's actual content in the second column. This worked, and it was a clever trick, but it was not at all intended.
Netscape also added their own element called <FONT> that could change the appearance of a specific piece of text. This might have been great in theory, but it had a large chance of completely breaking websites for anybody who did not use the most popular browser on the default settings with the right fonts installed at the right resolution. See this wonderful essay from 1996 that explains things clearer than I ever could. Now elements were not only being given unofficial attributes but a whole new element had been invented for purely visual purpose. What part of text does a "font large" actually represent?
This all made sense in the moment, but it also defeated the original purpose of the Hyper Text Markup Language: a reliable and way to share information, accessible on any device or screen, however the user desires. If only some browsers can display certain elements, those elements are certainly not viewable by everyone.
HTML and CSS are two different languages with two different purposes: HTML conveys information about a text and its meaning, while CSS defines what a website should look like.
The old method of using tables to organise the content on a Web page is the strongest example of how to misuse HTML: utilising a browser's default styling of certain elements to create a visual effect that has nothing to do with the actual definition of said elements.
A sidebar and an article are not two columns of a table, and they are not solid data in the way that numbers and names are. What about the people using more primitive browsers, or individuals who use any technology other than a computer mouse—even just their keyboard—to navigate the Web? Their hopes of understanding a Web page designed in this way are completely lost.
The FONT tag does not describe anything about the contents of a document, either: only defines some visual aspect that the author desires. Whether you agree with the idea or not, a tag representing visual styling is nothing that the official HTML standard approves of. The same goes for within the elements. The solution to these problems is a stylesheet technology, and our wishes were granted with CSS.
Now that CSS has become standard across the entire Web, there is no reason to force your styling into your document markup. There is one other reason that CSS stays separate from HTML that reduces work for both the web designer and the user, though...
CSS may be declared inside of a HTML document, but it is usually (and preferably) kept in its own file completely separate from the HTML. This has a strength: this means that the same look can be used on multiple Web pages without having to write the same code over and over again. If you wish to change the appearance of your entire website, all it takes is to change one file. Likewise, if you wish to change one Web page to look more like another, you can try changing which CSS file it references.
At a small scale, this stops copy-pasting between a small collection of files, which is welcome on its own. At a larger scale, it makes managing a website with hundreds of pages a lot smoother. The file being separate means that the browser only has to request it once, then store it in its cache, reducing the amount of bandwidth used up by both parties.