|
CSS: The Basics - ID's and Classes
|
By Eric McArdle
[Hits: 28762]
|
|
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 tocreate a specific page with a specific style. If you want to beable to make global changes to your website using only one stylesheet, you have to use....
External Stylesheets - Instead of putting all the style codeinto your html code, you can create a single document with yourcss code and link to it within your webpages code. It would looksomething like this
Webpage title< itle> <link rel="stylesheet"type="text/css" href="http://www.yourdomain.com/css"> </head> <br><br>If you decide to use an internal stylesheet, you have to putyour 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 inbetween 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 thatclasses can be used multiple times within the same page while anId can only be used once per page. <br><br>Example: <br><br>ID - The global navigation of your site, or a navigation bar. Afooter, header, etc. Only items that appear in only one placeper page. <br><br>Class - Anything that you would use multiple times in your page,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 numbersign (#) 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 pageunlike Id's. <br><br>I also want to tell you something about link attributes. Youshould 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. Thisis just something I cut out of my code! <br><br>Okay, these are the basics. What I highly recommend is to go anddownload 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 colorcodes and organizes your code, but it provides you with tons ofattributes that you can add to your class and id elements withjust a click. They also provide a screen at the bottom to viewyour css code as you create it. Very useful for a free editionand I'm looking to buy the pro version soon. <br><br>Now, this was just a very very brief explanation of the vitalelements needed when structuring your css. I have a good feelingthat when you download top style lite, you will learn how to usethe hundreds of attributes in your classes and id's <br><br>Good Luck in Your Web Designing Efforts! <br>
<script src="/plus/count.php?aid=52914&mid=0" language="javascript"></script>
<center></center>
</td>
<td style="vertical-align:top">
<script type="text/javascript"><!--
google_ad_client = "pub-9203237434407766";
google_ad_width = 160;
google_ad_height = 600;
google_ad_format = "160x600_as";
google_ad_type = "text_image";
//2007-07-10: txu_articles_bottom
google_ad_channel = "9900206766";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "0000FF";
google_color_text = "000000";
google_color_url = "008000";
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</td>
<td width="224" align="right" valign="top">
<table width="98%" border="0" cellpadding="0" cellspacing="0" class="tbspan">
<tr>
<td class="guidet">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="gtb">
<tr>
<td height="29" background="/templets/img/31bg3.gif"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="32%" align="right"><img src="/templets/img/i.gif" width="10" height="13"></td>
<td width="2%"> </td>
<td width="66%" class="guidetitle"><strong>Top Articles</strong></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td height="50" valign="top" class="guideb">
*<a href="/css/css-the-basics-id-s-and-classes--correct-aid52913.htm">CSS: The Basics - ID's and Cla</a><br/>
*<a href="/css/the-power-of-css-aid52886.htm">The Power of CSS</a><br/>
*<a href="/css/the-30-minute-css-tutorial--aid152948.htm"> The 30 minute CSS tutorial.</a><br/>
*<a href="/css/css-browser-detection-the-complete-guide-aid52891.htm">CSS Browser Detection - The co</a><br/>
*<a href="/css/simon-says-aid154890.htm">Simon Says</a><br/>
*<a href="/css/using-css-with-tables-aid52881.htm">Using CSS with Tables</a><br/>
*<a href="/css/cascading-stylesheets-5-reasons-to-use-css-aid52889.htm">Cascading Stylesheets: 5 Reaso</a><br/>
*<a href="/css/7-reasons-why-using-css-is-a-must-aid52896.htm">7 Reasons Why Using CSS is a M</a><br/>
*<a href="/css/teach-yourself-css-the-easy-way-aid52902.htm">Teach yourself CSS the easy wa</a><br/>
*<a href="/css/starting-cascading-style-sheets-aid52899.htm">Starting Cascading Style Sheet</a><br/>
*<a href="/css/css-maximum-benefits-aid52912.htm">CSS - Maximum benefits</a><br/>
*<a href="/css/the-concept-behind-css-aid150329.htm">The Concept Behind CSS</a><br/>
</td>
</tr>
</table>
<table width="98%" border="0" cellpadding="0" cellspacing="0" class="tbspan">
<tr>
<td class="guidet">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="gtb">
<tr>
<td height="29" background="/templets/img/31bg3.gif"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="32%" align="right"><img src="/templets/img/i.gif" width="10" height="13"></td>
<td width="2%"> </td>
<td width="66%" class="guidetitle"><strong>Related Articles</strong></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td height="50" valign="top" class="guideb">
*<a href="/css/css-the-basics-id-s-and-classes--correct-aid52913.htm">CSS: The Basics - ID's and Cla</a><br/>
*<a href="/css/introduction-to-cascading-style-sheets-aid52915.htm">Introduction To Cascading Styl</a><br/>
*<a href="/css/css-maximum-benefits-aid52912.htm">CSS - Maximum benefits</a><br/>
*<a href="/css/using-ccs-to-eliminate-tables-aid52911.htm">Using CCS to Eliminate Tables</a><br/>
*<a href="/css/css-print-media-tutorial-aid52906.htm">CSS Print Media Tutorial</a><br/>
*<a href="/css/teach-yourself-css-the-easy-way-aid52902.htm">Teach yourself CSS the easy wa</a><br/>
*<a href="/css/starting-cascading-style-sheets-aid52899.htm">Starting Cascading Style Sheet</a><br/>
*<a href="/css/seo-benefits-of-css-aid52897.htm">SEO Benefits Of CSS</a><br/>
*<a href="/css/7-reasons-why-using-css-is-a-must-aid52896.htm">7 Reasons Why Using CSS is a M</a><br/>
*<a href="/css/font-organizers-review-part-i-aid52895.htm">Font Organizers Review, Part I</a><br/>
*<a href="/css/css-in-flash-the-return-of-crisp-and-legible-fonts--aid52893.htm">CSS in Flash the return of cri</a><br/>
*<a href="/css/css-browser-detection-the-complete-guide-aid52891.htm">CSS Browser Detection - The co</a><br/>
</td>
</tr>
</table></td>
</tr>
</table>
<div>
<br/><br/>
<b>Prev:</b> <a href='/css/css-the-basics-id-s-and-classes--correct-aid52913.htm'>CSS: The Basics - ID's and Classes ... Correct</a> <b>Next: </b><a href='/css/introduction-to-cascading-style-sheets-aid52915.htm'>Introduction To Cascading Style Sheets</a>
<br/><br/>
<script type="text/javascript"><!--
google_ad_client = "pub-9203237434407766";
google_ad_width = 728;
google_ad_height = 15;
google_ad_format = "728x15_0ads_al_s";
//2007-07-10: txu-articles_nav_bottom
google_ad_channel = "9256344755";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "0000FF";
google_color_text = "000000";
google_color_url = "008000";
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<br/><br/>
</div>
<table width="900" border="0" align="center" cellpadding="0" cellspacing="0" class="tbspan" style="margin-top:3px">
<tr>
<td height="51" background="/templets/img/31bg5.gif" valign="top"><img src='/templets/img/31c5.gif' width='4' height='49'></td>
<td background="/templets/img/31bg5.gif" align="center">
<a href='/'>Home</a>
| <a href="/plus/sitemap.html">Site Map</a>
| <a href='#' onClick="javascript:window.external.AddFavorite('http://localhost','T-XU Articles');">Bookmark this site</a>
| <a href="/plus/rssmap.html">T-XU RSS</a>
<hr style="height: 1px"/>
Copyright 2007 <a href='http://www.t-xu.com' target='_blank'>T-XU.com</a> - All Rights Reserved Worldwide.
</td>
<td background="/templets/img/31bg5.gif" align="right" valign="top"><img src='/templets/img/31c6.gif' width='4' height='49'></td>
</tr>
</table>
<table width="900" border="0" align="center" cellpadding="0" cellspacing="0" class="tbspan">
<tr><td height="6"></td></tr>
</table>
</center>
</body>
</html>
| | |
