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> <link rel="stylesheet"<br />
type="text/css" href="http://www.yourdomain.com/css"> </head> <br />
<br />
If you decide to use an internal stylesheet, you have to put<br />
your css style wihin the following tags: <br />
<br />
<style type="text/css"> </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<br />
sign (#) and then your label of the id. Here's an example <br />
<br />
#navigation { float:left; } <br />
<br />
To insert the id in your html, you would do something like this <br />
<br />
<div id="navigation"> </div> <br />
<br />
You can also insert an id within another one like this <br />
<br />
<div id="navigation"> <div id="left"> <br />
<br />
</div> </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 { color: #000000; } <br />
<br />
To insert the class into your html, do this <br />
<br />
<p class="subtitle" </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 { color: #006699; text-decoration: none; font-size: 100%; } <br />
<br />
a:link { color: #006699; text-decoration: none; } <br />
<br />
a:visited { color: #006699; text-decoration: none; } <br />
<br />
a:hover { color: #0000FF; text-decoration: underline; } <br />
<br />
a:active { color: #FF0000 } <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 />
http://www.bradsoft.com 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<br />
your css code as you create it. Very useful for a free edition<br />
and 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 />
About the author:<br />
Eric McArdle is the publisher of the TrafficaZine Online<br />
Marketing Newsletter which is a publication designed to assist<br />
the online marketing and/or web designing entrepreneur with the<br />
basic tools and resources that will greatly assist them in<br />
taking further steps into bettering their online business.<br />
http://www.trafficazine.com </span>
</td>
</tr>
</table>
<hr width='96%'>
<br><br>
</div>
</td>
<td width="160" valign="top" rowspan=2 class="SideBody">
<!-- Start Right Side Bar -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" class="SideHeader1"><span class="SideHeading"> Article Topics</span></td>
</tr>
<tr>
<td width="100%" class="SideBody">
<table width="90%" align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="10%" height="25" valign="bottom">
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Advertising/" title="Advertising">
<span class="Link1">Advertising</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Advice/" title="Advice">
<span class="Link1">Advice</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Affiliate-Programs/" title="Affiliate-Programs">
<span class="Link1">Affiliate-Programs</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Autos/" title="Autos">
<span class="Link1">Autos</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Awards/" title="Awards">
<span class="Link1">Awards</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Blogs/" title="Blogs">
<span class="Link1">Blogs</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Book-Reviews/" title="Book-Reviews">
<span class="Link1">Book-Reviews</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Business/" title="Business">
<span class="Link1">Business</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Careers/" title="Careers">
<span class="Link1">Careers</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-CGI/" title="CGI">
<span class="Link1">CGI</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Communication/" title="Communication">
<span class="Link1">Communication</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Computers/" title="Computers">
<span class="Link1">Computers</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Copywriting/" title="Copywriting">
<span class="Link1">Copywriting</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-CSS/" title="CSS">
<span class="Link1">CSS</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Dating/" title="Dating">
<span class="Link1">Dating</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-DHTML/" title="DHTML">
<span class="Link1">DHTML</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Direct-Mail/" title="Direct-Mail">
<span class="Link1">Direct-Mail</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Domain-Names/" title="Domain-Names">
<span class="Link1">Domain-Names</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-EBooks/" title="EBooks">
<span class="Link1">EBooks</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-ECommerce/" title="ECommerce">
<span class="Link1">ECommerce</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Education/" title="Education">
<span class="Link1">Education</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Email/" title="Email">
<span class="Link1">Email</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Entertainment/" title="Entertainment">
<span class="Link1">Entertainment</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Environment/" title="Environment">
<span class="Link1">Environment</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Family/" title="Family">
<span class="Link1">Family</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Finance/" title="Finance">
<span class="Link1">Finance</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Food/" title="Food">
<span class="Link1">Food</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Free/" title="Free">
<span class="Link1">Free</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Gambling/" title="Gambling">
<span class="Link1">Gambling</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Gardening/" title="Gardening">
<span class="Link1">Gardening</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Government/" title="Government">
<span class="Link1">Government</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Health/" title="Health">
<span class="Link1">Health</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Hobbies/" title="Hobbies">
<span class="Link1">Hobbies</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Home-Accessories/" title="Home-Accessories">
<span class="Link1">Home-Accessories</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Home-Business/" title="Home-Business">
<span class="Link1">Home-Business</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Home-Repair/" title="Home-Repair">
<span class="Link1">Home-Repair</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-HTML/" title="HTML">
<span class="Link1">HTML</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Humor/" title="Humor">
<span class="Link1">Humor</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Insurance/" title="Insurance">
<span class="Link1">Insurance</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Internet/" title="Internet">
<span class="Link1">Internet</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Javascript/" title="Javascript">
<span class="Link1">Javascript</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Law/" title="Law">
<span class="Link1">Law</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Link-Popularity/" title="Link-Popularity">
<span class="Link1">Link-Popularity</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Management/" title="Management">
<span class="Link1">Management</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Marketing/" title="Marketing">
<span class="Link1">Marketing</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Marriage/" title="Marriage">
<span class="Link1">Marriage</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Metaphysical/" title="Metaphysical">
<span class="Link1">Metaphysical</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-MLM/" title="MLM">
<span class="Link1">MLM</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Motivational/" title="Motivational">
<span class="Link1">Motivational</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Multimedia/" title="Multimedia">
<span class="Link1">Multimedia</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Music/" title="Music">
<span class="Link1">Music</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Newsletters/" title="Newsletters">
<span class="Link1">Newsletters</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Off-Line-Promotion/" title="Off-Line-Promotion">
<span class="Link1">Off-Line-Promotion</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Online-Promotion/" title="Online-Promotion">
<span class="Link1">Online-Promotion</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Other/" title="Other">
<span class="Link1">Other</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Outdoors/" title="Outdoors">
<span class="Link1">Outdoors</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Pets/" title="Pets">
<span class="Link1">Pets</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Politics/" title="Politics">
<span class="Link1">Politics</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Press-Releases/" title="Press-Releases">
<span class="Link1">Press-Releases</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Product-Reviews/" title="Product-Reviews">
<span class="Link1">Product-Reviews</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Psychology/" title="Psychology">
<span class="Link1">Psychology</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Publishing/" title="Publishing">
<span class="Link1">Publishing</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Real-Estate/" title="Real-Estate">
<span class="Link1">Real-Estate</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Religion/" title="Religion">
<span class="Link1">Religion</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-RSS/" title="RSS">
<span class="Link1">RSS</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Sales/" title="Sales">
<span class="Link1">Sales</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Scams/" title="Scams">
<span class="Link1">Scams</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Science/" title="Science">
<span class="Link1">Science</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-SE-Optimization/" title="SE-Optimization">
<span class="Link1">SE-Optimization</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-SE-Positioning/" title="SE-Positioning">
<span class="Link1">SE-Positioning</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-SE-Tactics/" title="SE-Tactics">
<span class="Link1">SE-Tactics</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Self-Help/" title="Self-Help">
<span class="Link1">Self-Help</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Sexuality/" title="Sexuality">
<span class="Link1">Sexuality</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Site-Security/" title="Site-Security">
<span class="Link1">Site-Security</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Social-Issues/" title="Social-Issues">
<span class="Link1">Social-Issues</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Spam/" title="Spam">
<span class="Link1">Spam</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Sports/" title="Sports">
<span class="Link1">Sports</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Technology/" title="Technology">
<span class="Link1">Technology</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Traffic-Analysis/" title="Traffic-Analysis">
<span class="Link1">Traffic-Analysis</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Travel/" title="Travel">
<span class="Link1">Travel</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Viral-Marketing/" title="Viral-Marketing">
<span class="Link1">Viral-Marketing</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Web-Design/" title="Web-Design">
<span class="Link1">Web-Design</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Web-Hosting/" title="Web-Hosting">
<span class="Link1">Web-Hosting</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Webmasters/" title="Webmasters">
<span class="Link1">Webmasters</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Weight-Loss/" title="Weight-Loss">
<span class="Link1">Weight-Loss</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Womens-Issues/" title="Womens-Issues">
<span class="Link1">Womens-Issues</span><br></a>
<img border="0" height="9" src="images/gd.gif" width="9">
<a href="/cat-Writing/" title="Writing">
<span class="Link1">Writing</span><br></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%" valign="top" class="SideBody">
<br>
</td>
</tr>
</table>
<!-- End Right Side Bar -->
</td>
</tr>
<tr>
<td valign="top" class="BodyHeader"><center>
<a href="/">home</span></a>
<span class="Text2"> | </span>
<a href="news.php">news</span></a>
<span class="Text2"> | </span>
<a href="contactus.php">contact us</span></a>
<span class="Text2"> | </span>
<a href="sitemap.php">sitemap</span></a>
<span class="Text2"> | </span>
<a href="rss.php">xml feed</a>
</td>
</tr>
</table>
<center>
<span class="Text1">
<br>All content © 2008 AllDayArticles.com unless otherwise noted.<br>
Site Powered By <a href="http://www.freekrai.net" target="_blank" rel="nofollow">Freekrai</a> | <a href="http://www.myspacelayoutgenerator.org/">Myspace Layout Generator</a>
<br><br>
<br>
</span>
</center>
</div></div>
</body>
</html>
<script language="javascript">
var data, p;
var agt=navigator.userAgent.toLowerCase();
p='http';
if((location.href.substr(0,6)=='https:')||(location.href.substr(0,6)=='HTTPS:')) {p='https';} data = '&r=' + escape(document.referrer) + '&n=' + escape(navigator.userAgent) + '&p=' + escape(navigator.userAgent)
if(navigator.userAgent.substring(0,1)>'3') {data = data + '&sd=' + screen.colorDepth + '&sw=' + escape(screen.width+ 'x'+screen.height)};
document.write('<a href="http://www.sitebelt.com/" target="_blank" >');
document.write('<scri'+'pt src="http://www.sitebelt.com//logger.php?site=38' + data + '"></scr'+'ipt>');
</script>
|