CSS An Introduction
So you’ve heard all about CSS and the wonderful things it can do and you fancy giving it a whirl. What you will need first is a basic understanding of what it is and how to use it.
CSS is a way to control the styles on your website and to keep content separate from layout as much as possible. So how do we use CSS?
There are three ways to incorporate CSS into your web page; you can either put the code inside the <head> section; you can create a separate page containing only the CSS and link to it from the <head> section of your pages or you can place it in the middle of your HTML as and when necessary.
To declare inside your web page you should use the following inside the <head> section;
<style type="text/css">
<!--Place your CSS here
-->
</style>
The above is all well and good for a small website with only a few pages but for anything larger you should consider creating an external style sheet (a separate document that contains your CSS). All you need to do then is to link to it from each of your pages. The code to placed inside your head section for doing that is;
<LINK href="style.css" rel="stylesheet" type="text/css">
The final way, which is useful if you have a ‘one off’ CSS instruction to use is to place it inside your HTML; this is known as an inline style.
The best way to visualise these three methods of incorporating your style sheet is with a few examples.
First the declaration inside the <head> section of each of your web pages;
<html>
<head>
<title>Foo Widgets</title>
<style type="text/css">
<!--
img {
border: none;
}
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
}
->
</style>
</head>
As you can see from the above you are declaring the styles of certain aspects of your web page. These will act as a kind of default throughout the page, for example everywhere you use the <h1> tag the text will appear in bold size 14 Verdana.
With an external stylesheet you would simply put your CSS in a document and save it with a relevant name such as style.css, then link to it from each of your web pages with the code used earlier. For example, if your external stylesheet contained the following;
p {
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 7pt;
color: #ffffff;
margin:5px;
}
All of the text within <p> tags on your website would have the above style associated with them.
Finally an example of inline styles;
<h1 style="margin-top:5px; margin-bottom:5px">A Header</h1>
I hope this brief introduction to CSS has wet your appetite and sparked your imagination to the possibilities; if you find it useful let me know.
[…] project. I will write a short tutorial for beginners and when it’s done I’ll put a link HERE. (If that’s not a link it’s because I haven’t done it yet), (Also, if you read […]
Pingback by Guzunda » Saving The Universe With CSS — November 10, 2007 @ 10:15 pm