CSS The Basics - IDs 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>
<link rel="stylesheet" type="text/css" <br />href=”http://www.yourdomain.com/css”> <br /></head> </p>
<p>If you decide to use an internal stylesheet, you have to put your <br />css style wihin the following tags: </p>
<style type="text/css"></style>
<p>All css or links to the external stylesheets have to go in <br />between the <head> tags </p>
<p>Now about Css Classes vs. ID’s </p>
<p>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. </p>
<p>Example: </p>
<p>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. </p>
<p>Class - Anything that you would use multiple times in your page, <br />such as titles, subtitles, headlines, and the like. </p>
<p>Creating ID ’s</p>
<p>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 </p>
<p>#navigation { <br />float:left; <br />} </p>
<p>To insert the id in your html, you would do something like this </p>
<div id="navigation"></div>
<p>You can also insert an id within another one like this </p>
<div id="navigation">
<div id="left">
</div>
<p></div>
<p>Remember to close the id’s in order. </p>
<p>Now, onto css classes. </p>
<p>Creating Classes</p>
<p>To create a class in your css, use this </p>
<p>.subtitle { <br />color: #000000; <br />} </p>
<p>To insert the class into your html, do this </p>
<p class="subtitle" </p </p>
<p>Now, you can use the same class repeatedly in the same page <br />unlike Id’s. </p>
<p>I also want to tell you something about link attributes. You <br />should always keep them in this order: </p>
<p>a { <br />color: #006699; <br />text-decoration: none; <br />font-size: 100%; <br />} </p>
<p>a:link { <br />color: #006699; <br />text-decoration: none; <br />} </p>
<p>a:visited { <br />color: #006699; <br />text-decoration: none; <br />} </p>
<p>a:hover { <br />color: #0000FF; <br />text-decoration: underline; <br />} </p>
<p>a:active { <br />color: #FF0000 <br />} </p>
<p>Of course, you can change the colors and text-decorations. This <br />is just something I cut out of my code! </p>
<p>Okay, these are the basics. What I highly recommend is to go and <br />download Topstyle Lite by going here: </p>
<p>http://www.bradsoft.com opstyle slite/index.asp </p>
<p>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. </p>
<p>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 </p>
<p>Good Luck in Your Web Designing Efforts!</p>
<p><u>Authur Information:</u></p>
<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. http://www.trafficazine.com</p>
<p class="akst_link"><a href="http://www.freearticleonline.info/?p=196&akst_action=share-this" onclick="akst_share('196', 'http%3A%2F%2Fwww.freearticleonline.info%2F2007%2F09%2Fcss-the-basics-ids-and-classes%2F', 'CSS+The+Basics+-+IDs+and+Classes', '196', '4e52de6a-4885-4db0-87e9-392af94da8e4'); return false;" title="Email, post to del.icio.us, etc." id="akst_link_196" class="akst_share_link" rel="noindex nofollow">ShareThis</a>
</p>
<p align=right></p>
<div style="clear:both;"></div>
<div class="postinfo">
September 21, 2007 | Filed Under <a href="http://www.freearticleonline.info/category/css/" title="View all posts in CSS" rel="category tag">CSS</a> </div>
<!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/">
<rdf:Description rdf:about="http://www.freearticleonline.info/2007/09/css-the-basics-ids-and-classes/"
dc:identifier="http://www.freearticleonline.info/2007/09/css-the-basics-ids-and-classes/"
dc:title="CSS The Basics - IDs and Classes"
trackback:ping="http://www.freearticleonline.info/2007/09/css-the-basics-ids-and-classes/trackback/" />
</rdf:RDF> -->
<h3>Comments</h3>
<!-- You can start editing here. -->
<div id="commentblock">
<!-- If comments are open, but there are no comments. -->
<p id="respond"><b>Leave a Reply</b></p>
<p>You must be <a href="http://www.freearticleonline.info/wp-login.php?redirect_to=http://www.freearticleonline.info/2007/09/css-the-basics-ids-and-classes/">logged in</a> to post a comment.</p></div>
</div>
<!-- begin l_sidebar -->
<div id="l_sidebar">
<ul id="l_sidebarwidgeted">
<li id="Categories">
<h2>Categories</h2>
<ul>
<li class="cat-item cat-item-1"><a href="http://www.freearticleonline.info/category/advertising/" title="View all posts filed under Advertising">Advertising</a>
</li>
<li class="cat-item cat-item-3"><a href="http://www.freearticleonline.info/category/advice/" title="View all posts filed under Advice">Advice</a>
</li>
<li class="cat-item cat-item-4"><a href="http://www.freearticleonline.info/category/affiliate-programs/" title="View all posts filed under Affiliate-programs">Affiliate-programs</a>
</li>
<li class="cat-item cat-item-5"><a href="http://www.freearticleonline.info/category/autos/" title="View all posts filed under Autos">Autos</a>
</li>
<li class="cat-item cat-item-6"><a href="http://www.freearticleonline.info/category/awards/" title="View all posts filed under Awards">Awards</a>
</li>
<li class="cat-item cat-item-7"><a href="http://www.freearticleonline.info/category/business/" title="View all posts filed under Business">Business</a>
</li>
<li class="cat-item cat-item-8"><a href="http://www.freearticleonline.info/category/careers/" title="View all posts filed under Careers">Careers</a>
</li>
<li class="cat-item cat-item-9"><a href="http://www.freearticleonline.info/category/cgi/" title="View all posts filed under Cgi">Cgi</a>
</li>
<li class="cat-item cat-item-10"><a href="http://www.freearticleonline.info/category/communication/" title="View all posts filed under Communication">Communication</a>
</li>
<li class="cat-item cat-item-11"><a href="http://www.freearticleonline.info/category/computers/" title="View all posts filed under Computers">Computers</a>
</li>
<li class="cat-item cat-item-13"><a href="http://www.freearticleonline.info/category/css/" title="View all posts filed under CSS">CSS</a>
</li>
<li class="cat-item cat-item-15"><a href="http://www.freearticleonline.info/category/dhtml/" title="View all posts filed under DHTML">DHTML</a>
</li>
<li class="cat-item cat-item-16"><a href="http://www.freearticleonline.info/category/direct-mail/" title="View all posts filed under Direct-mail">Direct-mail</a>
</li>
<li class="cat-item cat-item-17"><a href="http://www.freearticleonline.info/category/domain-names/" title="View all posts filed under Domain-names">Domain-names</a>
</li>
<li class="cat-item cat-item-18"><a href="http://www.freearticleonline.info/category/ebooks/" title="View all posts filed under Ebooks">Ebooks</a>
</li>
<li class="cat-item cat-item-19"><a href="http://www.freearticleonline.info/category/ecommerce/" title="View all posts filed under Ecommerce">Ecommerce</a>
</li>
<li class="cat-item cat-item-20"><a href="http://www.freearticleonline.info/category/education/" title="View all posts filed under Education">Education</a>
</li>
<li class="cat-item cat-item-21"><a href="http://www.freearticleonline.info/category/email/" title="View all posts filed under Email">Email</a>
</li>
<li class="cat-item cat-item-22"><a href="http://www.freearticleonline.info/category/entertainment/" title="View all posts filed under Entertainment">Entertainment</a>
</li>
<li class="cat-item cat-item-23"><a href="http://www.freearticleonline.info/category/environment/" title="View all posts filed under Environment">Environment</a>
</li>
<li class="cat-item cat-item-24"><a href="http://www.freearticleonline.info/category/family/" title="View all posts filed under Family">Family</a>
</li>
<li class="cat-item cat-item-25"><a href="http://www.freearticleonline.info/category/finance/" title="View all posts filed under Finance">Finance</a>
</li>
<li class="cat-item cat-item-26"><a href="http://www.freearticleonline.info/category/fitness/" title="View all posts filed under Fitness">Fitness</a>
</li>
<li class="cat-item cat-item-27"><a href="http://www.freearticleonline.info/category/food/" title="View all posts filed under Food">Food</a>
</li>
<li class="cat-item cat-item-28"><a href="http://www.freearticleonline.info/category/free/" title="View all posts filed under Free">Free</a>
</li>
<li class="cat-item cat-item-29"><a href="http://www.freearticleonline.info/category/gardening/" title="View all posts filed under Gardening">Gardening</a>
</li>
<li class="cat-item cat-item-30"><a href="http://www.freearticleonline.info/category/government/" title="View all posts filed under Government">Government</a>
</li>
<li class="cat-item cat-item-31"><a href="http://www.freearticleonline.info/category/health/" title="View all posts filed under Health">Health</a>
</li>
<li class="cat-item cat-item-33"><a href="http://www.freearticleonline.info/category/home-business/" title="View all posts filed under Home-Business">Home-Business</a>
</li>
<li class="cat-item cat-item-34"><a href="http://www.freearticleonline.info/category/home-repair/" title="View all posts filed under Home-repair">Home-repair</a>
</li>
<li class="cat-item cat-item-35"><a href="http://www.freearticleonline.info/category/humor/" title="View all posts filed under Humor">Humor</a>
</li>
<li class="cat-item cat-item-36"><a href="http://www.freearticleonline.info/category/internet/" title="View all posts filed under Internet">Internet</a>
</li>
<li class="cat-item cat-item-37"><a href="http://www.freearticleonline.info/category/javascript/" title="View all posts filed under Javascript">Javascript</a>
</li>
<li class="cat-item cat-item-38"><a href="http://www.freearticleonline.info/category/law/" title="View all posts filed under Law">Law</a>
</li>
<li class="cat-item cat-item-41"><a href="http://www.freearticleonline.info/category/marketing/" title="View all posts filed under Marketing">Marketing</a>
</li>
<li class="cat-item cat-item-43"><a href="http://www.freearticleonline.info/category/metaphysical/" title="View all posts filed under Metaphysical">Metaphysical</a>
</li>
<li class="cat-item cat-item-44"><a href="http://www.freearticleonline.info/category/mlm/" title="View all posts filed under MLM">MLM</a>
</li>
<li class="cat-item cat-item-45"><a href="http://www.freearticleonline.info/category/motivational/" title="View all posts filed under Motivational">Motivational</a>
</li>
<li class="cat-item cat-item-46"><a href="http://www.freearticleonline.info/category/multimedia/" title="View all posts filed under Multimedia">Multimedia</a>
</li>
<li class="cat-item cat-item-47"><a href="http://www.freearticleonline.info/category/newsletters/" title="View all posts filed under Newsletters">Newsletters</a>
</li>
<li class="cat-item cat-item-48"><a href="http://www.freearticleonline.info/category/off-line-promotion/" title="View all posts filed under Off-Line Promotion">Off-Line Promotion</a>
</li>
<li class="cat-item cat-item-49"><a href="http://www.freearticleonline.info/category/online-promotion/" title="View all posts filed under Online Promotion">Online Promotion</a>
</li>
<li class="cat-item cat-item-51"><a href="http://www.freearticleonline.info/category/pets/" title="View all posts filed under Pets">Pets</a>
</li>
<li class="cat-item cat-item-52"><a href="http://www.freearticleonline.info/category/politics/" title="View all posts filed under Politics">Politics</a>
</li>
<li class="cat-item cat-item-53"><a href="http://www.freearticleonline.info/category/psychology/" title="View all posts filed under Psychology">Psychology</a>
</li>
<li class="cat-item cat-item-60"><a href="http://www.freearticleonline.info/category/se-positioning/" title="View all posts filed under SE Positioning">SE Positioning</a>
</li>
<li class="cat-item cat-item-61"><a href="http://www.freearticleonline.info/category/se-tactics/" title="View all posts filed under SE Tactics">SE Tactics</a>
</li>
<li class="cat-item cat-item-62"><a href="http://www.freearticleonline.info/category/self-help/" title="View all posts filed under Self Help">Self Help</a>
</li>
<li class="cat-item cat-item-63"><a href="http://www.freearticleonline.info/category/sexuality/" title="View all posts filed under Sexuality">Sexuality</a>
</li>
<li class="cat-item cat-item-64"><a href="http://www.freearticleonline.info/category/site-security/" title="View all posts filed under Site Security">Site Security</a>
</li>
<li class="cat-item cat-item-65"><a href="http://www.freearticleonline.info/category/social-issues/" title="View all posts filed under Social Issues">Social Issues</a>
</li>
<li class="cat-item cat-item-66"><a href="http://www.freearticleonline.info/category/spam/" title="View all posts filed under Spam">Spam</a>
</li>
<li class="cat-item cat-item-67"><a href="http://www.freearticleonline.info/category/sports/" title="View all posts filed under Sports">Sports</a>
</li>
<li class="cat-item cat-item-68"><a href="http://www.freearticleonline.info/category/technology/" title="View all posts filed under Technology">Technology</a>
</li>
<li class="cat-item cat-item-69"><a href="http://www.freearticleonline.info/category/traffic-analysis/" title="View all posts filed under Traffic Analysis">Traffic Analysis</a>
</li>
<li class="cat-item cat-item-70"><a href="http://www.freearticleonline.info/category/travel/" title="View all posts filed under Travel">Travel</a>
</li>
<li class="cat-item cat-item-71"><a href="http://www.freearticleonline.info/category/viral-marketing/" title="View all posts filed under Viral Marketing">Viral Marketing</a>
</li>
<li class="cat-item cat-item-72"><a href="http://www.freearticleonline.info/category/web-design/" title="View all posts filed under Web Design">Web Design</a>
</li>
<li class="cat-item cat-item-73"><a href="http://www.freearticleonline.info/category/web-hosting/" title="View all posts filed under Web Hosting">Web Hosting</a>
</li>
<li class="cat-item cat-item-74"><a href="http://www.freearticleonline.info/category/webmasters/" title="View all posts filed under Webmasters">Webmasters</a>
</li>
<li class="cat-item cat-item-75"><a href="http://www.freearticleonline.info/category/weight-loss/" title="View all posts filed under Weight Loss">Weight Loss</a>
</li>
<li class="cat-item cat-item-76"><a href="http://www.freearticleonline.info/category/wisdom/" title="View all posts filed under Wisdom">Wisdom</a>
</li>
<li class="cat-item cat-item-77"><a href="http://www.freearticleonline.info/category/womens-issues/" title="View all posts filed under Women's Issues">Women's Issues</a>
</li>
<li class="cat-item cat-item-78"><a href="http://www.freearticleonline.info/category/writing/" title="View all posts filed under Writing">Writing</a>
</li>
</ul>
</li>
<li id="Recent">
<h2>Recently Written</h2>
<ul>
<li><a href='http://www.freearticleonline.info/2008/11/10-reasons-to-use-promotional-items/' title='10 Reasons to Use Promotional Items'>10 Reasons to Use Promotional Items</a></li>
<li><a href='http://www.freearticleonline.info/2008/11/what-you%c2%92ll-pay-to-hire-an-atlanta-limo/' title='What you?ll pay to hire an Atlanta limo'>What you?ll pay to hire an Atlanta limo</a></li>
<li><a href='http://www.freearticleonline.info/2008/11/tips-on-choosing-the-right-gas-mileage-devices/' title='Tips On Choosing The Right Gas Mileage Devices'>Tips On Choosing The Right Gas Mileage Devices</a></li>
<li><a href='http://www.freearticleonline.info/2008/11/what-are-conflict-diamonds/' title='What Are Conflict Diamonds'>What Are Conflict Diamonds</a></li>
<li><a href='http://www.freearticleonline.info/2008/11/interesting-ideas-for-families-looking-for-cheap-holiday-breaks/' title='Interesting Ideas For Families looking for cheap Holiday Breaks'>Interesting Ideas For Families looking for cheap Holiday Breaks</a></li>
<li><a href='http://www.freearticleonline.info/2008/11/winning-your-ex-back-how-to-win-back-your-ex-in-5-steps/' title='Winning Your Ex Back - How To Win Back Your Ex In 5 Steps'>Winning Your Ex Back - How To Win Back Your Ex In 5 Steps</a></li>
<li><a href='http://www.freearticleonline.info/2008/11/promotional-gifts-a-trusted-plan-for-bright-business-future/' title='Promotional Gifts - A Trusted Plan for Bright Business Future'>Promotional Gifts - A Trusted Plan for Bright Business Future</a></li>
<li><a href='http://www.freearticleonline.info/2008/11/finding-free-online-business-advertising/' title='Finding Free Online Business Advertising'>Finding Free Online Business Advertising</a></li>
<li><a href='http://www.freearticleonline.info/2008/11/child-approved-uk-family-breaks/' title='Child Approved UK Family Breaks'>Child Approved UK Family Breaks</a></li>
<li><a href='http://www.freearticleonline.info/2008/11/promotional-gifts-%c2%96-a-ladder-to-success/' title='Promotional Gifts ? A Ladder to Success'>Promotional Gifts ? A Ladder to Success</a></li>
</ul>
</li>
</ul>
</div>
<!-- end l_sidebar -->
<!-- begin r_sidebar -->
<div id="r_sidebar">
<ul id="r_sidebarwidgeted">
<li id="Search">
<form method="get" id="search_form" action="http://www.freearticleonline.info/">
<input type="text" class="search_input" value="To search, type and hit enter" name="s" id="s" onfocus="if (this.value == 'To search, type and hit enter') {this.value = '';}" onblur="if (this.value == '') {this.value = 'To search, type and hit enter';}" />
<input type="hidden" id="searchsubmit" value="Search" /></form><br />
</li>
<li id="About">
<h2>About</h2>
<p><a href=/>FREE Articleonline.Info is providing free articles for you, <br><br>Please feel free to read and enjoy the articles. :)</a></p>
</li>
<li id="Archives">
<h2>Archives</h2>
<ul>
<li><a href='http://www.freearticleonline.info/2008/11/' title='November 2008'>November 2008</a></li>
<li><a href='http://www.freearticleonline.info/2008/10/' title='October 2008'>October 2008</a></li>
<li><a href='http://www.freearticleonline.info/2008/09/' title='September 2008'>September 2008</a></li>
<li><a href='http://www.freearticleonline.info/2008/08/' title='August 2008'>August 2008</a></li>
<li><a href='http://www.freearticleonline.info/2008/07/' title='July 2008'>July 2008</a></li>
<li><a href='http://www.freearticleonline.info/2008/06/' title='June 2008'>June 2008</a></li>
<li><a href='http://www.freearticleonline.info/2008/05/' title='May 2008'>May 2008</a></li>
<li><a href='http://www.freearticleonline.info/2008/04/' title='April 2008'>April 2008</a></li>
<li><a href='http://www.freearticleonline.info/2008/03/' title='March 2008'>March 2008</a></li>
<li><a href='http://www.freearticleonline.info/2008/02/' title='February 2008'>February 2008</a></li>
<li><a href='http://www.freearticleonline.info/2008/01/' title='January 2008'>January 2008</a></li>
<li><a href='http://www.freearticleonline.info/2007/12/' title='December 2007'>December 2007</a></li>
<li><a href='http://www.freearticleonline.info/2007/11/' title='November 2007'>November 2007</a></li>
<li><a href='http://www.freearticleonline.info/2007/10/' title='October 2007'>October 2007</a></li>
<li><a href='http://www.freearticleonline.info/2007/09/' title='September 2007'>September 2007</a></li>
</ul>
</li>
<li id="Blogroll">
<h2>Links</h2>
<ul>
<li><a href="http://www.articlesfactory.com/">Articles Factory</a></li>
<li><a href="http://www.google.com">Google</a></li>
</ul>
</li>
</ul>
</div>
<!-- end r_sidebar -->
</div>
<!-- The main column ends -->
<!-- begin footer -->
<div style="clear:both;"></div>
<div id="footer">
<p>Copyright © 2008 <a href="http://www.freearticleonline.info/">Free Article Online</a> <script type="text/javascript">
<!--
var _st_unit_id=12765;
var _st_expr_tm=3600;
//-->
</script>
<script type="text/javascript" src="http://js.tongji.yahoo.com.cn/0/24/477/ystat.js"></script></p>
</div>
<!-- Share This BEGIN -->
<div id="akst_form">
<a href="javascript:void($('akst_form').style.display='none');" class="akst_close">Close</a>
<ul class="tabs">
<li id="akst_tab2" class="selected" onclick="akst_share_tab('2');">E-mail</li>
<li id="akst_tab1" onclick="akst_share_tab('1');">Social Web</li>
</ul>
<div class="clear"></div>
<div id="akst_email">
<form action="http://www.freearticleonline.info/index.php" method="post">
<fieldset>
<legend>E-mail It</legend>
<ul>
<li>
<label for="akst_to">To Addresses (up to 5):</label>
<input type="text" id="akst_to" name="akst_to" value="" class="akst_text" />
</li>
<li>
<label for="akst_name">Your Name:</label>
<input type="text" id="akst_name" name="akst_name" value="" class="akst_text" />
</li>
<li>
<label for="akst_email_field">Your Address:</label>
<input type="text" id="akst_email_field" name="akst_email" value="" class="akst_text" />
</li>
<li>
<input type="submit" name="akst_submit" value="Send It" />
</li>
</ul>
<input type="hidden" name="akst_action" value="send_mail" />
<input type="hidden" name="akst_post_id" id="akst_post_id" value="" />
</fieldset>
</form>
</div>
<div style="display: none;" id="akst_social">
<ul>
<li><a href="#" id="akst_facebook">Facebook</a></li>
<li><a href="#" id="akst_digg">Digg</a></li>
<li><a href="#" id="akst_stumbleupon">StumbleUpon</a></li>
<li><a href="#" id="akst_delicious">del.icio.us</a></li>
<li><a href="#" id="akst_reddit">reddit</a></li>
<li><a href="#" id="akst_blinklist">BlinkList</a></li>
<li><a href="#" id="akst_newsvine">Newsvine</a></li>
<li><a href="#" id="akst_furl">Furl</a></li>
<li><a href="#" id="akst_tailrank">Tailrank</a></li>
<li><a href="#" id="akst_magnolia">Ma.gnolia</a></li>
</ul>
<div class="clear"></div>
</div>
<div id="akst_credit"><a href="http://sharethis.com"><img src="http://r.sharethis.com/powered-by?publisher=4e52de6a-4885-4db0-87e9-392af94da8e4" alt="Powered by ShareThis" /></a></div>
</div>
<!-- Share This END -->
</body>
</html>