 |
|
|
|
| |
CSS: The Basics - ID's and ClassesWritten by Eric McArdle
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 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" href="http://www.yourdomain.com/css" rel="nofollow"> </head> <p>If you decide to use an internal stylesheet, you have to put your css style wihin<IMG height=12 src="/the2.jpg" alt="repparttar 105167"> following tags: <p><style type="text/css"> </style> <p>All css or links to<IMG height=12 src="/the2.jpg" alt="repparttar 105168"> external stylesheets have to go in between<IMG height=12 src="/the2.jpg" alt="repparttar 105169"> <head> tags <p>Now about Css Classes vs. ID's <p>The one major difference between a class and an id is that classes can be used multiple times within<IMG height=12 src="/the2.jpg" alt="repparttar 105170"> same page while an Id can only be used once per page. <p>Example: <p>ID - The global navigation of your site, or a navigation bar. A footer, header, etc. Only items that appear in only one place per page. <p>Class - Anything that you would use multiple times in your page, such as titles, subtitles, headlines, and<IMG height=12 src="/the2.jpg" alt="repparttar 105171"> like. <p>Creating ID 's<p>To create an Id in your css, you would start with<IMG height=12 src="/the2.jpg" alt="repparttar 105172"> number sign (#) and then your label of<IMG height=12 src="/the2.jpg" alt="repparttar 105173"> id. Here's an example <p>#navigation { float:left; } <p>To insert<IMG height=12 src="/the2.jpg" alt="repparttar 105174"> 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 <br><br></font></td><!-- google_ad_section_end --><!-- google_ad_section_start(weight=ignore) --><td align="top" width="10%"></td><td align="top" width="45%"><h2>CSS: The Basics - ID's and Classes ... Correct</h2><font size="2">Written by Eric McArdle</font><br><br><script type="text/javascript"><!--
google_ad_client = "pub-5766870852072819";
google_ad_width = 234;
google_ad_height = 60;
google_ad_format = "234x60_as";
google_ad_channel ="9238851329";
google_color_border = "CFB9A1";
google_color_bg = "CFB9A1";
google_color_link = "000000";
google_color_url = "431B02";
google_color_text = "431B02";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<br> <font size="2">Css <p>Cascading Style Sheets <p>Two types of style sheets: Internal and External <p>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.... <p>External Stylesheets - Instead of putting all<IMG height=12 src="/the2.jpg" alt="repparttar "> 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 <p>{head} {title}Webpage title{ itle} {link rel="stylesheet" type="text/css" href="http://www.yourdomain.com/css" rel="nofollow"} {/head}<p>If you decide to use an internal stylesheet, you have to put your css style wihin<IMG height=12 src="/the2.jpg" alt="repparttar 105166"> following tags: <p>{style type="text/css"} {/style} <p>All css or links to<IMG height=12 src="/the2.jpg" alt="repparttar 105167"> external stylesheets have to go in between<IMG height=12 src="/the2.jpg" alt="repparttar 105168"> {head} tags <p>Now about Css Classes vs. ID's <p>The one major difference between a class and an id is that classes can be used multiple times within<IMG height=12 src="/the2.jpg" alt="repparttar 105169"> same page while an Id can only be used once per page. <p>Example: <p>ID - The global navigation of your site, or a navigation bar. A footer, header, etc. Only items that appear in only one place per page. <p>Class - Anything that you would use multiple times in your page, such as titles, subtitles, headlines, and<IMG height=12 src="/the2.jpg" alt="repparttar 105170"> like. <p>Creating ID 's<p>To create an Id in your css, you would start with<IMG height=12 src="/the2.jpg" alt="repparttar 105171"> number sign (#) and then your label of<IMG height=12 src="/the2.jpg" alt="repparttar 105172"> id. Here's an example <p>#navigation { float:left; } <p>To insert<IMG height=12 src="/the2.jpg" alt="repparttar 105173"> 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} <br><br></font></td><!-- google_ad_section_end --></tr><tr><td>Cont'd on page 2 ==<a class="mlink" href="2-CSS*_The_Basics_-_ID's_and_Classes-5167.htm">></a></td></tr></table><script type="text/javascript"><!--
google_ad_client = "pub-5766870852072819";
google_ad_width = 728;
google_ad_height = 90;
google_ad_format = "728x90_as";
google_ad_channel ="8831454965";
google_color_border = "CFB9A1";
google_color_bg = "CFB9A1";
google_color_link = "000000";
google_color_url = "431B02";
google_color_text = "431B02";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</td>
</tr>
</table>
<table width="770" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td height="48" align="center" background="images/bg_nav_bottm.jpg"><span class="style3">ImproveHomeLife.com © 2005<br> <a href="terms.html" rel="nofollow">Terms of Use</a></span></td>
</tr>
</table></td>
</tr>
</table>
<script type="text/javascript">
var HASH_ESCAPED="%23";
function TrackIt(adUnit){
if (window.status)
{
var adDomain = escape(window.status.substring(6));
var pyPage = document.location.pathname;
var params = document.location.search;
var hasAnchor = params.lastIndexOf(HASH_ESCAPED)!= -1;
params = hasAnchor? (params.substring(0, params.lastIndexOf(HASH_ESCAPED))) : params;
pyPage = escape(pyPage.substring(pyPage.lastIndexOf('/') + 1));
pyPage = pyPage + params;
var curTime = new Date().valueOf();
var bug = new Image();
bug.src = '/track/adsenseTrack.php?pyPage=' + pyPage + '&adDomain=' + adDomain + '&adUnit=' + adUnit + "&time=" + curTime;
}
}
function TrackIt0() {TrackIt(0); }
function TrackIt1() {TrackIt(1); }
function TrackIt2() {TrackIt(2); }
var elements = document.getElementsByTagName("iframe");
for (var i = 0; i < elements.length; i++)
{
if(elements[i].src.indexOf('googlesyndication.com') > -1)
{
//elements[i].onfocus = TrackIt;
if (i==0) elements[i].onfocus = TrackIt0;
if (i==1) elements[i].onfocus = TrackIt1;
if (i==2) elements[i].onfocus = TrackIt2;
}
}
</script>
<!--WEBBOT bot="HTMLMarkup" startspan ALT="Site Meter" -->
<script type="text/javascript" language="JavaScript">var site="s19improve"</script>
<script type="text/javascript" language="JavaScript1.2" src="http://s19.sitemeter.com/js/counter.js?site=s19improve">
</script>
<noscript>
<a href="http://s19.sitemeter.com/stats.asp?site=s19improve" target="_top">
<img src="http://s19.sitemeter.com/meter.asp?site=s19improve" alt="Site Meter" border=0></a>
</noscript>
<!-- Copyright (c)2002 Site Meter -->
<!--WEBBOT bot="HTMLMarkup" Endspan -->
</body>
</html>
|
| |
