|
If you are a web designer and haven't been living in a cave for the last few
years, then you must have heard of the amazing CSS technology! CSS is short for
'Cascading Style Sheets', and is a part of current web standards. Quite simply,
it allows you to define your entire design from one simple document, making
templates an utter doddle to set up and maintain. To help you get to grips
with the new technology, this tutorial covers the basics of CSS setup, and helps get you
well on your way to a more complete understanding of the CSS methodology.
Section 1: The Basics
Style sheets come in two
distinct flavours - internal (i.e. the CSS definitions are part of the source
HTML document), and external (i.e. All CSS definitions are in a separate file).
For the sake of this tutorial we will be exploring external stylesheets only.
All you need are two files - yourfile.html and yourfile.css.
Put your CSS definitions in the .css file as simple text, and the HTML in the
.html document. Section 4 will tell you how to link the files together.
|
body{
background-color:#000000;
}
|
This small snippet is the CSS code to change the background
color of your web site. Looking at it, we can break it up into a number of
different components:
-
'body' - This tells the browser what is going to be affected. Using 'body' means that all
<body> tags will have
this style. This can be changed to any html tag. To have it apply to multiple tags separate each with a ','.
Eg. body, font, td
-
'{' and '}' - The curly brackets encase all of the attributes assigned.
-
'background-color:' - 'background-color' is one of the many CSS attributes. It defines the objects background
color, similar
to the HTML attribute 'bgcolor'. Notice that it is followed by a colon ':'. All CSS attributes will have this colon.
-
'#000000' - This is the user-defined part of the attribute. Enter any six digit hexadecimal
color value here. #000000 will produce
a black background.
-
';' - The semicolon is very important. It is the closing
tag for all CSS attributes and is needed the
browser to tell when old attributes end and new ones begin.
Here is another example showing the syntax for using more
than one attribute:
|
body{
background-color:#000000;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
|
Section 2: The Class
If you want to define unique sets of variables for various uses (i.e. a 'bigtext'
class for headings, and a 'specialtext' class for important text
sections), then you will have to make use of classes. These are defined as
follows:
The CSS:
|
.bigfont{
font-family:Arial, Helvetica, sans-serif;
font-size:40px;
}
|
- '.' - The dot says that you are starting to declare a class.
- 'bigfont' - This is the user-defined name for the class. Call it whatever you want.
-
'{font-family:Arial, Helvetica, sans-serif; font-size:40px;}'
- As with example 1, these are the user-defined attributes enclosed by curly brackets.
The HTML:
|
<font class="bigfont">This is big text.</font>
|
Now I'll explain CSS classes. Here is a rundown of the
different components:
- 'class="bigfont"' - Here is where you select the class you want
to use (and, hence, what attributes you want to apply to the font).
Classes are very useful because they can be used an infinite
number of times, and can apply to whatever HTML tag takes your fancy (unless, of
course, you declare attributes for a specific tag, which will be explained
later). Just to make sure you have been listening, though, here's a few more
examples:
Example 1:
|
<td class="bigfont">
<font class="bigfont">This is big text inside a <td> with the same class applied.</font>
</td>
|
Example 2:
Here is an example of a class made specifically for a <font> tag. Notice the only difference is the preceding word 'font' before the '.'.
The HTML:
|
font.bigfont{
font-family:Arial, Helvetica, sans-serif;
font-size:40px;
}
|
The HTML:
|
<font class="bigfont">This is big text.</font>
|
- Tutorial written by Gus Mayo
|
