History of HTML &amp; CSS

In the beginning there was text but no “style”

First There Was HTML

HTML stands for Hyper Text Markup Language and was intended to be used solely to provide document structure for a text based communication medium. (HTML was created in 1990.) So now there is formatted text with multiple levels of headings and body text.

Then Came Images

As the saying goes a picture is worth a thousand words. Image tags were added with HTML 2.0 (first released April 1994 and approved as standard Sept. 1995). How images were presented still very limited. The only attribute available was an alt tag for those who preferred not to view images or used browsers (the majority) that didn’t support images.

Next Came Tables

Starting with HTML version 3.0 tables were introduced. (Note: HTML 3.0 was never “approved” but was released under development from Nov. 93 to the expiration of the published specification in Sept. 95).According to the spec tables were for the “presentation of tabular data” only. The web is still seen as primarily a way to exchange information and access to the “Internet”

The “Subversion” of Tables

A few people noticed that tables could be used for more than just “data”. By placing images inside data cells and text in adjoining cells you could reliably control the layout of your page. It no longer ebbed and flowed according to the browser. This combined with font markup inside the table tags page display was more like that of a printed page.

“Web Designers” Enter the Picture

With HTML 3.2 it became possible to set fonts, colors, place backgrounds behind your text and many other elements of presentation. The Web Designer was now born. No longer was the page content “THE” most important part of the page. Presentation was paramount. (HTML 3.2 was published on May 5, 1996 and became the recommended version Jan. 14, 1997)

Browsers Evolved

In the early days of the web there were text based browsers. Then Mosiac and other browsers came along that supported the new tags. As more browsers became available, the entry of Netscape followed by Microsoft into the browser market for example, proprietary tags were introduced to enable users to have “a better” web experience.

Proprietary Tags-Good or Bad?

Each browser wanted to increase their market share and though “extending” HTML with proprietary tags was a good way to go about it. proprietary.html Some examples include:

<blink> Netscape
<marquee> Internet Explorer

What started as a proprietary tag sometimes made it into the next release of the HTML Spec.

Browsers & HTML Evolved

There were many problems with the “Ad Hoc” nature of the browser driven tag development. Accessibility was compromised (alt tags have existed as long as there have been images in the spec). Pages displayed differently and sometime “features” using proprietary tags didn’t display at all in other browsers. Browser interpretation of display code varied (and continues to vary) greatly.

Tags became “orphaned” as one version of competing tags became widely accepted and made it into the next version of the spec.

A Better Way CSS

Those involved with setting web standards – W3C – thought there had to be a better way. They wanted to return to the roots of the Internet and divorce all the presentation from content. Dec. 1996 saw the release of the CSS Level 1 Spec as the start of the process of separating display from content. Subsequent releases of version 4 browsers began incorporating CSS support.

What is CSS?

Cascading Style Sheets (CSS) is a simple method for adding style (e.g. fonts, colors, and spacing) to Web documents. Style sheets describe how documents are presented on screens, in print, or perhaps how they are pronounced. This has resulted in several W3C Recommendations (CSS1, CSS2, XPath, XSLT). CSS Level 1 especially is implemented in current version browsers.
By attaching style sheets to structured documents on the Web (e.g. HTML), authors and readers can influence the presentation of documents without sacrificing device-independence or adding new HTML tags.

Benefits of Using CSS

Consistent look and feel to the site.
With one or two stylesheets you can keep your site colors, fonts, links, and other elements the same throughout your site without having to hard code the same information on each and every page of your site.
Using CSS saves time.
While it may take a bit longer for the first page, especially if you are using a WYSIWYG editor to create your HTML you will save time on additional pages.
You can change the entire look and feel of a site by changing just the stylesheet.
No need to go through your site page by page to make sure the new ‘look’ is applied. – No more jarring contrasts because you overlooked a page on your redesign.

CSS Level 1 Basics

Order of Cascade in Cascading Stylesheets (from 1-4 higher numbers over ride definitions in lower numbered stylesheet)

Browser default
External Style Sheet
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
Internal Style Sheet (inside the <head> tag)
<style type=”text/css”>
<!--
body{background-color: #ffffff; color: #000000;}
Inline Style (inside HTML element)
<h1 style=”color; font-size=”3em”>

Styling HTML

Any HTML tag can be ‘styled’ using CSS but not all browsers support all tags. A table of browser support by attribute

Create custom classes to apply to limited sections of your page such as <h2 class=”green”> when the h2 tag is defined as red but you want one (or more) instance to be green example of CSS Level 1 stylesheets used at the live presentation.

CSS Level 1 Floats

Even though CSS Level 1 is primarily for text and image display there is one attribute that has some positioning properties. The “float” property allows you to specify how text flows in relationship to block elements such as images. As you can image Netscape 4.x support of the float attribute is “quirky”.

CSS Level 2 Positioning

Lets you design your page with complete control without using tables. Unfortunately there are some ambiguity in the approved specs to allow for browser “interpretation and implementation”. This means that no two browsers have to display a page in exactly the same way. While most ‘modern’ version 5+ browsers will display basic positioning more or less the same they will not be identical. For that reason it is imperative that you test any pages that rely solely on CSS in as many browsers as you can.

Examples using position: absolute, relative, static and fixed

Print StyleSheets

Even though most websites are intended to be viewed on a screen and not printed, there are always some pages that a visitor will want to print. It maybe directions, a map or it could just be a useful bit of information that would be handy to have away from the computer. Unfortunately, many of the elements that make for a good user interface on the web don’t work well in print.

Using a Print Stylesheet can:

Hide menus or other elements needed on the screen but not on a printed page.
Print the url for hyperlinks.
Change screen friendly text units such as ems or px to printer friendly measurements such as pt or inch.
Change fonts or text color for easier reading on standard white pages.
Set line breaks and page feeds.
Even substitute images such as static images for animated gifs, higher quality images with inch measurements instead of px measurements.

Aural StyleSheets

Since one of the major goals of CSS is to improve accessibility and the user experience for the disabled CSS Level 2 introduces Aural Stylesheets. Until very recently there were no browsers or text readers available to take advantage of this sort of stylesheet. That is beginning to change.

CSS3 Modules

CSS3 modules are having old CSS specifications as well as extension features.