Welcome
................................
Schedule
................................
Calendar
................................
Guidelines
................................
Journaling
................................
Our Websites
...............................
Contact Info
...............................
Resources
...............................
Links
...............................
|
|
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 |
|
