|
|
CSS: The Basics - ID's and Classes
Published by Eric McArdle
Submitted: 09 April,2004
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, 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. http://www.trafficazine.com</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
</TD>
</TR>
</TABLE>
</CENTER>
</DIV>
</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD WIDTH="100%" BGCOLOR="#FFFFFF" ALIGN="center" VALIGN="top" HEIGHT="77" BACKGROUND="/images/index_04.gif">
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" STYLE="border-collapse: collapse; font-family:Verdana; font-size:11px; color:#000000" BORDERCOLOR="#111111" WIDTH="100%" ID="AutoNumber11" HEIGHT="42">
<TR STYLE="font-family: Verdana; font-size: 11px; color: #000000">
<TD WIDTH="100%" VALIGN="top" HEIGHT="19" STYLE="font-family: Verdana; font-size: 11px; color: #000000">
<IMG SRC="/images/index_02.gif" WIDTH=806 HEIGHT=5 ALT=""></TD>
</TR>
<TR STYLE="font-family: Verdana; font-size: 11px; color: #000000">
<TD WIDTH="100%" VALIGN="bottom" HEIGHT="23" STYLE="font-family: Verdana; font-size: 11px; color: #000000">
<P ALIGN="center"><span class="SideHeading"><span class=small>
Copyright © 2002-2006 - FreeArticleSearch.com - <script language="Javascript" src="http://WhoIsOnline.net/?action=track&siteurl=http://freearticlesearch.com"></script>
</SPAN></SPAN></TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
<a href="ror.xml"><img src="http://www.rorweb.com/rorinfo.gif" width="80" height="15" border="0" alt="ROR"/></a>
</CENTER>
</DIV>
</BODY>
</HTML> | |
