banner

Welcome
................................

Schedule
................................

Calendar
................................

Guidelines
................................

Journaling
................................

Our Websites
...............................

Contact Info
...............................

Resources
...............................

Links
...............................


 

Sample CSS File

Download a cool css file here.

Cascading Style Sheets (CSS)

Cascading Style Sheets are a convenient way to define how HTML elements will be displayed.

Setting a CSS Rule
selector { property:value; }
for example..
body { background:#000000; }
in HTML it would be <body bgcolor="#000000">

Selectors identify the element in a rule you wish to define. The selector can be a HTML tag/element, a class or an ID.

Properties identify the attribute you wish to change.

Values are assigned to a property to define it.

Setting multiple values in a rule
p { color:ff0000; font-family: verdana,helvetica,arial,sans-serif; }
Make sure to seperate each definition with a semi-colon!

You can also group selectors by listing them seperated by commas.
body,p,h1 { color:ff0000; }

Class Selector
The class is located after the period (.)in the following examples:
p.myclass
.anotherclass

And you set them by calling the class within the tag...
<p class="myclass">
<td class="anotherclass">

Note that the class p.myclass can only be used in a <p> tag while the class .anotherclass can be used in different tags

Display Order of Precedence
Inline Styles (within HTML element)
Internal Style Sheet (embedded within the <head> tag)
External Style Sheet (using the <link> tag within the <head> tag)
Default Browser Settings

Inline Styles
<p style="color: red; text-transform: uppercase;">An all uppercase paragraph.</p>

Placing an Internal Style Sheet
<head>
<style type="text/css">
body { background:#000000; }
p { color=#ff0000; }
</style>
</head>

Linking to an External Style Sheet
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

An example of a basic internal style sheet
<head>
<style type="text/css">

body { background:#cccccc;
font-family: times,'courier new',serif;
font-size: 10pt;
color:#000000 }

p { color=#ff0000; }

h1
{ font-weight: bold;
font-style: italic; }
</style>
</head>

An example of an external style sheet
See the file here.

Note that this file needs to be named filename.css and included is each HTML page with the following code.

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

DO NOT include any HTML in the .css file.

Additional resources
Webmonkey Style Sheet Guide
  
  
  
  
  

welcome | schedule | contact | resources | links

Site designed and developed by
Daniel O'Connell

Any questions or problems: