link to hitmill.com home page


CSS Tutorial:
Introduction to Cascading
Style Sheets Rules

This article is an introduction to Cascading Style Sheets Rules (CSS) for Web page formatting, especially written for students relatively new to hypertext markup language (HTML) Web pages. Cascading Style Sheets is the name of the technology. It is incorrect to call the rules Cascading Style Sheet rules but rather they are Cascading Style Sheets rules, as strange as it sounds. CSS is the abbreviation for Cascading Style Sheets. Many prefer to simply call this technology CSS.
CSS is used for Web page formatting of text elements and positioning of objects using the z-index layers and the pixel-measurements from the top of the object container and from the left side of an object's container. Our CSS Tutorials are listed below.
External Resources on the Web

TIP: A text editor called "Edit +" 3.51 is easy to use, has free trial downloads available, and supports several technologies such as HTML 4.0, CSS 3, Java, PHP and more and this software right now is for Windows machines.. Read about EditPlus at the above link.


What is CSS?

Cascading Style Sheets (CSS) is a mark-up language that was first proposed in 1994 by Håkon Wium Lie. CSS works in conjunction with HTML to greatly increase the ability of Web designers to control the appearance of Web pages. You will be able to position HTML elements, images, objects exactly where you want them on the page by using CSS rules or rules of CSS-P which is positioning with style sheets. HTML describes the structure of the document and CSS controls the appearance of the Web page.
All of the CSS mark-up coding for an "internal style sheet" occurs between the <HEAD> and </HEAD> tags in the HEAD section of the HTML document. An "in-line style" occurs inside HTML tags in the body section of the HTML document.
An "external style sheet" is linked to, from within the HEAD section of the HTML document.
These types of style sheets will be defined and explained later.

You will notice that curly braces are used instead of the left angle bracket and right angle bracket of HTML. This rule says that all <H2> elements will have blue italic 33 point text. (We will get to rules shortly but I just wanted to show you how simple a rule looks). This rule can fit all on one line, or rules may take up several lines. If you want to break your line in a CSS rule, break your line after a ; character.
The style sheet is a set of Cascading Style Sheets (CSS) rules that tell the browser how to display the page. The HTML document is what you code and the Web page is what you see. When you use CSS rules inside an HTML document, be aware that the various browsers do NOT display the Web page similarly and be sure to test your pages in more that one browser before uploading your pages to the Web server.
If you read books about CSS you will be seeing the acronym DTP. This just stands for desktop publishing. CSS borrows terms from the desktop publishing industry and you will be seeing some "borrowed" terms when expressing styles. Cascading Style Sheets information is available free at the World Wide Web Consortium's Web site, W3C.org You may have to click on a CSS link if it is not spelled out.


Why Use Style Sheets?

Instead of coding all of the attributes and values of the HTML elements into the web document you will now place one rule for each attribute and value one time into one place -- the style sheet. You no longer have to use the <FONT FACE="Arial, sans-serif" SIZE="6" COLOR="blue"> Blue Title</FONT> each time you need for specify a font change. You just mark-up the structures in HTML and let Cascading Style Sheets take care of the appearance. This you will find also makes for smaller size documents that load faster. Site maintainance time is cut because you just change the style sheet in one place one time instead of having to hand code a change on every page. You will like CSS and will want to learn more about it after the following short introductory tutorial.


Introductory CSS Tutorials

What is a Cascading Style Sheets Rule?
Includes the template for internal (in-document) style sheet.
Linking to external style sheet
Linking to an external style sheet in the same folder, in a different folder at the same site, and at a different Web site
Using In-line Style
Occasionally you will want to over-ride the persistence of the internal style sheet. In-line style is the way to do it.





External Tutorials & Guides

Cascading Style Sheets Home Page at W3C
   Specs., tutorials, CSS Validators, browsers, tools, and more
Get Started with Cascading Style Sheets (builder.cnet.com)
StyleMaster Tutorials for CSS (StyleMaster is for the Mac Computer)
Effective Use of Style Sheets
The Web Design Group's Guide to Style Sheets
CSS Pointers' group: for use of CSS
Download a CSS Guide $19.95 (I have not seen this e-document to evaluate; many other online guides/tutorials are free; Search)

Additional Resources


Web Content Accessibility Guidelines
   Proposed Recommendation 24 March 1999
W3C Technical Reports and Publications
lots of stuff
   Announcement of CSS-2 by Håkon Wium Lie
CSS-1 W3C Working Draft of 9 December 1995
   Authors: Hakon Wium Lie, Bert Bos; included here for historical significance
Cascading Style Sheets, level 2: CSS2 Specification 12 May 1998
CSS Mobile Profile 1.0
CSS3 module:Basic User Interface (Working Draft 2 August 2002)
International World Wide Web Conferences

CSS Books

Cascading Style Sheets, Designing for the Web, 2nd Edition At the amazon.com site: Published July 2, 1999 by Addison-Wesley-Longman.

Related Links




Updated 09 May 2013
© hitmill.com
All Rights Reserved