|
hitmill.com
 |
|
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.
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. The completed recommendation for CSS-1 was released on 17 December 1996. It was revised on 11 January 1999. Håkon Wium Lie and Bert Bos are the authors of the recommendation. CSS-2 became a recommendation on 12 May 1998. CSS-2 adds to and enhances CSS-1. Several browsers support CSS but not all of the features of CSS-2 are supported yet by the major browsers. HotMetal Pro is a HTML Editor with support for CSS. CSS is easy to write and easier than HTML to learn since the selectors of CSS rules already use the names of HTML "tags". An example of a style sheet rule is H2 {color:blue; font-size:33pt; font-style:italic;} 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 TutorialsWhat 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. [TOP] [CONTENTS] Newsgroups
comp.infosystems.www.authoring.stylesheets
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 DevHead CSS PRIMER 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
Cascading Style Sheets home page (W3C.org)
Web Style Sheets Home Page (W3C.org) CSS Bug Table Developers Source StyleMaster Tutorials for CSS (CSS Editor for Mac computers) The HTML Writers Guild: CSS FAQ Nielsen's Alert box: Effective Use of Style Sheets Lay out forms with CSS-2 instead of tables Cascading Style Sheet Resources (heise.de) www-style@w3.org from January 1998 by date Articles
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.
Håkon Wium Lie and Bert Bos. Both authors are involved with W3C CSS proposals and recommendations;1999, Addison-Wesley-Longman, awl.com. ISBN: 0201596253 Eric Meyer on CSS:Mastering the Language of Web Design by Eric A. Meyer Paperback: 352 pages ; Dimensions (in inches): 0.59 x 10.06 x 8.08 Publisher: New Riders Publishing; 1st edition (June 28, 2002) ISBN: 073571245X Related Links |