CSS: An Overview
What we know:
Hypertext Markup Language(HTML) is the basic language that defines where text, images and media are placed on a web page on the Internet. HTML contains an important item: Hyperlinks, elements that you can select in order to open another document or progress through a series of documents. One basic concept of HTML as in Standard Generalized Markup language (SGML), it's predecessor, is that web document structure and web document presentation should be separate. HTML extensions were developed to change the presentation, but did not work very well and could be quite time consuming with a multi-page document. Cascading Style Sheets(CSS) was developed and ratified by the World Wide Web Consortium(W3C) in 1996 to alter the presentation of the HTML page in order for it to look more pleasing to the eye. Depending on how CSS is used, it can provide consistency of style to elements in documents within one website and save a lot of the designer's time. At least this was the theory behind the development of CSS, to make web sites look and read a lot better when their pages appear the same or similar. Unfortunately the implementation of this theory has fallen short. Alicia Dougherty in her 1998 article CSS Reality Check says, “CSS implementations don't deliver on the promise. The gaps between CSS support in various browsers make the Grand Canyon look small”. Depending on your web browser, when you use Cascading Style Sheets, the resulting web page may not necessarily look as you had intended. According to Dr. Web, most designers saw inconsistencies rather than stability from one browser to the next and there were so many bugs, flaws and omissions that designers stayed away.
The great decision:
Cascading Style Sheets(CSS) are built as levels and not versions. This is great because you don't have to call it CSS 3.0 or CSS98. More importantly, with each new level of CSS it would be designed to enhance and expand the previous level. In this case the level does not have to conform to a specific version, it just has to follow global syntax of CSS.
So why use CSS?
Back in 1997, Microsoft barely supported CSS in IE3 and Netscape 3.0 never supported it. Netscape barely supported it in 1998 and at that point Microsoft's support had drastically improved. With the advent of IE5 and Netscape 4.x, the browsers had made great leaps in improvement, but there were still no cross platform consistency from one browser to the next as the W3C had mandated with the creation of HTML 4.0. One new powerful browser has come on the scene, Opera Software. The Opera 4.0 version recently released, claims full support of Cascading Style Sheets. The browsers' creator Hakon Wium Lie also happens to be one of the original designers of the web specifications for the W3C group on implimentation and standards for CSS. There has also been a recent announcement that Netscape Navigator's 5.0 has fully implemented CSS1 in their browser. It appears that CSS web compatibility's time has finally come, if you can deal with the nuances from one browser to the next. Web pages will look tremendously better especially for corporate use.
What do we do, if a browser does not implement or recognize CSS?
If a browser does not recognize CSS it will still recognize the basic HTML document and it's tags. It is important to start with a basic HTML 2.0 document, making sure you validate the HTML document using an HTML validator and make all spelling and grammatical corrections before adding CSS to it. Remember compatibility is the number one priority and making sure some form of the document is on the web page for everyone to read, even if not everyone can see the web document at its best. Not everyone upgrades his or her computer to the latest browser software.
What is the future of CSS specifications?
Hopefully all browsers will be compatible with at least CSS1. Bert Bos, one of the CSS creators for the World Wide Consortium has indicated that CSS will probably be broken down into smaller specs called modules. There would be “Colors and Background”, “Selectors and Syntax,” or “Printing”. This would allow the CSS working group greater flexibility. The working group would be able to key in on one module at a time for improvement and issues could be handled more efficiently and effectively. The most important part is to get CSS1 correct before moving on to CSS2.
So tell me, what are Cascading Style Sheets?
CSS is a “template” for controlling design, layout and data for your web pages. By using style sheets you also save bandwidth by decreasing the file size. There are currently two levels of CSS: CSS1 and CSS2. In the wdvl Quadzilla archive, the author explains that, “Because you can use more than one style on a page, the browser follows the rules in a cascading order from general to specific to determine precedence and resolve conflict”. The three types of style sheets are inline, embedded and external. Cascading Style Sheets work the same no matter where they are, although the location dictates priority in conflicts. Inline(in the HTML body, in a specific line) style sheets takes precedence over embedded(located in the HTML document header) ones and embedding takes precedence over linking(external stylesheet linked to the original HTML document)ones. CSS is a rule composed of a selector element and a declaration statement. The selector is the HTML element to be modified. The declaration is the combination of property and value statements. The selector is any HTML element prior to the braces or any object you can name through the Document Object Model or DOM. The declaration includes the content of the braces and the braces themselves. For example:
H3 {color:blue;}
-H3 is the selector and {color:blue;} is the declaration.
We can change the color, size, font, alignment or any HTML attribute, but only if we can name the elements to be changed. There can be comments made within any CSS, but the tag must begin with (/*) and end with (*/) within the curly braces. As a matter of fact there are other characters that must be matched. These are parenthesis ((and )), brackets ([and]), single quotes (‘and’) and double quotes (“and”). A string is what is contained within single or double quotes and it has special meaning in CSS.
How to use an inline style/rule:
The inline style holds the highest priority of all the CSS rules. When placing a rule(style) within the body of the document, you will need to use the following format:
selector{property:value;}
In this case an example of this type of rule would be as follows:
<P><H3{text-align:left;}>The rain in Spain</H3></P>.
This is an example of a CLASS inline style, where H3 is the class. There is also the ID inline style. When you assign an element an ID tag, that item is singled out. If you use the ID attribute more than once in a given document it weakens its effect and purpose. To use the ID attribute, you must embed the following code in the header:
<STYLE TYPE=“text/css”>
<!-- H3 {color:red;}
#blue{color:blue;}
#bigger{font-size: 14pt;}--></STYLE>
When you place the ID attribute in the body of this document, it will be inside an H3 class tag. It will look like this:
<H3 ID=“blue” or ID=“bigger”>
Then the H3 tag will change accordingly. The main difference between CLASS and ID is that with CLASS you can have more than one element in your document, this way you can refer to them as a group. To define several style rules within the document you would use the following format:
Selector{property:value; property:value;...;}
In this case an example of this type of rule would be as follows:
<P><H3 {text-align:left;color:blue;font-family:Verdana,Arial;}>The rain in Spain</H3></P>
Another possibility is, in order for an element to work, it must be contained within another element:
selector selector{property: value;}
In this instance you may want to have a section of text underlined and then italicized:
An example of nesting tags to achieve this effect is:
<P><U EM{text-align:left;color:blue;font-family:Verdana,Arial;}>The rain in Spain</U EM></P>
The problem with using the inline style is that it defeats the purpose of separating the style from the data. That's OK if used within reason and not over used.
What is an embedded style?
CSS rules can be embedded in the Header part of the HTML page and can be useful for the opening page on your website. To give it that special look! The following must be used <STYLE TYPE=“text/css”> and closed with the </STYLE> tag. If you have an older browser the style tag may not be read, it probably does not support style sheets. Therefore the selector{property:value;} must be enclosed in a<!--and --> within the style tags in order for the text within not be shown. This way the computer will not interpret it as anything other than an HTML comment being made and not read as text on that page. The TYPE attribute must be used in order to indicate the style language used. You may list as many rules as you would like to be defined, but they will only apply to that specific page. They also must be listed as selector{property:value;}. If an external file defined a CSS rule, the rule in the header would take priority and override the external style sheet.
What is an external style sheet?
A CSS external style sheet consists of a series of statements or a rule set. This is several declarations enclosed in a block. Don't forget to surround the block with a set of braces. Blocks can be nested but every left brace must have a right ending brace to go with it. CSS rules that are located in an external file may be linked to one or all of your pages of one web site. The purpose of an external rules file is to create consistency over the course of several documents and the Internet user understands he or she is looking at the same site and have not gone onto a different site. An example of this is:
H3{font-family:Verdana, Arial, Geneva;
text-align: center;
color:black;}
The H3 is the selector and everything else within the braces are declarations or directives. A CSS rule list is composed of both classes and pseudo-classes. Examples of CLASSES are BODY, Headings (H1, H2, H3, H4, H5, H6), P (paragraph), UL (unordered list), LI (list), STRONG (bold), EM (italic), TABLE (table), TD (table data), and CODE (computer code). Pseudo-classes are anchor tags, when they are a link, a visited link or when you come over the top of the link and hover. Examples of pseudo-classes are A: LINK, A:VISITED and A:HOVER. You can even create your own classes. You just have to preface your created selector with a period. There are also elements and pseudo-elements. Unfortunately, current browsers do not support pseudo-elements at this time.
Conclusion:
CSS is a great, relatively new concept that is slowly becoming a reality. Who knows, maybe all current versions of browsers will eventually support CSS and maybe sooner than later. Whatever the outcome, it is important to learn how to use cascading style sheets, so your web pages comply with the W3C standard for HTML.
|