Cascading Style Sheets (CSS)

About this tutorial:

This tutorial starts from the beginning and explains what CSS are. It then explains how to use them in HTML code. Throughout the tutorial there are links to helpful pages with additional information. There are countless pages that give information about style sheets. An excellent place to start to look for more info would be the W3C CSS page. But in the meantime please continue on with the tutorial.

CSS: what exactly are they?

Cascading Style Sheets describe how documents are presented on screens, or in print. CSS is a fairly new and simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. CSS is basically a template that contains a set of “rules” that tell how you want your page to look. These rules are either referenced in a separate file or embedded directly into the HTML code.

Why are they beneficial?

The main reason CSS is beneficial is that it allows better control over the layout of Web Pages. It allows you to add more style to the pages then you would be able to with normal html.

Style sheets can also cut down on the amount of coding you have to do on your page. For instance, if you wanted a page where all the plain text is green, bold and font size 2, you could create a style sheet to do this instead of having to write the font and bold tag for every instance of text.

Also style sheets allow more ease of updating and changing of pages. For instance, say you have 5 Web pages and they all reference 1 style sheet document, and you decide you want the text to be red now instead of green. You just go and make the change to the one CSS file and now all 5 Web pages will display the red text.

In addition, CSS can lead to quicker downloading pages. As we said above there is less coding of pages. The less code the faster the page load. Also because of CSS skillful use of colors, fonts, tables and layers, the need for large and numerous images can often be reduced.

What are the disadvantages of CSS?

The main problem with CSS is browser compatibility. Even though CSS was introduced in 1994 it was slow to catch on at first. Therefore most older browsers do not support CSS (IE 1&2, and Netscape 2&3). Microsoft Internet Explorer 5.0+ can handle most CSS functions and IE 5.0 for Mac’s claims to support all of CSS . Netscape 4.0+ can use most major functions and Netscape 6 can handle just about all the CSS functions. In general most newer browsers give support of the major CSS functions this includes Opera, Safari, and Firefox.

Part 2:

How to use CSS >


Think Big We Do

Copyright © 2017 University of Rhode Island.