Introduction to Style Sheets CSS web page

To understand the significance of CSS, let's consider the analogy of a book. A book has both structure and appearance. The structure of a book involves levels of information, such as chapters, pages, paragraphs, and the textual content of the book. The appearance of a book involves page size, margin, indentations, font size, color, and so forth. When an author writes a book, the author focuses on the structure and organizes the textual information into chapters, pages, and paragraphs. After the manuscript is accepted by a publisher, the publisher focuses on the appearance of the book. Notice that because the structure and appearance are separated, the author and the publisher focus on the aspect of the book that is of most concern to them. So it is with web pages.

Web pages have structure and they have appearance. The XHTML markup language provides the structure, and CSS handles the appearance. The use of CSS can save the designer hours of time. The designer can change a rule in CSS to use a different font, for example, and every HTML page that uses that rule will automatically be updated to use the new font. In addition, CSS increases the accessibility of web sites by allowing visitors to control the appearance of the web pages (a boon to persons using PDAs to access web pages and to persons who might need special font sizes, colors, etc).

Let's look at two methods of providing the rules to web pages.

Linking to Style Sheets

CSS rules can be grouped into files that are external to the web pages. Each file is a style sheet. Web pages can link to style sheets. The syntax of the link is the following, where pathtostylepage is the path and file name of the style sheet. The style sheet must have a .css extension. The link goes in the <head> of the program.

<link rel="stylesheet" type="text/css" href="pathtostylepage.css" />

Grouping the CSS rules into separate files has advantages.

	CSS provides formatting features that can't be done with XHTML. An example is page margins.
	Reduction of the maintenance of the web pages. As explained above, the maintainer can change a rule one time, and every page that uses that rule immediately picks up the change.
	The accessibility to web pages is increased. Visitors to the web site who have special needs can have their own style sheets, and they can instruct their browser to use their style sheets instead of the style sheets linked by the pages.
	Web designers spend less time tweaking XHTML statements to work with different browsers. All modern browsers now support the W3C standards for CSS.

This linking to style sheets is the method taught in this tutorial site.

Embedded Style Information

CSS rules can also be embedded within the header of the XHTML code. The following syntax is used.

An example is

<style type="text/css">
body {background-color: white}
h1 {background-color: #0000ff}
h2 {background-color: transparent}
p {background-color: rgb(255,0,255)}
</style>

Notice the <style> tag and the rule information are enclosed in XHTML comments. This provides protection when the page is read via browsers that do not support CSS. Those browsers will think the embedded information is a comment and will ignore it. Browsers that support CSS will ignore the comment and will use the CSS information.

[ Home ] [ Up ] [ Intro to CSS ] [ Type Selectors ] [ Inheritance ] [ Learning XHTML ]