Cascading Style Sheets

Developer Newsletter

Tutorials
AJAX
ASP
CGI & Perl
CSS
Flash
HTML
Illustrator
Java
JavaScript
Linux
MySQL
PHP
Photoshop
Python
Wireless
XML
Miscellaneous

Scripts Directory
AJAX Scripts
ASP Scripts
ASP.NET Scripts
CGI & Perl Scripts
Flash Scripts
Java Scripts
JavaScript Scripts
PHP Scripts
Python Scripts
Remotely Hosted Scripts
Tools & Utilities Scripts
XML Scripts

Web Hosting Directory
ASP.NET
Budget
Dedicated Servers
Ecommerce
Linux
Resellers
Shared
Small Business
Windows

Developer Manuals
Learn HTML
Learn PHP
Learn CSS
Learn AJAX
Learn JavaScript
Learn Pear
Free White Papers

Developer Resources
Developer Tools
Developer Content
Survey Software
Dedicated Servers

Cascading Style Sheets - CSS

By Neil Williams
2007-11-08

The HTML4 way to control HTML output

Style sheets are designed to bring some of the simplicity of word processing styles to HTML. You can define how certain sections of text and code will be displayed, even down to the font and size. You can change the way that existing HTML tags operate within your pages. e.g. the <p> . . . </p> tag can be redefined to change all the text within the tag to a specific font, size, indent, emphasis and position.

Style sheets aren't as new as they may seem. Internet Explorer 3 partially implemented style sheets but you should only expect CSS to function correctly when viewed in a version 4 or later browser - either Netscape or Microsoft.

The main advantage of style sheets is in making a consistent 'feel' for your site. By pre-defining all the styles you use, everything in the page can be organised sometimes without making any changes to the actual data. This is done by using an external style sheet that can be applied equally to all pages on your site:

<head>
<link rel="stylesheet" type="text/css" href="mycssfile">
</head>

This site uses external style sheets to achieve that consistent look and feel, by linking the same stylesheet to all similar documents. Whether internal or external, the style sheet is ignored by all older browsers. This leads to duplication in the common files as a body style is defined in the style sheet and in the html tag. This is not a problem - the CSS definition contains instructions to newer browsers to justify the text and to only use certain font families, a task that is beyond the capability of the HTML <BODY> tag anyway

Tutorial Pages:
» The HTML4 way to control HTML output
» Introduction to style sheets
» Style classes, ID's and altered HTML tags
» Using CSS to avoid tags deprecated in HTML4
» Your complete CSS1 + CSS2 reference

Copyright © Neil Williams

| Write For Us

Related Tutorials:
» Planning Your Stylesheet - The Definitive Guide
» CSS Shorthand Properties
» Print Stylesheet - The Definitive Guide
» Using CSS Selectors to Highlight Unedited Form Fields
» An Introduction to CSS
» Overlapping tabbed navigation in CSS