CSS: The Basics - ID's and Classes ... Correct by Eric
McArdle
Css
Cascading Style Sheets
Two types of style sheets:
Internal and External
Internal - You insert your style code right
into your html code.
These stylesheets should only be used if you are
intending to
create a specific page with a specific style. If you want
to be
able to make global changes to your website using only one style
sheet, you have to use....
External Stylesheets - Instead of
putting all the style code into
your html code, you can create a
single document with your css
code and link to it within your webpages
code. It would look
something like this
{head}
{title}Webpage title{ itle}
{link rel="stylesheet"
type="text/css"
href="http://www.yourdomain.com/css"}
{/head}
If you decide to use an internal stylesheet, you have
to put your
css style wihin the following tags:
{style
type="text/css"}
{/style}
All css or links to the external
stylesheets have to go in
between the {head} tags
Now about
Css Classes vs. ID's
The one major difference between a class and
an id is that
classes can be used multiple times within the same page
while an
Id can only be used once per page.
Example:
ID - The global navigation of your site, or a navigation bar. A
footer, header, etc. Only items that appear in only one place
per
page.
Class - Anything that you would use multiple times in your
page,
such as titles, subtitles, headlines, and the like.
Creating ID 's
To create an Id in your css, you would start
with the number sign
(#) and then your label of the id. Here's an
example
#navigation {
float:left;
}
To insert the
id in your html, you would do something like this
{div
id="navigation"}
{/div}
You can also insert an id within
another one like this
{div id="navigation"}
{div id="left}
{/div}
{/div}
Remember to close the id's in order.
Now, onto css classes.
Creating Classes
To create a
class in your css, use this
.subtitle {
color: #000000;
}
To insert the class into your html, do this
{p
class="subtitle"}
{/p}
Now, you can use the same class
repeatedly in the same page
unlike Id's.
I also want to tell
you something about link attributes. You
should always keep them in
this order:
a {
color: #006699;
text-decoration: none;
font-size: 100%;
}
a:link {
color: #006699;
text-decoration: none;
}
a:visited {
color: #006699;
text-decoration: none;
}
a:hover {
color: #0000FF;
text-decoration: underline;
}
a:active {
color:
#FF0000
}
Of course, you can change the colors and
text-decorations. This
is just something I cut out of my code!
Okay, these are the basics. What I highly recommend is to go and
download Topstyle Lite by going here:
http://www.bradsoft.com
opstyle slite/index.asp
It's free and is a very helpful css
editor. It not only color
codes and organizes your code, but it
provides you with tons of
attributes that you can add to your class
and id elements with
just a click. They also provide a screen at the
bottom to view your
css code as you create it. Very useful for a free
edition and
I'm looking to buy the pro version soon.
Now, this
was just a very very brief explanation of the vital
elements needed
when structuring your css. I have a good feeling
that when you
download top style lite, you will learn how to use
the hundreds of
attributes in your classes and id's
Good Luck in Your Web
Designing Efforts!
P.S Change { and } to < and >
About the Author
Eric McArdle is the publisher of the TrafficaZine Online
Marketing
Newsletter which is a publication designed to
assist the online
marketing and/or web designing
entrepreneur with the basic tools and
resources that will
greatly assist them in taking further steps into
bettering
their online business.
http://www.trafficazine.com
|
