-- Add CSS to a Web Site --
It's possible to change how a site looks by adding styles to common HTML statements.
Under the </HEAD> statement on a page, is <BODY> which can be modified with style statements.
A simple example is:
BODY { background-color:#FF0000;}which will change the whole body of the page to RED.
To do this, insert the following code somewhere in the <HEAD> section of the page after the "Meta" tags.
<style type="text/css">
body { background-color:#FF0000;}
</style>
You can change the color to anything you want it to be. Please be careful what you select here, as I've seen some sites where the color was so overwhelming it was almost impossible to read the text on the page. Like most things, too much of a good thing isn't good anymore.
Just about any HTML statement can be modified with Styles
Where CSS really shines is when you control your pages with an external Stylesheet. It's literally possible to change the look of the whole site with changes to just one file, the stylesheet.
To use an external stylesheet, add a line that looks like this:
<link rel="stylesheet" href="stylesheetname.css" type="text/css" media="screen"> to the <HEAD> section of the page.This tells the browser where to look, and what to look for in a stylesheet. It also tells the browser what to do with it when it reads it, hence: Media=screen.
Now, lets write a simple stylesheet.
We will open a blank document in Notepad and when we are through, save it as style_one.css.
First, save this to the HEAD of your HTML page.
<link rel="stylesheet" href="style_one.css" type="text/css" media="screen">Next, lets give the background of our page a pleasing color.
Add this to our style_one.css file.
body{ background-color:#00ffff; }
This will make the body background color a nice Aqua color.
Next on our page, we want a big red centered heading so we add an <H1>YADA YADA</H1>to our HTML page and the following to our stylesheet:
H1{ color: red; text-align: center;}
We can do this with H2, H3, H4, etc also.
H1, H2, H3{ color: red; text-align: center;}
It would be good to have the Heading separated from the rest of the page with a yellow line, so we add <hr> to our HTML and:
HR{ color:yellow; }
to our stylesheet.
We expect to have many paragraphs on our pages, so it would be nice to have control of the indenting of the first word. We can do that automatically with our Stylesheet, and more too.
Lets add:
P{ padding:5px;
font-size:100%;
text-align:left;
text-indent: 5px;
}
to our stylesheet.
If you want to see what this page looks like, here is the example
However, suppose we want to have more than one <H2> on a page and don't want all of them to be alike. Not a problem. We can do that with an inline style.
Any style that is closest to the item being styled will take precedent.
So, the HTML for our 2nd <H2> lets write it like this:
<H2 style= "color: blue" >This is our second H2.</H2>
Here is what it looks like.
Let's talk about Precident for a moment.
Our separate stylesheet will style the whole website, however, if we have a certain item on one page we want to change, we can do that with an Inline style. If there is one page, with many items we want to change, we could use a style in the Head section of the page.
As a rule of thumb, the closer a style is to the item being styled, the higher the precident. Thus, an Inline style has a higher precident than a style in the Head of a page, and a separate stylesheet has the lowest of all.
Using CSS with Classes
If we give a style a class name, we can apply it only where we want it, without being concerned with it showing up somewhere unexpected.
Let's talk about the <H2> we discussed above. Suppose there are more places we want a red H2.
Let's move our styling to the stylesheet. Put this in the stylesheet:
H2.red { color: red;
}
The "dot" denotes a class.
Now, anywhere we want a red H2, we write it like this:
<H2 class="red">
Using a Border instead of <Hr> for a Page Divider
I recently discovered a different way to do a straight line page divider. The line above isn't done with an <Hr> tag. Rather, this information is put into a <Div> with an added style that turns on the top border of the <Div>.
Add this to the "div" tag:
<div style="border-top: solid blue 2px;">
I don't know what use this has, but, maybe someday it might come in handy.