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 |
|
