CSS (CASCADING STYLE SHEETS) TUTORIAL
Cascading style sheets are a more recent addition to the HTML language. They are
an advanced tool giving a web designer much more control over page elements such
as font styles, colors, the page width, image location and much more. However,
you need careful testing when using them because not all browsers read CSS
controls in exactly the same way.
- Base structure of CSS:
Note: CSS code ALWAYS goes between the <head> and </head> tags.
<style type="text/css">
css code here
</style>
- Link colors with CSS:
Many sites have started to make their links with no underline. This is rather simple to do with
CSS.
Simply add the below code.
<STYLE TYPE="text/css">
<!--
A:link { text-decoration: none;
color: red;
font-family: Arial; }
A:visited { text-decoration: none;
color: blue;
A:active {text-decoration: none;
color: black;
-->
</STYLE>
In this code, the web browser is told to load links with the color red (normal link),
blue (for visited links) and black (active links). You can of course change these colors if you
wish, and it is not required to define all types of links (alink, vlink and link) in
CSS.
- Fonts in CSS:
Fonts can be a little more complicated then links, but there are many simple ways to use them.
<STYLE TYPE="text/css">
<!--
font-family: Arial;
font-weight: Bold;
font-size: 14px; }
-->
</STYLE>
These are two simple font commands. The first one, font-family lets you specify what fonts
are to be used and in what order (depending on what the user has). The second is
font-weight which allows you to choose just how the font will appear in style. Possible options
are bold, underline, italic and so forth.
- Font Colors:
Adding colors to fonts is just as easy as changing the font or the style, simply use the below code,
once again adding it to your present CSS code.
<style type="text/css">
<!-- //hide this from old browsers
H1 {color: red};
H2 {color: blue};
//-->
</style>
This makes any part of the page using the class H1 turn red and the class H2 turn blue.
- Background colors with CSS:
<style type="text/css">
<!--
BODY{ background-color: green};
-->
</style>
There is no need to add hexideimal colors here; the name is sufficient.
- Background Images and backgrounds as watermarks:
Background images are very simple to add, and using CSS they can be manipulated to do all sorts
of things, from making water marks, to starting in a certain place, and so on. Here is some
sample code.
<style type="text/css">
BODY{
background-image: url(background.gif);
background-attachment: fixed;
background-position: 50% 50%;
background-repeat: no-repeat;
background-color: white;
}
</style>
Some values that can be changed are of course the image location. For the position, you may use
top, middle, bottom, left, right and center or some% some%. For repeat you may use y or x or no-repeat
(for watermarks or non moving backgrounds). And for the color, any color will work.
- More Complex CSS: Indenting, margins and classes:
CSS does much more then just allow you to select how the page will look for fonts and links.
You can also change the margin width, allow different fonts for different "classes" and
change the background. We will show you a few samples of advanced CSS below
<style type="text/css">
<!--
BODY { background-color: rgb(255,255,255); color: rgb(0,0,0); font-family: Bookman Old Style, serif }
H1, H2, H3 { font-family: Tahoma, sans-serif; font-weight: bold; font-variant: small-caps }
H2 { margin-left: 20px }
H3 { margin-left: 60px }
.h2 { margin-left: 20px }
.h3 { margin-left: 60px }
BLOCKQUOTE { font-family: Calibri, serif; font-style: italic }
.cite { text-align: right }
-->
</style>
This code would make a page where the class h1, h2 and h3 indent the page a certain amount of
pixels (spaces). It also would specify how other classes would work and the background and fonts to be used
in the page.
- Comments in CSS:
You can add comment to CSS code like this:
/* your comments here */
Return to the main
index
|
