CSS
Basics In this lesson you will find CSS code to put
into your <head> tag and into the <body>
of the page. CSS code can be placed in an outside file (saved as something.css),
into the head or into a tag itself. You will find
examples of each below. In-page CSS definitions override in-head CSS definitions,
which override external CSS definitions. So anything you add to a tag in your
page will be what you will see.
One caution: if you use "A"
in the link tag in the body, you must use "A" (not "a")
in the CSS. Case matters in this case!
Background Image | Indenting
a Paragraph
Double-Spacing Text | Positioning
a Title | Horizontal Line or Rule
Creating Link Colors and Effects | Dividing
the Page into Sections with Different Styles
Placing a non-repeating background image on your page
<style type="text/css">
body {background-image: url("images/tern.gif"); background-repeat: no-repeat; background-position: 50% 120px; background-color: #ffffff;}
</style>
<body style="background: url('tern.gif') #ffffff no-repeat 50% 120px fixed;"> A "fixed" image will not scroll with text and images: it well seem to be always in the same position in the window.
Indenting a paragraph or line of text
<style type="text/css">
p {text-indent:20px;}
</style>Paste the following code into any <p> tag to indent just that paragraph or line: style= "text-indent:100px ;" the full tag looks like this: <p style="text-indent: 100px;">
Double-spacing text
<style type="text/css">
p { line-height: 200%;}
</style>
style= "line-height:200% ;" the full tag looks like this: <p style="line-height:200%;">
Positioning a page element without tables
<style type="text/css">
#other1 {font-family: Comic Sans MS; color: #aa6699; font-size: 14 px; position:relative; top: 20px; left: 500px; width: 400 px;}
</style>To use these styles, insert them into your document with this tag:
<div id="xxxx"> where "xxxx" is the style name set in the head tag. You must use </div> to stop the application of the style.
Creating the link colors and effects in CSS
The code below is for the links at the top of this page.
<style type="text/css">
a:link {text-decoration:none; color:#000099;}
a:hover {text-decoration:none; color:#000099; background-color:#6699ff; text-border:0;}
a:visited {text-decoration:none; color: #000099; text-border:0;}
a:active {text-decoration:none; color: #000099; text-border:0;}
</style>
<style type="text/css">
a:link {color: #666666; text-decoration:none; background-color:red;}
a:hover {color: red; text-decoration:underline; background-color:blue;}
a:visited {color:#660000;text-decoraion:none;background-color:green;}
</style>
Dividing the page into sections with different styles
Do this by using the <div id="...."> tag explained above and the <p> tag with font styles and other values. For example:
<div id="bibliography"> this will give the attributes of the class "biography" (defined in a <style> in the <head> section) to this section of the web page.
<p align="center" style="text-indent: 30px; line-height: 100%;"> this creates a single-spaced paragraph indented 30 px (a little over 1/3")
Horizontal line or rule
Use a horizontal line to divide the sections of your page. The horizontal rule has these properties: color, height, width, shading. You can place these values into the CSS or place them into the tag itself.
hr {width: 300px; color: silver; height: 1px; shade:no-shade; position: relative}
(shade can be no-shade or left out entirely; postition can be relative to margins and page elements immediately above it, or absolute, in which case you will need to define its postion with an x and a y coordinate: position: center 35px
<hr height="1" width="65%" no-shade color="#660000" align="left"> (shade can be: no-shade or left out entirely)
Elizabeth Sky-McIlvain 11/17/02
