Before you start | Next Tutorial
Where do you put it? Right between the two head tags:
<head>
<style type="text/css">
body {font-size: 2;}
</style>
</head>
That's right! Inbetween the head tags. Easy Peasy.
Lets have a look at the inside of our style sheets:
This is something you might find in a Style Sheet:
H1 {font-size: 2;color: red;font-family: verdana;}
Notice the inside is surrounded by these: { } not [ ]. Each tag is separated by a colon ( : ), but after them we have a semi-colon ( ; ) Not too confusing I hope.
OK. Now that is done, let's have another look at another Style Sheet:
<style type="text/css">
p, body, H1 {color: black; font-weight: bold; text-align: left; font-family: arial;}
</style>
What is this we have here? We have in our Style Sheet p, body, H1. What is this you ask? Instead of having a separate Style for each one, you can put them all together in the same one, separating them by commas ( , ). Clever? Easy? Thats right!
No. You can be neat like this:
<style type="text/css">
H1 {color: black; font-weight: bold; text-align: left; font-family: arial;}
</style>
Or not so neat like this:
<style type="text/css">
H1 {
color: black;
font-weight: bold;
text-align: left;
font-family: arial;
}
</style>
This is a great way to make a little bit of text a different color when using Style Sheets. In your Style Sheet you write this:
<style type="text/css">
.bluetext {color: blue; font-family: time new roman;}
a.bluetext {color: blue; font-family: time new roman;}
a.bluetext:hover {color: red; font-family: time new roman;}
</style>
And in your HTML write:
<a href="page.html" class="bluetext">Blue Text</a>
So only that part of text is blue. All you add to your font tag, link tag, H1 tag or any other tag you're using is: class="something".
Or you can do this:
<font style="color: blue; font-size: 11px;">Blue Text</font>
Well you could write this in each of your pages head tags:
<style type="text/css">
body {color: black; font-family: courier new;}
</style>
You can put that Style Sheet into a file and name it style.css. Call it whatever you want and put this at the top of all your pages:
<link rel="stylesheet" href="style.css" type="text/css">
And that Style Sheet will be on every page. The great thing is if you want to change your text from courier new to arial, you change it on style.css and it will change it on EVERY page. That means you don't have to go through every page and change every Style Sheet. Yippeeeeee!! It will save you a heap of time. I recommend it.
Here are a few that can be used:
p
H1 to H6
DIV
A:link (When you have an unvisited link)
A:hover (When you mouse over a link)
A:visited (When you have visited link)
A:active (When you have just clicked on a link)
Here are a few definitions that can be used:
font-family
font-size
font-weight
text-align
text-decoration
color
Plus many more!!!
So, are you starting to like Style Sheets? I love them. Keep reading the next tutorial to find out more about Style Sheets!