Applied Systems Programming

Class Notes
Text: Programming the World Wide Web, 2^nd Edition (Sebesta)
Dr. Tim Margush – University of Akron – © 2003

Chapter 2 – Cascading Style Sheets

• Inline – affect a single tag
• Document – affect an entire document
• External – affect multiple documents

External style sheets are created in a css document (type/css) and are ‘link’ed from a document that uses the style sheet. The link tag appears in the head of the html document: <link rel=stylesheet type=”text/css” href= “myStyles.css”></link>

Inline styles are placed in the tag to be affected:

<p style=”font: bold 20pt ‘Courier New’; text-align:right”>

property:value;property:value;…

Document styles are defined in the head area with a style tag:

<style type=”text/css”><!--

/*a list of style rules of the following form*/

selector {property: value; etc.}

/*a selector is a list of tag names separated by commas*/

--></style>

External style sheets are simply files with a list of style rules.

Style classes

Class names can be added to tag names to create a collection of styles. For example p.left, p.right, p.bold, p.quotation

p.right {text-align: right}

p.quotation {font-style: italic; margin-left: .5in; margin-right: 0.5in}

 
<p class=”quotation>”The quote”</p>

The span tag allows a limited section of content to be styled (usually inside a paragraph):

<span style=”whatever”>stuff </span>

The div tag allows a subsection of a document to be styled (usually a collection of paragraphs or elements):

<div style=”whatever”>

stuff

</div>