[Types] [Class] [Cascading] [Pseudo-class] [DIV]
[Format] [Positioning] [Conflicts] [Index]

Cascading Style Sheets - Content

Note: Lines of code are often shown folded to fit. However, in many cases, this code should be completed on a single line. Exceptions abound but the single line rule is the safe route.

A. CSS Types
There are three types of style sheets constructs.

1. Linked or external style sheets are master files that can control a number of pages. They are called from constructs placed within the <head> tags. For example, the master style sheet call for this page is:
<link rel="StyleSheet" href="../style/398J_first.css" type="text/css"> and produces the formatting that you see.

2. Embedded style code blocks are placed within the <head> tags of a document and further placed within <style> tags. Control is applied to the elements identified within the style tags. For example, with:

<style type="text/css">
<!--
h6 {font-family:"Comic Sans MS"; font-size:16pt; font-weight:lighter; color:blue;}
h3 {font-family:"Times New Roman"; font-size:22pt; font-weight:600; color:darkgreen;}
-->
</style>

within the <head> tags then

<h6>I feel blue</h6>
<br><br>
<h3>Whatever!</h3>

produces --
I feel blue

Whatever!

These embedded styles over ride linked styles and are over ridden by inline styles. The comment constructs <!-- --> are included to preclude rendering of the style information should a viewer be using an old, pre-style sheet, browser.

3. Inline styles are placed within a given tag and apply only to the text affected by that tag. For example;
<p style="font-family:Times New Roman; color:red; font-size:22pt;">I'm Hot!</p> produces --

I'm Hot!

These inline styles over ride embedded and linked styles.

upup
B. Class as a Selector
Being able to relate style characteristics to HTML tags, although quite useful, is at the same time limiting. CSS allows you to create a selector of your choosing called a class. For example, the master style sheet for this page includes a class .emphasis which you see working here. In order to effect this presentation, the .emphasis selector was coupled with a CSS <span> construct as shown below.

<span class="emphasis"> which you see working here</span>

Class selectors can also be used with HTML tags as is shown here using the <p> tag.

<p class="emphasis"> Class selectors can also be used with HTML tags as is shown here using the <p> tag.</p>

As you see, once defined, a class selector can be called many times and used in a variety of ways.

upup
C. Cascading and Inheritance
The name Cascading Style Sheets is derived from the fact that embedded style code blocks override linked master style sheets and are, in turn, overridden by inline code blocks. The cascading effect can be observed on this page.

A selector within a parent tag bestows its characteristics on all of its children. For example the <body> tag selector defined in the master style sheet for this page includes a margin-right property with a value of 40%. Therefore all lines on this page have this inherited characteristic of a 40% right margin.

upup
D. Pseudo-class
Pseudo-classes apply to the anchor tag and allow you to specify the colors of a link as shown below. 
A:link{color:#cc0000;}
A:visited{color:#006600;}
A:active{color:#ffff00;}
E. DIV
The <div> </div> tag pair identifies a container for text and images that then can be manipulated as a unit. For example:


COMMON SENSE.

December 23, 1776.

Thomas Paine

THESE are the times that try men's souls. The summer soldier and the sunshine patriot will, in this crisis, shrink from the service of their country; but he that stands it now, deserves the love and thanks of man and woman. Tyranny, like hell, is not easily conquered; yet we have this consolation with us, that the harder the conflict, the more glorious the triumph. What we obtain too cheap, we esteem too lightly: it is dearness only that gives every thing its value. Heaven knows how to put a proper price upon its goods; and it would be strange indeed if so celestial an article as FREEDOM should not be highly rated. Britain, with an army to enforce her tyranny, has declared that she has a right (not only to TAX) but "to BIND us in ALL CASES WHATSOEVER," and if being bound in that manner, is not slavery, then is there not such a thing as slavery upon earth. Even the expression is impious; for so unlimited a power can belong only to God.
Paine, Thomas. _Common Sense_. Philadelphia: printed and sold by W. and T. Bradford [1776]; Bartleby.com, July, 1999. ISBN: 1-58734-037-2 URL: http://www.bartleby.com/br/133.html [Friday, June 01, 2001].

is produced using:
<div style="font-size:8pt; font-family:monospace; color:teal;"> THESE are the ... </div>

F. Format
A summary of often used CSS code blocks is provided here: 
A single selector with many properties.

Selector {
property#1:value#1
property#2:value#2
*
*
*
property#n:value#n
}

or

Selector {property#1:value#1; property#2:value#2; ...}
	
For example:

body {
margin-left:2%;
margin-right:40%;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10pt;
color:#000000;
background-color:#ededff;
}
or
em {font-size:10pt; font-family:Verdana, Arial, Helvetica, san-serif; 
color:maroon; font-style:normal; font-weight:bold;}

Multiple selectors with multiple properties

selector1,selector2,selector3,... {property#1:value#1; property#2:value#2; ...}

For example:

ul,ol,p,li {font-size:10pt; font-family:Verdana, Arial, Helvetica, 
san-serif; color:#000000; background-color:#ededff;}

Selector style="property:value list"

For example:

<p style="font-family:Times New Roman; color:red; 
font-size:22pt;">styled text</p>
and
<div style="font-size:8pt; font-family:monospace; color:teal;">

Selector class="identifier"

For example:

<p class="emphasis">styled text</p>
and
<span class="emphasis">styled text</span>
upup

The CSS code block examples on this page were formatted using the following set of guidelines.
  1. Although browsers usually ignore spacing, it would be best to limit the use of the space bar. A space is used only between:
  2. A brace is used to contain property:value sets.
    pre {font-size:10pt; font-family:Verdana, ...}

  3. Multi-word value literals are enclosed using quotation marks.
    {font-family:"Comic Sans MS";}

  4. Property value pairs include an ending semicolon.
    {font-size:22pt;}

  5. Class and style calls are enclosed within quotation marks.
    <span class="emphasis"> and
    <div style="font-size:8pt; ...">.

  6. A colon is use to associate a property with its value.
    {margin-right:40%;}

  7. Multiple selectors are separated using a comma.
    ul,ol,p,li {font-size:10pt; ...}
G. Positioning
Using style sheets to position images and text is sufficiently involved to warrant a page of its own. Interesting effects can be achieved using the positioning features of CSS.
H. Conflicts and Difficulties
It probably is no surprise that the various browsers respond differently to the same CSS code. It is often necessary to use convoluted constructs to make it all work. So be sure to test your CSS effects using different browsers. Another difficulty lies in the fact that CSS technology is still evolving. To further complicate matters is the large number of possible combinations of selectors, properties, and values. For more information, please see the CSS references listed on the Webliog page.

upup

Return to Index