Introduction to CSS
CSS is a set of page markup definitions that can be applied to HTML documents to define how pages are rendered. This addition to the HTML tag set can be applied by Authors internally in each HTML document or they can reside in a separate server side file that is referenced and applied to the document. The enduser may also define their own Style Sheet that resides on their local system to be applied to all of the documents that they browse.
So, what are the advantages of CSS and HTML over plain HTML? For web site managers the use of an external file containing style sheet definitions means that they can control the formatting of their pages across their site without the need to edit each individual file. This is also very important when pages are generated by databases and CGI scripts.
The use of CSS commands inside a document can provide authors extended formatting features to allow specific information to be presented to the viewer in an exacting method.
For the enduser the use of a client side Style Sheet to modify how all documents are displayed can offer the ability to view information with a consistent style. For users with disabilities CSS can offer readable Font sizes, colors and face choice and in the future it will also add formatting that will instruct how pages are converted to synthesized speech.
What are the drawbacks of CSS?
Browser compatibility must be the most common difficulty. Anyone that has had problems trying to keep their JavaScript compatible across browsers and even within different versions of the same manufacture’s browser knows that making working documents that are consistent often means not using such features. If a Browser is incapable of implementing CSS it should be able to ignore the CSS style selectors and revert to standard HTML. However if you are creating documents for a closed audience, as would be the case in a Corporate Intranet environment, the probability of successful implementation is much greater.
Another factor that Webmasters should be aware of concerning the use of an external file to define CSS Declarations is that the Enduser will have to access 2 files to view their pages. This possible initial lag should be weighted against the overall load that would be placed on the server if every HTML file required additional data to be added to define the CSS information internally. Analysis of Initial lag vs. overall server load would be dependent upon the amount of CSS use across the site.
When designing a large full featured website with many different offerings such as a CMS / Blog, Shopping Cart and User Forms you will want to keep continuity throughout. This is possible by referencing standard styles in a main style sheet file and importing it into all of your different applications. Use a second style sheet to extend and meet the the requirements for specific software applications.
CSS Basics
The application of Styles through CSS is made possible by adding additional formatting controls to the current HTML TAG Elements. When the author wants to take advantage of the additional formatting a Style Selector is made and applied to the HTML element.
Example:
<style type="text/css" >
P { color:#ff0000 }
</style >
In the example above the HTML element <P> has a color declaration and the value is a rrggbb color of #ff0000 . The result would be that all paragraphs would be formatted to be displayed with a font color of red. However the Author could override this Style Declaration Value by using a child element like < font color=”blue” > inside of the paragraph.
Another important note is that where it was once common to leave the <P> tag open Authors should now take care to close it with a </P> to make sure that Style Declarations are properly controlled.
