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
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>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 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<a href="http://www.hitecharticles.com"><img src="http://www.hitecharticles.com/pic/x.gif" alt="Find Article" border="0"></a>, 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!
<p>
<b>ABOUT THE AUTHOR</b>
<br>
<div>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<br></div>
</p>
</td>
</tr>
</table>
</td>
<td valign="top">
<table width="222" height="31" cellpadding="0" cellspacing="0" border="0" background="http://www.hitecharticles.com/pic/title_bgr.gif">
<tr>
<td><div class="title">TECHNOLOGY NEWSLETTER</div></td>
</tr>
</table>
<table width="222" cellpadding="11" cellspacing="0" border="0" bgcolor="#f3f3f3">
<form action="" name="subscribe" method="post" onSubmit="return validateSubscribeForm(this)">
<tr>
<td>
<div class="aanot">Free Technology Articles provides real-time coverage of Technology news and articles.</div>
<br>
<div class="red"><b>Free Email Newsletters:</b></div>
<br>
<table width="100%" cellpadding="1" cellspacing="0" border="0">
<tr>
<td><input type="checkbox" name="category_id[]" value="6"> <a class="alinks" href="http://www.hitecharticles.com/articles/cgi.html">CGI</a></td>
<td><input type="checkbox" name="category_id[]" value="7"> <a class="alinks" href="http://www.hitecharticles.com/articles/computers.html">Computers</a></td>
</tr>
<tr>
<td><input type="checkbox" name="category_id[]" value="9"> <a class="alinks" href="http://www.hitecharticles.com/articles/css.html">CSS</a></td>
<td><input type="checkbox" name="category_id[]" value="10"> <a class="alinks" href="http://www.hitecharticles.com/articles/dhtml.html">DHTML</a></td>
</tr>
<tr>
<td><input type="checkbox" name="category_id[]" value="12"> <a class="alinks" href="http://www.hitecharticles.com/articles/domain-names.html">Domain Names</a></td>
<td><input type="checkbox" name="category_id[]" value="26"> <a class="alinks" href="http://www.hitecharticles.com/articles/html.html">HTML</a></td>
</tr>
<tr>
<td><input type="checkbox" name="category_id[]" value="28"> <a class="alinks" href="http://www.hitecharticles.com/articles/internet.html">Internet</a></td>
<td><input type="checkbox" name="category_id[]" value="29"> <a class="alinks" href="http://www.hitecharticles.com/articles/javascript.html">Javascript</a></td>
</tr>
<tr>
<td><input type="checkbox" name="category_id[]" value="46"> <a class="alinks" href="http://www.hitecharticles.com/articles/science.html">Science</a></td>
<td><input type="checkbox" name="category_id[]" value="56"> <a class="alinks" href="http://www.hitecharticles.com/articles/technology.html">Technology</a></td>
</tr>
</table>
</td>
</tr>
<tr bgcolor="#e5e5e5">
<td>
<script src="http://www.hitecharticles.com/js/newsletter.js" type="text/javascript"></script>
<input type="hidden" name="cmd" value="subscribe">
<input type="text" name="email" value="Enter Your Email" onclick="this.value = '';" maxlength="100">
<input type="submit" name="submit" value="Subscribe">
</td>
</tr>
</form>
</table>
<table width="222" cellpadding="0" cellspacing="0" border="0" bgcolor="#f3f3f3">
<tr bgcolor="#ffffff">
<td height="2"><img src="http://www.hitecharticles.com/pic/x.gif" width="1" height="2" alt="" border="0"></td>
</tr>
</table>
<table width="222" height="100" cellpadding="3" cellspacing="0" border="0" bgcolor="#d7d7d7">
<tr>
<td align="center"><!-- ValueClick Media 120x600 and 160x600 SkyScraper CODE for hitecharticles.com -->
<script language="javascript" src="http://media.fastclick.net/w/get.media?sid=26100&m=3&tp=7&d=j&t=n"></script>
<noscript><a href="http://media.fastclick.net/w/click.here?sid=26100&m=3&c=1" target="_blank">
<img src="http://media.fastclick.net/w/get.media?sid=26100&m=3&tp=7&d=s&c=1"
width=160 height=600 border=1></a></noscript>
<!-- ValueClick Media 120x600 and 160x600 SkyScraper CODE for hitecharticles.com --></td>
</tr>
</table>
<table width="222" cellpadding="0" cellspacing="0" border="0" bgcolor="#f3f3f3">
<tr bgcolor="#ffffff">
<td height="2"><img src="http://www.hitecharticles.com/pic/x.gif" width="1" height="2" alt="" border="0"></td>
</tr>
</table>
<table width="222" height="31" cellpadding="0" cellspacing="0" border="0" background="http://www.hitecharticles.com/pic/title_bgr.gif">
<tr>
<td><div class="title">CALENDAR</div></td>
</tr>
</table>
<table width="222" cellpadding="11" cellspacing="0" border="0" bgcolor="#f3f3f3">
<tr>
<td>
<table align="center" border="0" cellpadding="1" cellspacing="1" bgcolor="#FFFFFF" class="calendar">
<div align="center" class="calendar-month"><a class="calendar-month" href="/articles/month/2008-09.html">September 2008</a></div>
<tr><th abbr="Sunday">S</th><th abbr="Monday">M</th><th abbr="Tuesday">T</th><th abbr="Wednesday">W</th><th abbr="Thursday">T</th><th abbr="Friday">F</th><th abbr="Saturday">S</th></tr>
<tr><td colspan="1"> </td><td class="linked-day"><a class="calendar-day-active" href="/articles/day/2008-9-01.html">1</a></td><td class="linked-day"><a class="calendar-day-active" href="/articles/day/2008-9-02.html">2</a></td><td class="linked-day"><a class="calendar-day-active" href="/articles/day/2008-9-03.html">3</a></td><td class="linked-day"><a class="calendar-day-active" href="/articles/day/2008-9-04.html">4</a></td><td class="linked-day"><a class="calendar-day-active" href="/articles/day/2008-9-05.html">5</a></td><td class="calendar-day-inactive"><div class="calendar-day-inactive">6</div></td></tr>
<tr><td class="calendar-day-inactive"><div class="calendar-day-inactive">7</div></td><td class="calendar-day-inactive"><div class="calendar-day-inactive">8</div></td><td class="calendar-day-inactive"><div class="calendar-day-inactive">9</div></td><td class="calendar-day-inactive"><div class="calendar-day-inactive">10</div></td><td class="calendar-day-inactive"><div class="calendar-day-inactive">11</div></td><td class="calendar-day-inactive"><div class="calendar-day-inactive">12</div></td><td class="calendar-day-inactive"><div class="calendar-day-inactive">13</div></td></tr>
<tr><td class="calendar-day-inactive"><div class="calendar-day-inactive">14</div></td><td class="calendar-day-inactive"><div class="calendar-day-inactive">15</div></td><td class="calendar-day-inactive"><div class="calendar-day-inactive">16</div></td><td class="calendar-day-inactive"><div class="calendar-day-inactive">17</div></td><td class="calendar-day-inactive"><div class="calendar-day-inactive">18</div></td><td class="calendar-day-inactive"><div class="calendar-day-inactive">19</div></td><td class="calendar-day-inactive"><div class="calendar-day-inactive">20</div></td></tr>
<tr><td class="calendar-day-inactive"><div class="calendar-day-inactive">21</div></td><td class="calendar-day-inactive"><div class="calendar-day-inactive">22</div></td><td class="calendar-day-inactive"><div class="calendar-day-inactive">23</div></td><td class="calendar-day-inactive"><div class="calendar-day-inactive">24</div></td><td class="calendar-day-inactive"><div class="calendar-day-inactive">25</div></td><td class="calendar-day-inactive"><div class="calendar-day-inactive">26</div></td><td class="calendar-day-inactive"><div class="calendar-day-inactive">27</div></td></tr>
<tr><td class="calendar-day-inactive"><div class="calendar-day-inactive">28</div></td><td class="calendar-day-inactive"><div class="calendar-day-inactive">29</div></td><td class="calendar-day-inactive"><div class="calendar-day-inactive">30</div></td><td colspan="4"> </td></tr>
</table>
</td>
</tr>
</table>
<table width="222" cellpadding="0" cellspacing="0" border="0" bgcolor="#f3f3f3">
<tr bgcolor="#ffffff">
<td height="2"><img src="http://www.hitecharticles.com/pic/x.gif" width="1" height="2" alt="" border="0"></td>
</tr>
</table>
<table width="222" height="31" cellpadding="0" cellspacing="0" border="0" background="http://www.hitecharticles.com/pic/title_bgr.gif">
<tr>
<td><div class="title">INTERNET RESOURCES</div></td>
</tr>
</table>
<table width="222" cellpadding="11" cellspacing="0" border="0" bgcolor="#f3f3f3">
<tr>
<td>
<a class="alinks" href="http://www.itmask.com/services/web-design-pricing/" target="_blank">Web Design Pricing</a><br>
<a class="alinks" href="http://www.financeperson.com/" target="_blank">Finance Articles</a><br>
<a class="alinks" href="http://www.classical-literature.com/" target="_blank">Classical Literature</a><br>
<a class="alinks" href="http://www.bailyes.com/maryland.htm" target="_blank">Maryland Bail Bonds Company</a><br>
<a class="alinks" href="http://www.sapsoftwaretutorials.com/software/sap-logistics.html" target="_blank">SAP Logistics</a><br>
</td>
</tr>
</table>
<table width="222" cellpadding="0" cellspacing="0" border="0" bgcolor="#f3f3f3">
<tr bgcolor="#ffffff">
<td height="2"><img src="http://www.hitecharticles.com/pic/x.gif" width="1" height="2" alt="" border="0"></td>
</tr>
</table>
<table width="222" cellpadding="0" cellspacing="0" border="0" bgcolor="#f3f3f3">
<tr bgcolor="#cfcfcf">
<td height="3"><img src="http://www.hitecharticles.com/pic/x.gif" width="1" height="3" alt="" border="0"></td>
</tr>
<tr bgcolor="#ffffff">
<td height="2"><img src="http://www.hitecharticles.com/pic/x.gif" width="1" height="2" alt="" border="0"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="994" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff" align="center">
<tr>
<td height="2"><img src="http://www.hitecharticles.com/pic/x.gif" width="1" height="2" alt="" border="0"></td>
</tr>
</table>
<table width="994" cellpadding="11" cellspacing="2" border="0" bgcolor="#f3f3f3" align="center">
<tr bgcolor="#cfcfcf">
<td>
<a class="alinks" href="http://www.hitecharticles.com/">Home</a> |
<a class="alinks" href="http://www.hitecharticles.com/top-authors.html">Top Authors</a> |
<a class="alinks" href="http://www.hitecharticles.com/submit.html">Submit Article</a> |
<a class="alinks" href="http://www.hitecharticles.com/archive.html">Archive</a> |
<a class="alinks" href="http://www.hitecharticles.com/rss.html">RSS Feeds</a>
</td>
</tr>
</table>
<!-- Start of StatCounter Code -->
<script type="text/javascript" language="javascript">
var sc_project=1325592;
var sc_invisible=1;
var sc_partition=9;
var sc_security="11558c78";
</script>
<script type="text/javascript" language="javascript" src="http://www.statcounter.com/counter/counter.js"></script><noscript><img src="http://c10.statcounter.com/counter.php?sc_project=1325592&java=0&security=11558c78&invisible=1" alt="website stat" border="0"></noscript>
<!-- End of StatCounter Code -->
<script>
//window.resizeTo(1024, 768);
//window.resizeTo(800, 600);
</script>
</body>
</html><br><div class="small" align="center">Page loaded in 0.077 seconds</div> |
