How to: CSS (Cascading Style Sheets)
By: Dave Markey '06
CSS was designed to make a web developers job easier, by fixing a lot of the
problems that developers face. CSS is most powerful when used as a tool that
allows you to make universal changes to all the pages on your site by changing
one document. This CSS document will control and define areas on your page,
and will do everything from applying color settings to position settings. This
tutorial will describe CSS, its properties, uses, and show you how to build
your own CSS style sheet document.
There are four ways you can use styles on your page:
Linking to an External Style Sheet
An external style sheet may be linked to an HTML document through HTML's
LINK element:
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css"
MEDIA=screen>
The <LINK> tag also takes an optional MEDIA attribute, which specifies
the medium or media to which the style sheet should be applied. Possible values
are
* screen (the default value), for presentation on non-paged computer screens;
* print, for output to a printer;
* projection, for projected presentations;
* aural, for speech synthesizers;
* braille, for presentation on braille tactile feedback devices;
* tty, for character cell displays (using a fixed-pitch font);
* tv, for televisions;
* all, for all output devices.
The REL attribute is used to define the relationship between the linked file
and the HTML document.
Embedding a Style Sheet
A style sheet may be embedded in a document with the STYLE element:
<STYLE TYPE="text/css" MEDIA=screen>
<!--
BODY { background: url(foo.gif) red; color: black }
P EM { background: yellow; color: black }
.note { margin-left: 5em; margin-right: 5em }
-->
</STYLE>
The STYLE element is placed in the document HEAD. The required TYPE attribute
is used to specify a media type, as is its function with the LINK element.
Similarly, the TITLE and MEDIA attributes may also be specified with STYLE.
* Import an external stylesheet into the HTML document.
* Add styles inline in the HTML document.
An important thing to remember is you can either "redefine" an HTML tag to have
properties or make your own div area with properties in it. I will explain both.
The W3C suggests that you use a note at the begining of your seperate CSS
document to denote the start of a CSS document.
Example:
/* CSS Document */
To start a page you need to define whats called a div (division) in your document.
There are many types of div's but the 2 most common you'll see are <div id="">
and <div class="">. Classes are defined in the CSS document using a period
and id's are defined using a pound sign like this:
.classname
#idname
After the id or class definition you'll notice I typed classname and idname.
You do NOT need to use those, simply place any name with no spaces you'd like
to use on your page for example this page uses the name "contentcenter" to define
this beige box you see.
After the name you place your brackets. All the information that the area is
defining will pull from within these brackets. This information is called CSS
properties. So your id or class will look something like this:
.classname { }
#idname { }
Now your probably wonder that the difference between id and class are. Id's
are generally used within a class. What I mean by this is on your HTML page
you'll probably see something like this:
<div class="classname">
<div id="idname">
information for id here</div>
information for class here
</div>
Another site that explains this can be found
here
Properties:
Properties are used to define what your class, id, or redefined HTML tag will
do.
Remember to use spacing to keep everything looking good. I tend to set
my style sheets up like this.
.classname {
position: absolute;
margin: 1px 1px 1px 1px;
top: 120px;
background: #000000;
}
Good site that describes CSS properties and what they do.
-Click
Here-
The way a property is set up is like this:
property: value;
This is the property, It tells what to edit, for example
background color, text color, position, etc.
After the property goes a colon ":" this denotes the start
of a value.
Next goes a space then the value. Remember all values
with a number then a measurement need to be next to eachother, if you put a
space between them it will not work.
Example:
top: 120px; This is the correct way.
top: 120 px; This is the WRONG way.
Some properties have 4 values, they go in clockwise order. Top. Right. Bottom.
Left.
Example:
margin: 10px 10px 10px 10px;
After your value(s) you will use a semi-colon ";" to denote
the end of your value.
The next step is to repeat for your next property. Now that you know how to
use the properties I'll teach you how to define a custom HTML tag.
Redefining an HTML tag:
To redefine an html tag in your document you need to do two things.
Get a tag to redefine and find where that tag will be. Redefining a tag will
look similar to making your own div class/id.
Example:
img {
border: 2px solid #000000;
}
That was an example of just redefining a tag. That tag happened to be the img
tag. This means every img on my page will have a 2px solid black border. If
I just want to define this tag in a cetain section I'd do something like this:
Example:
HTML> body .contentcenter img {
border: 2px solid #000000;
}
That states that within the html code there is a body tag and within the body
tag is my .contentcenter div class and I'm only defining the img tag in that
area to have a 2px solid black border.
Linking Style Sheets:
After you make your style sheet document you need to link it to your page. The
easiest way to do so is place this code in your web pages <head>
<link rel="StyleSheet" href="style.css" type="text/css" media="screen">
Inlaid Style:
An inlaid style is exactally the same as a seperate style sheet except that
it is individual for each page on your site. You'll usually find all the styles
within the head of the document in style tags that look like this: <style></style>
Example:
<head>
<style>
img {
border: 2px solid
#000000;
}
</style>
</head>
Style Sheet Notes:
Style sheets allow you to place notes in the text anywhere outside the value
areas without disrupting your document or how it works. To place a note use
/* place all your notes here */
Example:
/* CSS Document */
.header {
position: absolute;
right: 20px;
left: 20px;
top: 20px;
bottom: 20px;
border: 5px solid #000000;
background: #999999;
height: 110px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
height: 80px;
}
html>body .header {
height: 80px; /* ie5win fudge ends */
}
Please Remember:
Remember style sheets can be very intricate and involve a good time of work
trying to get each browser to work with your page. This is the style sheet I
use for this page:
/* CSS Document */
.header {
position: absolute;
right: 20px;
left: 20px;
top: 20px;
bottom: 20px;
border: 5px solid #000000;
background: #999999;
height: 110px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
height: 80px;
}
html>body .header {
height: 80px; /* ie5win fudge ends */
}
.contentcenter {
position: absolute;
right: 20px;
left: 240px;
top: 120px;
/*bottom: 20px;*/
padding: 10px;
border: 5px solid #000000;
background: #F5F5DC;
}
.navbar {
position: fixed;
left: 20px;
top: 120px;
padding: 10px;
border: 5px solid #000000;
background: #999999;
width: 205px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 175px;
}
html>body .navbar {
width: 175px; /* ie5win fudge ends */
}
.navlist {
padding: 0 1px 1px;
margin-left: 0;
font: bold 12px Verdana, sans-serif;
background: #000000;
width: 180px;
color: #000000;
}
.navlist li {
list-style: none;
margin: 0;
border-top: 1px solid #000000;
text-align: left;
}
.navlist li a {
display: block;
padding: 0.25em 0.5em 0.25em 0.75em;
border-left: 1em solid #650033;
background: #F5F5DC;
text-decoration: none;
}
.navlist li a:link {
color: #000000;
}
.navlist li a:visited {
color: #000000;
}
.navlist li a:hover {
border-color: #F5F5DC;
color: #FFFFFF;
background: #336666;
}
html> body .centercontent img {
border: 2px solid #000000;
}
