CSS Tutorial-Chapter One
Introduction
It just happened gradually when more and more browsers supported it and more people became interested in CSS and content semantics. It’s not like some day everyone just used CSS. How does CSS really help (a host of questions like: cost versus benefit; learning curve, changes to your lovely web pages and so forth?) So when did we first hear about CSS? What on earth is content semantics?
When did we first hear about CSS?1
Below is a brief history which is not all inclusive.
- Tim Berners-Lee’s original NeXT browser had a simple style sheet language. Wrote in 1990 the first GUI browser, and called it "WorldWideWeb". It ran on the NeXT computer.
- Pei-Yuan Wei, author of the ViolaWWW—famed for being the browser that introduced the concept of applets, three years before the inception of Java — posted his own stylesheet proposal on October 22, 1993.
- On October 10, 1994, Håkon Wium Lie released his very first draft of what was to become CSS. The most important concept introduced in Håkon’s proposal is the cascade — the concept of interaction and prioritization between an author stylesheet, user stylesheet, and finally a User Agent (browser) stylesheet.
- The Mozilla Project’s separation from AOL/Netscape (2003); it paved the way to Firefox, which paved the way to a whole new generation of web apps. None of this would have happened in an IE-only future.
- Dave Shea, a web designer from Vancouver, Canada created Zen Gardens somewhere around 2001. This beautiful display was my "Road to Enlightenment," CSS
which allowed for complete and total control over the style of a hypertext document. A marriage made in web design heaven between the graphic artist and mere mortals like myself. CSS was truly a
beauty to behold.
Learning Curve
The language of CSS is entirely different from what you may know about HTML. The Cascading Style Sheets specification is a computer language that is used to write formatting instructions (rules). These rules tell a browser how webpage content should ‘look’ in terms of layout and style.
Learning a new programming language would immediately send most of us out into the hedge ways, screaming or sobbing. But thankfully we have a host of CSS authoring tools, one of
which is Style Master which I have used exclusively. Will Style Master immediately propel you into mastering CSS? No dear friend, but we will start this tutorial like Tina Turner's
Proud Mary which opens slow and then launches into a spicy hot swamp rock anthem. We will take you on this journey, slow and easy but end on a proud note, spicy and hot.
Cost Versus Benefit
Cost is in terms of initial personal time and effort and acquiring some excellent tools of the trade. Time may be significant, but a one time investment. So if you are like most of us and continually update and change or wish that you could easily change web pages, the time saved will shortly and quickly exceed your initial time and effort in learning CSS. There is a modest investment for software like Style Master, which will pay for itself over and over again.
So what will be your benefit? First some important considerations which may tickle your fancy. Then ending this section of our tutorial with an example in the last section below.
- Increases download speed (using CSS syntax instead of images or sound files). Once a stylesheet has been downloaded, it is typically stored on the user’s computer (cached). For each subsequent webpage viewed, only the HTML needs to be downloaded.
- Many new visual control features.
- Easy to author and read.
- Easy extension for future capabilities.
- If all pages link to a centralized CSS file, then the look of a website can more easily be updated. For example, the colours or size of all level-one headings can be changed by updating a single CSS rule.
- As the code required to style content can be removed from individual web pages, the size of each webpage file is reduced. Depending on the benchmarks, file sizes may be reduced by up to 60%.
- As less code is required for each webpage, both the likelihood of coding errors and time required to add content to a website are reduced.
The list above does not contain all benefits, so I listed those which may appeal to a person who wishes to have a compelling reason to start using CSS.
What Will Happen To My Lovely Page Pages?
You worked long hours, got everything right and your web pages looked just fine. Several months later, being a typical webmaster or mistress, you wanted to make changes, but up to this point did not use CSS. Below is what a portion of your web pages may contain in the HTML section.
The web page source view shown to your left may be any web page without using CSS or cleaning up the HTML code.
Notice the styling elements like font face=Arial, font size yellow, size=4 and image border=4. We will discuss those table attributes and "table less" layouts later on as this tutorial expands.
Consider what you would have to do when making a change to this typical web page design. You would have to go line by line and page by page to make changes. Then possibly stuck with the realization that you had made a coding error or were not happy with your changes after all of this additional hard work.
Since this particular web page used tables for layout and so forth, there was no significant savings by our conversion to XML and CSS. Notice that the table elements are still there, like bgcolor but we have something new. See the class=c3? Also at the top starting with span: c2 and ending with </style>
In later chapters of this tutorial we will explain how to also omit table styling references by using a class or ID in the CSS. Or convert to table less design. But like we said earlier, we will start this tutorial like Tina Turner's Proud Mary which opens slow and then launches into a spicy hot swamp rock anthem. We will take you on this journey, slow and easy but end on a proud note, spicy and hot. We will also explain the lines at the top in terms of an inline CSS and external CSS.
Now settle back with a beverage of your choice (mine is Colombian ground coffee bean), hard copy this introduction to CSS and determine whether this CSS thing may be a cup of tea to sip and enjoy. Be sure to visit the links within the tutorial, footnotes and resources too, because there, not here is where your journey really begins.
Footnotes: