Jerry's Cascading Style Sheet tutorial

What are Cascading Style Sheets?

When HTML was first created, it was primarily designed to display documents and to create links between documents. It was never intended to present stylish content. Eventually, as more and more people from areas outside of the academic community began to use the web, tags like <font> text sizes and colors, began to make creating a web page a very labor intensive process.


To solve this problem, Cascading Style Sheets (CSS) were created. CSS enables the web designer to design the layout and design of the page in one place, and concentrate on the actual content of the web page. It not only saves work, it simplifies the process of creation, since content and design are easier to understand on their own, when separated. If design changes are desired, only one document needs to be altered. Prior to the use of CSS, changes would have to be made throughout the entire document. Every single tag in which fonts needed to be changed had to be changed, which is not only extremely labour intensive, but highly prone to error. Creating new pages with a uniform style to join the rest of the website is as simple as linking to an external CSS document.


How do we use it?

Like HTML, CSS are written in plain text on a simple editor such as MS notepad. Files are saved with an extension of ".css" There are three ways to use CSS.

  • External Style Sheet
  • Typically a file saved with a ".css" extension
  • In the head of the document
  • Used for simplicity if there is only one page in the website.
  • In-line, inside of the document, for individual elements
  • Typically used for minor changes in one page.


Although CSS is most powerful when it is located in a separate document, and "Cascades" throughout the website, the styles involved can be located in the head of the individual HTML page, in the document, or even within individual tags. This way a single element can be changed, a larger element, a single page, or an entire website. Styles made in a single element, will override styles made in an area, which override styles made for the entire page, which override styles for the entire website.


How were Cascading Style Sheets created?

Style sheets have been around in different forms since the 1980s, used with Standard Generalized Markup Language, but the current use of CSS was first proposed in 1994 by HÃ¥kon Wium Lie. He had been working at CERN with Tim Berners-Lee, the creator of the World Wide Web. The World Wide Web Consortium released it's first recommendations for CSS1 in 1996.


In the early days of the web support among browsers for CSS was spotty at best and developers could not always be sure that their content would appear the same in every browser, but as browsers become more responsive to current development, this has become less and less of an issue. Microsoft's Internet Explorer 3 was released in 1996 and it had some limited support for CSS. The next year IE4 and Netscape 4 added more support, but it was very prone to error. IE 5 for Macintosh was the first browser to introduce full support for CSS1.

I hope you will join me for the next lesson Lesson 2

Additional Resources


Copyright © 2016 Gerard Briardy