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