Introduction to CSS

An Introduction To Cascading Styling Sheets
by K. Yue, copyright 2000
Revised: September 18, 2000

Introduction to CSS

Cascading Style Sheets (CSS) are groups of styles, which in turn are groups of properties that define how a HTML element appears in a Web browser.
A CSS defines a set of rules for assignment rendering properties to HTML and XML elements.
Advantages of using CSS:
- Provide consistency of displaying styles in the browsers
- Make maintenance of style changes much easier.
- Allow richer design and layout.
More than one style sheet can be used on the same document, with different levels of importance.
If conflicting styles for the same HTML tag are defined, the latest innermost definition, the one closest to the tag, will be applied.

Defining Styles

The most popular way to define styles for a single HTML document is within the head of the document using the following syntax:

Example 1: Using CSS (cssiontro1.htm)

<HTML>
<HEAD>
<STYLE type="text/css">

</STYLE>
</HEAD>
<BODY>
<H2>My Hobbies</H2>
<UL>
   <LI>Sleeping
   <LI>Eating
   <LI>Watching Television
</UL>
<H2>My Skills</H2>
<UL>
   <LI>Sleeping
   <LI>Eating
   <LI>Watching Television
   <LI>Pretending to work
</UL>
</BODY>
</HTML>

In this example, h2 is the selector, which is followed by the style definition, which contains property and value pairs, separated by a semi-colon.

Without using CSS, the corresponding HTML file looks like this (nocssintro1.htm):

<HTML>
<HEAD>

</HEAD>
<BODY>
<B><FONT face="Arial" color="blue"><H2>My Hobbies</H2></FONT></B>
<UL>
   <LI>Sleeping
   <LI>Eating
   <LI>Watching Television
</UL>
<B><FONT face="Arial" color="blue"><H2>My Skills</H2></FONT></B>
<UL>
   <LI>Sleeping
   <LI>Eating
   <LI>Watching Television
   <LI>Pretending to work
</UL>
</BODY>
</HTML>

Sharing style sheets among more than one home pages can be done by using the following two steps:
1. Defining the styles in a file (such as h2.css).
2. Include the style file using the <LINK> tag. The <LINK> tag should be put inside the <HEAD> tag.

Example 2:

Define the file h2.css:

h2 { font-family: Arial; font-style: bold; color: blue }

Link the file h2.css when needed (cssintro1usinglink.htm)

<HTML>
<HEAD>

<LINK rel="stylesheet" type="text/css" href="h2.css" title="h2">
</HEAD>
<BODY>
<H2>My Hobbies</H2>
<UL>
   <LI>Sleeping
   <LI>Eating
   <LI>Watching Television
</UL>
<H2>My Skills</H2>
<UL>
   <LI>Sleeping
   <LI>Eating
   <LI>Watching Television
   <LI>Pretending to work
</UL>
</BODY>
</HTML>

Alternatively, it is possible to use the import command with the <style> tag.

Selector and Properties

A property may have several values.

Example 3:

h2 { font-family: Arial, Helvetica, sans-serif }

In this case, the browser will try to set the property font-family to Arial, Helvetica and sans-serif in order.

A selector can be a pre-defined HTML tag.
A class or id can be used as a user-defined property.
Both class and id are defined within the STYLE tag.
A class definition is preceded by a period and an id is defined by a number sign.
By convention, id is used when scripting is used. An id is unique and can only be used by one element.

Example 4: classandid.htm

<HTML>
<HEAD>


<STYLE type="text/css">

</STYLE>
</HEAD>
<BODY>
<H2>My Hobbies</H2>
<UL>
   <LI><STRONG CLASS="weirdcolor">Sleeping</STRONG>
   <LI><EM ID="weirdo">Eating</EM>
   <LI>Watching Television
</UL>
<H2>My Skills</H2>
<UL>
   <LI>Sleeping
   <LI>Eating
   <LI>Watching Television
   <LI>Pretending to work
</UL>
</BODY>
</HTML>

Selectors can be defined in context and in groups.

Example 5: selector1.htm

<HTML>
<HEAD>


<STYLE type="text/css">

</STYLE>
</HEAD>
<BODY>
<H2>My Hobbies</H2>
<UL>
   <LI>Sleeping
   <LI>Eating
   <LI>Watching Television
</UL>
<STRONG><H2>My Skills</H2></STRONG>
<UL>
   <LI>Sleeping
   <LI>Eating
   <LI>Watching Television
   <LI>Pretending to work
</UL>
<h3>The End</h3>
</BODY>
</HTML>

Note:

The style definition for h3 only applies when it is embedded within a strong tag.
The style definition of h3, li and td are the same. Later, h3 is defined again to add additional properties.

Selector nesting may apply to class. For example:

Example 6:

div.code {font-family:Arial}

In-line styling can be done by using the style attribute with a syntax similar to the following example:

Example 7:

<h4 style="font-family: Helvetica; color=blue">Hello</h4>

The tags <DIV> and <SPAN> can be used as a container tag with no predefined meaning to hold style and other information.
The <DIV> tag starts in a new line and include a line break at the end. The tag <DIV> is a block-level element.
The <SPAN> follows the flow of the browser rendering.

Example 8:

The style used in preparing this lecture is: