CSS:
The Basics - ID's and Classes
CSS: The Basics - ID's and Classes
CSS, Cascading Style Sheets are of two types: Internal and External
Internal Stylesheets- 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
href="http://www.yourdomain.com/css">
If you decide to use an internal stylesheet, you have to put your
CSS style wihin the following tags:
All CSS or links to the external stylesheets have to go in between
the 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;
}
Creating Classes
To create a class in your css, use this
.subtitle {
color: #000000;
}
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/topstyle/
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!
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
|
