Cascading Style Sheets
tutorial
Short
introduction to CSS
Well, do you like the above form and our scrollbar? Or
would you like to easily handle your website text, paragraphs and so on
the way you want? If your answer is yes, then keep on reading. We are
going to talk here about Cascading Style Sheets (CSS). CSS
are supported by Explorer 3 or Netscape 4 and above. There are several
ways that you can use to implement the Style Sheet on your pages.
First, let's learn how to place a Style Sheet right onto
your HTML page. You will need to place <STYLE TYPE="text/css">...</STYLE>
tags within the <HEAD>...</HEAD> and the
comment - <!-- and --> commands like this:
<HEAD>
<STYLE TYPE="text/css">
<!--
Here you will place your Style Sheet commands. See below.
-->
</STYLE>
</HEAD>
Well, now you can define any HTML tag the way you want
like this:
H2 {font-size: 20pt; color: red}
or
P {font: 10pt "Arial"} and
so on.
There are lots of different Style Sheet definition
commands:
font-family, font-style, font-size, color,
background-color, position and so on.
You can also define several Style Sheet commands for one
tag. For example:
H1.Normal {font-size: 12pt;
font-family: arial;}
H1.Fancy {font-size: 14pt; font-family: courier; font-style: italic;
color: red}
Now use the CLASS command in your HTML document and
specify a style you want:
<H1
CLASS="Fancy">This is "Fancy" style</H1>
If you want one style for several HTML tags, do like this:
H1 H2 H3 {font-family: arial}
Now let's learn how to create a CSS file and use it for
all of your HTML pages. First, you will need to create a simple text
file with a *.css suffix. Give the file a name. Let's say, we'll name it
mystyle.css. Now type Style Sheet commands that you will be using in
your CSS file. Enter as many commands as you want. Remember - no
<HEAD> or comment tags are required in your CSS file!
All you need to do now is - place <LINK> tag
within the <HEAD>...</HEAD> tags in all your HTML
pages where you want to use the Style Sheet commands from your CSS file
like this:
<LINK REL=STYLESHEET HREF="mystyle.css"
TYPE="text/css">
HREF - specifies the URL to your style sheet (can
be http://path_to_your_css/mystyle.css).
One more way to specify a style for your HTML tags is to
simply denoting a style inside any of your HTML tags with the STYLE
command like this:
<FONT STYLE="font-size:
20pt; color: red">Welcome!</FONT>
Note that the STYLE command affects only the tag -
not the entire page!
Well, now we'll learn how to set up and use the CSS
classes. In fact, we've already done this, see the above example (the CLASS
command). You can set up a class of any style for any HTML tag (see the
above example for H1 tag) or like this:
.stylename = {font-style: bold;
color: green}
Give your class any name (We named it "stylename".
Note a period before the class name).
Well, now just place the CLASS command whenever you want
to call your class:
<H1
CLASS="stylename">This is "stylename" style
for a heading</H1> or
<P CLASS="stylename">This
is "stylename" style for a paragraph</P>
Well, do you still want to have a
scrollbar like ours? The scrollbar style commands are:
BODY
{
scrollbar-base-color: green;
scrollbar-arrow-color: yellow;
scrollbar- DarkShadow-color: blue;
}
You can also specify any scrollbar
for form elements or IFRAME tags with the STYLE attribute, for example:
<TEXTAREA
STYLE="scrollbar-base-color:red;..." ...>...</TEXTAREA>
As for our above form, now that you
are a real CSS expert, check the web
page source and try to figure out how we created it.
|
