History
The roots of CSS can be traced back to the early 1990’s when Tim Bernes-Lee created a browser that was able to read a simple style sheet called NeXT (Wium & Bos, 1999, para. 2). As internet usage grew web developers wanted more control over how their web pages would appear in a browser. Hakon Wium Lie proposed his idea in a publication called Cascading HTML Style Sheets, released shortly before the 1994 Web Conference in Chicago. At the conference, Mr. Lie started a discussion on the uses of CSS. Reactions were mixed with some viewing CSS as innovative and others arguing a true programming language was needed to accomplish the same task.
CSS got a huge lift in 1995 when the World Wide Web Consortium (W3C) started the HTML Editorial Review Board (Wium & Bos, 1999, para.11). The W3C was created to develop a universal standard that would help foster the growth of the World Wide Web. In the beginning several people jumped at the opportunity to get involved with the organization which helped to increase the acceptance of CSS. One of the participants was Thomas Reardon of Microsoft who offered support in future versions of Internet Explorer. This was a great beginning, but CSS still needed more support before it would become widely accepted.
Evolution
CSS has evolved over time with help from many different individuals, companies, and the W3C. The first version referred to as CSS1 was released in 1996 and gives a person control over how text appears in a browser. In theory this was a wonderful concept; yet it took several years before most web browsers supported the W3C specifications. There was still a need to precisely position elements on a page, so the W3C released CSS-Positioning. "This standard was intended to be a proposal that the various parties concerned could debate for a while before it became official" (Teague, 2004, p. 8). The current standard is CSS-2 which adds international accessible rules and the ability to specify certain types of media. The third version is currently being developed and will include specifications for columns, web fonts, behaviors, and several other elements. For more information please visit the following web page for more information http://www.w3.org/style/css/current-work.
What is CSS exactly?
It is used in conjunction with HTML or XHTML to define certain aspects of a page; for instance the background color of a page, appearance of text, and the positioning of elements. The primary use of CSS is to separate the presentation source of a document from the content (text) of the page. This is accomplished by using one of the following style sheets: inline, internal or external. Internal and External styles are the most common and are defined by tags located between the heading tags of an HTML/XHTML document.
The Internal style sheet only affects the items that appear on a specific web page and can be created by placing the following tags <style type="text/css">, </style> within the heading tags. In between these tags sits a series of rules that change the appearance of a web page. In contrast, External style sheets offer more control by allowing you to link multiple HTML/XHTML pages to a document containing style information. In order to use an External style sheet you must place the following <link rel="stylesheet" type="text/css" href="name.css" /> within the heading tags. In which name.css points to the external document.
Cascading refers to what happens when several different styles are competing with each other to be displayed by a browser. "Style sheets are said to be cascading because more than one type of style sheet...can simultaneously affect the presentation of a single document" (Niederst, 1999, p. 394). For example, a document can use both internal and external style sheets in which one states the H1 tag must be blue and the other states it should be red, causing a conflict. The cascade order helps to solve this issue by providing a list of rules that are followed in a certain order. Inheritance is another important feature to discuss, because it affects how items will be displayed on a page. It is a hierarchal system that passes along style information from a style until a new one occurs.
A style sheet consists of a set of rules that contain a selector, property and value. For example, p {font: Arial, Helvetica, serif;}, in which p is the selector, font is the property and Arial, Helvetica and serif are the value. A selector can be an HTML tag, division id or class. A simple internal style sheet looks like this:
<style type="text/css">
p {
font-size: 20px;
font-weight: bold;
}
div#example {
background: red;
}
</style>
In this example all of the text contained in the paragraph tag will be twenty pixels tall and bold. The paragraph sits within a division called example with a red background. View the document.
Advantages
1. Smaller file sizes.
With CSS you are telling a web browser how to display a tag once versus HTML where each individual one has to be defined. For example, if you would like to change the text of all of the H1 tags in a document to Arial you would have to write the following command once: h1 {font: Ariel;} in CSS. In contrast HTML/XHTML requires you to write the following <fontface="Arial"> </font> for each H1 tag in the document.
2. It makes it easier to change the overall look of a web page. A change in an internal or external style sheet will affect several elements at once verses HTML where you would have to go through and change each individual element.
Disadvantages
1. It takes a considerable amount of time to learn, because of the steep learning curve.
From personal experience learning how to use CSS to layout a page takes longer to learn than using tables to accomplish the same task.
2. Lack of browser support.
Learning CSS is confusing, because not all browsers support the standards created by the W3C. For example,the fixed value was created to prevent items contained in a division or class from scrolling. This rule is not supported by Internet Explorer and all elements that are fixed will scroll as normal.
A great way to learn if CSS is right for your design is to create a page with standard HTML or XHTML. After creating this page develop an internal style sheet that will replace textual elements one at a time. As you work through the process of replacing the HTML markup with CSS preview the document in a handful of browsers to see what it looks like. In working this way you will have a better understanding of how CSS and HTML or XHTML can be used together to create a website that can be changed with relative ease.