.: CSS: The Basics - ID's and Classes
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
Webpage title< itle> <br />
<link rel="stylesheet" type="text/css" <br />
href="http://www.yourdomain.com/css"> <br />
</head> <br />
<br />
If you decide to use an internal stylesheet, you have to put your <br />
css style wihin the following tags: <br />
<br />
<style type="text/css"> <br />
</style> <br />
<br />
All css or links to the external stylesheets have to go in <br />
between the <head> tags <br />
<br />
Now about Css Classes vs. ID's <br />
<br />
The one major difference between a class and an id is that <br />
classes can be used multiple times within the same page while an <br />
Id can only be used once per page. <br />
<br />
Example: <br />
<br />
ID - The global navigation of your site, or a navigation bar. A <br />
footer, header, etc. Only items that appear in only one place <br />
per page. <br />
<br />
Class - Anything that you would use multiple times in your page, <br />
such as titles, subtitles, headlines, and the like. <br />
<br />
Creating ID 's<br />
<br />
To create an Id in your css, you would start with the number sign <br />
(#) and then your label of the id. Here's an example <br />
<br />
#navigation { <br />
float:left; <br />
} <br />
<br />
To insert the id in your html, you would do something like this <br />
<br />
<div id="navigation"> <br />
</div> <br />
<br />
You can also insert an id within another one like this <br />
<br />
<div id="navigation"> <br />
<div id="left"> <br />
<br />
</div> <br />
</div> <br />
<br />
Remember to close the id's in order. <br />
<br />
Now, onto css classes. <br />
<br />
Creating Classes<br />
<br />
To create a class in your css, use this <br />
<br />
.subtitle { <br />
color: #000000; <br />
} <br />
<br />
To insert the class into your html, do this <br />
<br />
<p class="subtitle" <br />
</p <br />
<br />
Now, you can use the same class repeatedly in the same page <br />
unlike Id's. <br />
<br />
I also want to tell you something about link attributes. You <br />
should always keep them in this order: <br />
<br />
a { <br />
color: #006699; <br />
text-decoration: none; <br />
font-size: 100%; <br />
} <br />
<br />
a:link { <br />
color: #006699; <br />
text-decoration: none; <br />
} <br />
<br />
a:visited { <br />
color: #006699; <br />
text-decoration: none; <br />
} <br />
<br />
a:hover { <br />
color: #0000FF; <br />
text-decoration: underline; <br />
} <br />
<br />
a:active { <br />
color: #FF0000 <br />
} <br />
<br />
Of course, you can change the colors and text-decorations. This <br />
is just something I cut out of my code! <br />
<br />
Okay, these are the basics. What I highly recommend is to go and <br />
download Topstyle Lite by going here: <br />
<br />
<a target="_blank" href="http://www.bradsoft.com">http://www.bradsoft.com</a> opstyle slite/index.asp <br />
<br />
It's free and is a very helpful css editor. It not only color <br />
codes and organizes your code, but it provides you with tons of <br />
attributes that you can add to your class and id elements with <br />
just a click. They also provide a screen at the bottom to view your <br />
css code as you create it. Very useful for a free edition and <br />
I'm looking to buy the pro version soon. <br />
<br />
Now, this was just a very very brief explanation of the vital <br />
elements needed when structuring your css. I have a good feeling <br />
that when you download top style lite, you will learn how to use <br />
the hundreds of attributes in your classes and id's <br />
<br />
Good Luck in Your Web Designing Efforts!<br />
<br />
<p><h1>About the Author</h1><p>Eric McArdle is the publisher of the TrafficaZine Online<br />
Marketing Newsletter which is a publication designed to<br />
assist the online marketing and/or web designing<br />
entrepreneur with the basic tools and resources that will<br />
greatly assist them in taking further steps into bettering<br />
their online business. <a target="_blank" href="http://www.trafficazine.com">http://www.trafficazine.com</a><p>
<div align='center'>
<script type="text/javascript"><!--
google_ad_client = "pub-0491674349314231";
google_ad_width = 728;
google_ad_height = 90;
google_ad_format = "728x90_as";
google_ad_type = "text_image";
google_ad_channel ="7344520100";
google_color_border = "900000";
google_color_bg = "FFFFFF";
google_color_link = "900000";
google_color_text = "000000";
google_color_url = "0000FF";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</div>
</div>
</body>
</html>