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. (http://www.vcn.bc.ca/help/guides/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). (http://www.w3.org/Style/CSS/ ) 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.
(http://www.w3.org/Style/ )
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 is available at webreview.com or richinstyle.com
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. Examples of CSS Level 1 stylesheets we'll use during the SIG meeting http://webtechsig.org/Presentations/oct02/basic.asp
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.
Where Can I Learn More?
- http://www.w3schools.com/css/default.asp - Here's where you find tutorials from the source that sets the standards. You can also take a 'quiz' that will tell you just how well you understand CSS Level 1 selectors. (Note: it took me 2 tries to get 100%, I don't usually comment my code so I tend to forget the correct syntax for comments, see if you can do it in 1)
- http://glish.com/css/ One of the "holy grail" sites of CSS, not only will you find tutorials but complete function CSS layouts to replace the most frequently used basic layouts such as 3 column fluid layout, 2 column ALA (A List Apart - http://www.alistapart.com/index.html) style,.
- Speaking of alistapart.com check the stories index and you are sure to find css topics of interest http://www.alistapart.com/stories/
- http://www.htmlgoodies.com/beyond/css.html
- http://www.pageresource.com/dhtml/indexcss.htm
- http://westciv.com has a complete set of courses available for either free or
at a low cost. These classes include:
HTML & XHTML for CSS is currently (October 12, 2002) available for free at http://westciv.com/courses/course_info/html_and_xhtml/index.html
Their other course CSS Level 1, CSS Level 2, CSS Guide and Color & Graphics are available for purchase either individually or in various packages starting at $14.95. See http://westciv.com/courses/buy/index.html
History of HTML http://www.cacr.caltech.edu/~slombey/asci/html/