An vital tool for any web designer in the web 2.0 world is the ability to work with CSS codes. This method and tool for web design is a way to keep layout and content separate, which is essential in the the era of "write once, display anywhere" methodology.
Why Use CSS Codes in the First Place?
What is the advantage of learning this new coding method? Aside from the holy grail of content management, it simply makes life easier. As will be seen, entire websites can have their look and feel for thousands of pages dictated by a single CSS document. This means that when the client suddenly changes its corporate colors from green and purple to black and silver, instead of changing thousands of pages only one – the CSS document – needs to be changed.
It applies to a lot more than color – site interaction, paragraph layout, character fonts, page size and many more things can be controlled through CSS. It's a tool only limited by the imagination and coding skill of the person writing it.
There is also a benefit in terms of speed of page loading, since each page takes less formatting tags (such as <font>). This results in
faster page loading times for the viewers, and less time for the web designers to format the pages, which means more content can be produced in less time…in short, everybody wins.
One reason not to use CSS codes is that not all browsers actually support them consistently. There are many ways to work around the problem, but currently this does cut into the time saved in coding the web page.
The Style Element
Every HTML document has a separa tag, or the color of the text in the emphasis tag
# '''The value''' of the property (in the above example, it would be a color like "red" for the emphasis tag.
Each tag is not limited to only one rule; the emphasis tag could have more than one:
em { color: green }<br>
em { size: larger}
So an example of a whole style element, within the context of a web page, would look like the following:
<pre>
<head>
<style type="text/css">
body {
padding-left: 11em;
font-family: Arial, Helvetica, sans serif;
color: green;
background-color: #FFFFFF }
em {
font-style: bolder;
color: red}
</style>
</head>
Note that there are other elements of the header that should go on, such as the
, <meta> tags, and whatever javascript may be needed.
</p>
<a name="Separating_the_Content"></a><div id="GoogleADD2" style="clear:right;width:775px;float:left;padding-top:10px;padding-bottom:10px;background-color:#fbfbfb;padding-left:3px;"><span name="KonaFilter"><div class="SponsoredResults">
<div id="336x280_1"></div>
</div>
<script id="GoogleInputParams" language="javascript" type="text/javascript">
<!--
var google_ad_channel = '9443820743';
var google_ad_client = 'pub-3619764495662405';
var google_ad_output = 'js';
var google_ad_type = 'text_image';
var google_skip = '3';
var google_image_size = '468x60';
var google_max_num_ads = '3';
var google_ad_div = '468x60_1';
renderCustomAd('Web-Design');
ServeCustomGoogleAd('Web-Design','1638');
--></script>
<script language="javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script></span>
</div><h2>Separating the Content</h2>
<p>While it's fine to set up the css in the head of the page (and this is especially useful for pages that <i>need</i> to look different than the rest of the site) it tends to get crowded. A full set of rules to cover all tags can run many, many lines of code. And at that point the page is once again becoming cluttered and filled with things that are not needed.
</p><p>To really experience the magic of CSS codes, the style selectors should be put in a separate file, usually with the suffix ".css" (as opposed to .html or the like). No other tags such as <i>head</i> or <i>style</i> are necessary – just start the page with the first tag to be modified and go about defining the rules and selectors.
</p><p>However, at that point the page that references the .css page must be defined. That is done again in the <i>head</i> element on the page, but with a simple tag definition:
</p>
<link rel="stylesheet" href="pathToStyleSheet.css">
<p>where the "pathToStyleSheet.css" would be the page created with all the rules. When the site needs to be changed, only the .CSS codes need to be changed – all the other pages that reference it will automatically be switched.
</p><p>This document only scratches the surface of the creation of cascading style sheets, but with a solid background on the principles and some research in other <a href="http://web-design.lovetoknow.com/Main_Page|web" target="_blank" class="external text" title="http://web-design.lovetoknow.com/Main_Page|web" target="_blank" >design articles</a>, implementation of this time and bandwidth-saving technique is fast and easy.
</p>
<!-- Saved in parser cache with key ltk_webdesign:pcache:idhash:1638-0!1!0!!!2 and timestamp 20091107004049 -->
<div class="printfooter">
Retrieved from "<a href="http://web-design.lovetoknow.com/CSS_Codes">http://web-design.lovetoknow.com/CSS_Codes</a>"</div>
</div></div><!--nPageID: 1638--><div id="contributors"><hr style="height:1px;"/><br><script type="text/javascript">getContributors('Initial Author: <a href="/User:GrayMiller" rel="noindex,nofollow">GrayMiller</a><br>Recent Contributors: <a href="/User:MaryBethAdomaitis" rel="noindex,nofollow">MaryBethAdomaitis</a>, <a href="/User:Ann M." rel="noindex,nofollow">Ann M.</a>')</script> </div><br><div id="bottomarticleheading">
<h2 id="learnmore">Learn More</h2>
<div id="articlesHeading"><strong>Slideshows and Quizzes</strong>
<ul style="padding-left:10px;">
<li><a href="/Really_Cool_HTML_Codes" rel="popup,follow">Really Cool HTML Codes</a></li>
<li><a href="/Worst_Traffic_Rankings" rel="popup,follow">Worst Traffic Rankings</a></li>
<li><a href="/Free_Web_Page_Graphics" rel="popup,follow">Free Web Page Graphics</a></li>
<li><a href="/Cursive_Handwriting_Font" rel="popSurvey">Cursive Handwriting Font</a></li>
<li><a href="/Holistic_Website_Marketing" rel="popSurvey">Holistic Website Marketing</a></li>
</ul>
</div>
<div id="articlesHeading"><strong>Top 5 Web Design Articles</strong>
<ul style="padding-left:10px;">
<li><a href="/Free_Helvetica_Font">Free Helvetica Font</a></li>
<li><a href="/Free_Fonts_Helvetica_Truetype">Free Fonts Helvetica Truetype</a></li>
<li><a href="/Free_Forum_Hosting_Without_Ads">Free Forum Hosting Without Ads</a></li>
<li><a href="/Download_a_Free_Copy_of_Dreamweaver">Download a Free Copy of Dreamweaver</a></li>
<li><a href="/Animated_Falling_Snow_GIFS">Animated Falling Snow GIFS</a></li>
</ul>
</div>
<div id="articlesHeading"><strong>Related Articles</strong>
<ul style="padding-left:10px;">
<li><a href="/Cheap_Professional_Website_Builder">Cheap Professional Website Builder</a></li>
<li><a href="/What_is_XML">What is XML</a></li>
<li><a href="/Christmas_Lights_Backgrounds">Christmas Lights Backgrounds</a></li>
<li><a href="/Develop_Java_Website">Develop Java Website</a></li>
<li><a href="/WYSIWYG_HTML_Editor_Reviews">WYSIWYG HTML Editor Reviews</a></li>
</ul>
</div>
</div>
<br/><!-- Third AD1: --> <div style="width:100%;float:left">
<span name="KonaFilter"> <div name="commentForm" id="commentForm" style="height:240px;width:440px;padding-left:15px;padding-top:5px;padding-bottom:5px;float:left;border:1px solid black;background-color:#EFEFEF">
<a name="comments"></a>
<h2>Comment on CSS Codes</h2>
<!--UserID:--> <form name="comment" id="comment" method="post">
<br/>
<input size="29" type="text" name="cUserName" id="cUserName" value="Enter your name here" class="preText" onfocus="this.className='';this.value=''">
<input class="preText" size="29" type="text" name="cEmail" id="cEmail" value="Enter your email address here" onfocus="this.className='';this.value=''">
<br/><font class="tinysmall">(Displayed with your comment)
(Will not be displayed)
</font>
<br/>
<div style="padding-top:10px">
<textarea name="commentText" id="commentText" rows="5" style="width:95%"></textarea>
<input type="hidden" name="itemID" id="itemID" value="1638">
<input type="hidden" name="cmdSubmit" id="cmdSubmit" value="Save">
<input type="hidden" name="image_random_value" value="644c87da09444b4942bef3299de94372">
</div> <div style="float:left;width:60%;padding-top:5px;">Verification Code: <input size="5" type="text" name="imageCode" style="height:20px;" id="imageCode"/> <img src="/skins/js/randomImage.php?rand=H%D8%AF%958">
</div>
<div style="text-align:right;float:left;width:40%;padding-top:5px;">
<input type="image" onclick="return validateForm()" src="http://content.lovetoknow.com/skins/common/images/internet-add-comment.gif" border="0">
</div>
</form>
</div>
</span>
</div>
<br/> <!--HTTP_USER_AGENT: CCBot/1.0 (+http://www.commoncrawl.org/bot.html)--> <div class="updateEmailBoxHeading" style="top:7px">
<img src="/skins/common/newsletter-signup.gif" class="newsletter">
<form style="margin: 0px; padding: 0px;" name="form" method="get" action="/index.php">
<input style="height: 15px; font-size: 11.5px; font-family: arial;" size="19" type="text" name="updatEmail" id="updatEmail" value="enter email address" onfocus="if(this.value=='enter email address') {this.value='';}">
<input type="image" style="height: 22px; font-size: 11px; font-family: arial; vertical-align: middle; margin-top: -3px;" value=" Newsletter Sign Up! " src="/skins/common/images/signup-button.gif"/>
<input type="hidden" name="articleTitle" id="articleTitle" value="CSS_Codes">
<input name="title" type="hidden" value="LoveToKnow_Web-Design:Subscribed_User">
</form>
</div>
<div id="mainBottomLinks"><div id="bottomLink" style="width:100%;text-align:center;"><SCRIPT TYPE="text/javascript" SRC="http://load.exelator.com/load/?p=110&g=1&c=118747&ctg=web-design"></SCRIPT> <script type="text/javascript">getBottomLinks('/LoveToKnow_Web_Design:Articles_Wanted','live','This page has been accessed 1,753 times.',' This page was last modified 05:11, 3 June 2008.','CSS_Codes','','','0', '0','','LoveToKnow_Web-Design','Web-Design','','','0')</script>
</div></div><div id="mainBottomLinks" style="width:100%;text-align:center"><a href="/Main_Page">Web-Design Home</a><br><br><font face="verdana,arial" size="1">This page has been accessed 1,753 times. This page was last modified 05:11, 3 June 2008.<br>© 2006-2009 LoveToKnow Corp.</font></div></div><!--In renderGoogleTracking: Web-Design--> <script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-2328246-31");
pageTracker._trackPageview();
} catch(err) {}
</script>
</div> </div>
<div id="sideNav"> <div class="section" id="sideNavCategories"><div class="heading">Web Design Categories</div><ul> <li><a href="/Category:Web_Coding">Web Coding</a>
</li> <li><a href="/Category:Web_Design_Slideshows">Web Design Slideshows</a></li>
<li><a href="/Category:Web_Design_Tips_and_Tutorials">Web Design Tips and Tutorials</a></li>
<li><a href="/Category:Web_Design_Tools">Web Design Tools</a></li>
<li><a href="/Category:Web_Graphics">Web Graphics</a></li>
<li><a href="/Category:Website_Hosting">Website Hosting</a></li>
<li><a href="/Category:Website_Marketing">Website Marketing</a></li>
</ul></div> <!-- AdJuggler 5 request
Ad Spot: Web-Design 160x600
Channel: Undefined
Ad Dimension: IMU (Wide Skyscraper)
Category: Undefined
Sub-category: Undefined
-->
<div class="section sideNavAd"><script type="text/javascript" language="JavaScript">render160Ad('343913','Web-Design')</script></div>
<div name="KonaFilter" class="section tools">
<div class="heading">LoveToKnow Tools</div>
<style>
.tools ul
{
margin-left:0px;
}
</style>
<ul>
<li><a href="#" onclick="showPrint('CSS_Codes');" rel="nofollow" ><img alt="Print this page" title="Print this page" src="http://content.lovetoknow.com/skins/common/images/print_icon.gif"> Print this page</a></li>
<li><a onclick="pageTracker._trackPageview('/external/twitter');" href="http://twitter.com/lovetoknow" target="_blank" rel="nofollow"><img alt="Follow ltk on twitter" title="Follow ltk on twitter" src="http://content.lovetoknow.com/skins/common/images/twitter_icon.gif"> Follow ltk on twitter</a></li>
<li><a href="http://www.facebook.com/pages/LoveToKnow/43383149747" target="_blank" rel="nofollow"><img alt="Visit us on facebook" title="Follow ltk on twitter" src="http://content.lovetoknow.com/skins/common/images/facebook1.gif"> Visit us on facebook</a></li>
</ul>
</div>
<!--TEXT2: <ul><li><a class="normalRelatedlink" href="/Free_Guestbook_HTML">Free Guestbook HTML</a></li><li><a class="normalRelatedlink" href="/Auction_Templates_on_Ebay_for_Free">Auction Templates on Ebay for Free</a></li><li><a class="normalRelatedlink" href="/CGI_Script_Guestbook">CGI Script Guestbook</a></li><li><a class="normalRelatedlink" href="/RSS_Feeds_Filetype%3ARSS">RSS Feeds Filetype:RSS</a></li><li><a class="normalRelatedlink" href="/HTML_Source_for_a_Guestbook">HTML Source for a Guestbook</a></li><li><a class="normalRelatedlink" href="/Free_Music_HTML_Codes">Free Music HTML Codes</a></li><li><a class="normalRelatedlink" href="/Free_Xanga_HTML_Music">Free Xanga HTML Music</a></li><li><a class="normalRelatedlink" href="/Javascript_Stock_Ticker">Javascript Stock Ticker</a></li></ul>--><div class="section related"><div class="heading">More Articles</div>
<ul><li><a class="normalRelatedlink" href="/Free_Guestbook_HTML">Free Guestbook HTML</a></li><li><a class="normalRelatedlink" href="/Auction_Templates_on_Ebay_for_Free">Auction Templates on Ebay for Free</a></li><li><a class="normalRelatedlink" href="/CGI_Script_Guestbook">CGI Script Guestbook</a></li><li><a class="normalRelatedlink" href="/RSS_Feeds_Filetype%3ARSS">RSS Feeds Filetype:RSS</a></li><li><a class="normalRelatedlink" href="/HTML_Source_for_a_Guestbook">HTML Source for a Guestbook</a></li><li><a class="normalRelatedlink" href="/Free_Music_HTML_Codes">Free Music HTML Codes</a></li><li><a class="normalRelatedlink" href="/Free_Xanga_HTML_Music">Free Xanga HTML Music</a></li><li><a class="normalRelatedlink" href="/Javascript_Stock_Ticker">Javascript Stock Ticker</a></li></ul></div>
<!--br/>
<div class="newsOption"><a href="/index.php?title=Special:Userlogin&type=signup&returnto=CSS_Codes">REGISTER</a></div-->
<div id="LeftNavText">
<div class='section sideNavgigation'> <script type="text/javascript">getLeftNavigationText('<div width=\"100%\" align=\"center\"><div class=\"thumb tnone\"><div style=\"width:132px;\"><a href=\"Cursive Handwriting Font\" rel=\"popSurvey\" class=\"internal\" title=\"Cursive Handwriting Font Quiz\"><img src=\"/images/Web-Design/thumb/3/35/Letterf.jpg/130px-Letterf.jpg\" alt=\"Cursive Handwriting Font Quiz\" width=\"130\" height=\"144\" longdesc=\"/Image:Letterf.jpg\" /></a> <div class=\"thumbcaption\"> <a href=\"Cursive Handwriting Font\" rel=\"popSurvey\" >Cursive Handwriting Font Quiz</a></div></div></div></div> ')</script>
</div>
<script type="text/javascript">donationMeter("Toys for Tots","<a href='http://www.lovetoknow.com/LoveToKnow-Donations-vote.php'><img border='0' src='/skins/common/images/charity-vote-button.gif' alt=''/></a>");</script>
</div>
</div>
</div>
<script type="text/javascript">if (window.runOnloadHook) runOnloadHook();</script>
</div></div>
<div id="pageheader">
<div id="brand">
<div id="logo"><a href="http://www.lovetoknow.com"><img src="http://content.lovetoknow.com/skins/common/images/ltk_158_wide.jpg" border="0"></a></div>
<div id="tagline" style="float:left;width:280px;">everything you'd love to know</div>
</div>
<div id="categoryHeader" >
<!--[if IE 6]><style>.family{width:105px;}</style><![endif]-->
<UL>
<LI class="health"><A href="http://www.lovetoknow.com/health.html">Beauty & Health<!--[if IE 7]><!--></A>
<!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<UL>
<li><a title="Autism" href="http://autism.lovetoknow.com">Autism</a></li><li><a title="Diet" href="http://diet.lovetoknow.com">Diet</a></li><li><a title="Exercise" href="http://exercise.lovetoknow.com">Exercise</a></li><li><a title="Hair" href="http://hair.lovetoknow.com">Hair</a></li><li><a title="Herbs" href="http://herbs.lovetoknow.com">Herbs</a></li><li><a title="Makeup" href="http://makeup.lovetoknow.com">Makeup</a></li><li><a title="Pregnancy" href="http://pregnancy.lovetoknow.com">Pregnancy</a></li><li><a title="Skincare" href="http://skincare.lovetoknow.com">Skincare</a></li><li><a title="Sleep Disorders" href="http://sleep.lovetoknow.com">Sleep Disorders</a></li><li><a title="Stress Management" href="http://stress.lovetoknow.com">Stress Management</a></li><li><a title="Tattoos" href="http://tattoos.lovetoknow.com">Tattoos</a></li><li><a title="Vitamins" href="http://vitamins.lovetoknow.com">Vitamins</a></li><li><a title="Yoga" href="http://yoga.lovetoknow.com">Yoga</a></li> </UL>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></LI>
<LI class="entertainment"><A href="http://www.lovetoknow.com/entertainment.html">Entertainment & Hobbies<!--[if IE 7]><!--></A><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<UL>
<li><a title="Best" href="http://best.lovetoknow.com">Best</a></li><li><a title="Board Games" href="http://boardgames.lovetoknow.com">Board Games</a></li><li><a title="Celebrity" href="http://celebrity.lovetoknow.com">Celebrity</a></li><li><a title="Cheerleading" href="http://cheerleading.lovetoknow.com">Cheerleading</a></li><li><a title="Crafts" href="http://crafts.lovetoknow.com">Crafts</a></li><li><a title="Dance" href="http://dance.lovetoknow.com">Dance</a></li><li><a title="Guitars" href="http://guitar.lovetoknow.com">Guitars</a></li><li><a title="Movies" href="http://movies.lovetoknow.com">Movies</a></li><li><a title="Music" href="http://music.lovetoknow.com">Music</a></li><li><a title="Origami" href="http://origami.lovetoknow.com">Origami</a></li><li><a title="Paranormal" href="http://paranormal.lovetoknow.com">Paranormal</a></li><li><a title="Photography" href="http://photography.lovetoknow.com">Photography</a></li><li><a title="Quiz" href="http://quiz.lovetoknow.com">Quiz</a></li><li><a title="Reality-TV" href="http://reality-tv.lovetoknow.com">Reality TV</a></li><li><a title="Sci-Fi" href="http://sci-fi.lovetoknow.com">Sci Fi</a></li><li><a title="Scrapbooking" href="http://scrapbooking.lovetoknow.com">Scrapbooking</a></li><li><a title="Ski" href="http://ski.lovetoknow.com">Ski</a></li><li><a title="Soap-Operas" href="http://soap-operas.lovetoknow.com">Soap Operas</a></li><li><a title="Toys" href="http://toys.lovetoknow.com">Toys</a></li><li><a title="Video Games" href="http://videogames.lovetoknow.com">Video Games</a></li> </UL>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></LI>
<LI class="family"><A href="http://www.lovetoknow.com/family.html">Family & Lifestyle<!--[if IE 7]><!--></A><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<UL>
<li><a title="Recovery" href="http://addiction.lovetoknow.com">Recovery</a></li><li><a title="Baby" href="http://baby.lovetoknow.com">Baby</a></li><li><a title="Cars" href="http://cars.lovetoknow.com">Cars</a></li><li><a title="Cats" href="http://cats.lovetoknow.com">Cats</a></li><li><a title="Charity" href="http://charity.lovetoknow.com">Charity</a></li><li><a title="Childrens-Books" href="http://childrens-books.lovetoknow.com">Childrens Books</a></li><li><a title="College" href="http://college.lovetoknow.com">College</a></li><li><a title="Dating & Relationships" href="http://dating.lovetoknow.com">Dating & Relationships</a></li><li><a title="Death and Dying" href="http://dying.lovetoknow.com">Death and Dying</a></li><li><a title="Divorce" href="http://divorce.lovetoknow.com">Divorce</a></li><li><a title="Dogs" href="http://dogs.lovetoknow.com">Dogs</a></li><li><a title="Feng Shui" href="http://feng-shui.lovetoknow.com">Feng Shui</a></li><li><a title="French" href="http://french.lovetoknow.com">French</a></li><li><a title="Genealogy" href="http://genealogy.lovetoknow.com">Genealogy</a></li><li><a title="Home-School" href="http://home-school.lovetoknow.com">Home School</a></li><li><a title="Horoscopes" href="http://horoscopes.lovetoknow.com">Horoscopes</a></li><li><a title="Kids" href="http://kids.lovetoknow.com">Kids</a></li><li><a title="Safety" href="http://safety.lovetoknow.com">Safety</a></li><li><a title="Senior Citizens" href="http://seniors.lovetoknow.com">Senior Citizens</a></li><li><a title="Teens" href="http://teens.lovetoknow.com">Teens</a></li><li><a title="Vegetarian" href="http://vegetarian.lovetoknow.com">Vegetarian</a></li> </UL>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></LI>
<LI class="home"><A href="http://www.lovetoknow.com/home-garden.html">Home, Garden & Events<!--[if IE 7]><!--></A><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<UL>
<li><a title="Antiques" href="http://antiques.lovetoknow.com">Antiques</a></li><li><a title="Bedding" href="http://bedding.lovetoknow.com">Bedding</a></li><li><a title="Cake-Decorating" href="http://cake-decorating.lovetoknow.com">Cake Decorating</a></li><li><a title="Candles" href="http://candles.lovetoknow.com">Candles</a></li><li><a title="Christmas" href="http://christmas.lovetoknow.com">Christmas</a></li><li><a title="Cleaning" href="http://cleaning.lovetoknow.com">Cleaning</a></li><li><a title="Costumes" href="http://costumes.lovetoknow.com">Costumes</a></li><li><a title="Furniture" href="http://furniture.lovetoknow.com">Furniture</a></li><li><a title="Garden" href="http://garden.lovetoknow.com">Garden</a></li><li><a title="Gourmet" href="http://gourmet.lovetoknow.com">Gourmet</a></li><li><a title="Green Living" href="http://greenliving.lovetoknow.com">Green Living</a></li><li><a title="Home Improvement" href="http://homeimprovement.lovetoknow.com">Home Improvement</a></li><li><a title="Interior Design" href="http://interiordesign.lovetoknow.com">Interior Design</a></li><li><a title="Organic" href="http://organic.lovetoknow.com">Organic</a></li><li><a title="Party" href="http://party.lovetoknow.com">Party</a></li><li><a title="Recipes" href="http://recipes.lovetoknow.com">Recipes</a></li><li><a title="Weddings" href="http://weddings.lovetoknow.com">Weddings</a></li><li><a title="Wine" href="http://wine.lovetoknow.com">Wine</a></li> </UL>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></LI>
<LI class="selectedCategoryTab internet"><A href="http://www.lovetoknow.com/internet.html"><font color="#ffffff">Internet & Technology</font><!--[if IE 7]><!--></A><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<UL>
<li><a title="Buyer's Guide" href="http://buy.lovetoknow.com">Buyer's Guide</a></li><li><a title="Cell Phones" href="http://cellphones.lovetoknow.com">Cell Phones</a></li><li><a title="Online" href="http://online.lovetoknow.com">Online</a></li><li><a title="Social Networking" href="http://socialnetworking.lovetoknow.com">Social Networking</a></li><li><a title="Web Design" href="http://web-design.lovetoknow.com">Web Design</a></li> </UL>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></LI>
<LI class="business"><A href="http://www.lovetoknow.com/business.html">Money & Business<!--[if IE 7]><!--></A><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<UL >
<li><a title="Business" href="http://business.lovetoknow.com">Business</a></li><li><a title="Credit Cards" href="http://creditcards.lovetoknow.com">Credit Cards</a></li><li><a title="Freelance Writing" href="http://freelance-writing.lovetoknow.com">Freelance Writing</a></li><li><a title="Insurance" href="http://insurance.lovetoknow.com">Insurance</a></li><li><a title="Jobs & Careers" href="http://jobs.lovetoknow.com">Jobs & Careers</a></li><li><a title="Mortgage" href="http://mortgage.lovetoknow.com">Mortgage</a></li><li><a title="Savings" href="http://save.lovetoknow.com">Savings</a></li> </UL>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></LI>
<LI class="sstyle"><A href="http://www.lovetoknow.com/style.html">Style & Shopping<!--[if IE 7]><!--></A><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<UL>
<li><a title="Childrens-Clothing" href="http://childrens-clothing.lovetoknow.com">Childrens Clothing</a></li><li><a title="Engagement Rings" href="http://engagementrings.lovetoknow.com">Engagement Rings</a></li><li><a title="Handbags" href="http://handbags.lovetoknow.com">Handbags</a></li><li><a title="Jewelry" href="http://jewelry.lovetoknow.com">Jewelry</a></li><li><a title="Lingerie" href="http://lingerie.lovetoknow.com">Lingerie</a></li><li><a title="Men's Fashion" href="http://mens-fashion.lovetoknow.com">Men's Fashion</a></li><li><a title="Plus Size" href="http://plussize.lovetoknow.com">Plus Size</a></li><li><a title="Shoes" href="http://shoes.lovetoknow.com">Shoes</a></li><li><a title="Sunglasses" href="http://sunglasses.lovetoknow.com">Sunglasses</a></li><li><a title="Swimsuits" href="http://swimsuits.lovetoknow.com">Swimsuits</a></li><li><a title="Uniforms" href="http://uniforms.lovetoknow.com">Uniforms</a></li><li><a title="Watches" href="http://watches.lovetoknow.com">Watches</a></li><li><a title="Women's Fashion" href="http://womens-fashion.lovetoknow.com">Women's Fashion</a></li> </UL>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></LI>
<LI class="travel"><A href="http://www.lovetoknow.com/travel.html" >Travel & Vacations<!--[if IE 7]><!--></A><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<UL>
<li><a title="Camping" href="http://camping.lovetoknow.com">Camping</a></li><li><a title="Cruises" href="http://cruises.lovetoknow.com">Cruises</a></li><li><a title="San Francisco" href="http://sanfrancisco.lovetoknow.com">San Francisco</a></li><li><a title="Theme Parks" href="http://themeparks.lovetoknow.com">Theme Parks</a></li><li><a title="Travel" href="http://travel.lovetoknow.com">Travel</a></li> </UL>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></LI>
</UL>
</div>
<div id="mainheader" class="commonmainHeader">
<div id="title"><a class="breadcrumbHeading" href="/Main_Page">WEB DESIGN</a></div>
<div id="search"><script type="text/javascript">getSearch('','LoveToKnow_Web-Design','Web-Design','')</script></div>
</div>
<div id="breadcrumbs" class="commonbreadcrumbs">
<div id="crumbs"><span name="KonaFilter">You are here: <a href="http://www.lovetoknow.com">LoveToKnow</a> » <a href="http://www.lovetoknow.com/internet.html">Internet & Technology</a> » <a href="/Main_Page">Web Design</a> » <a href="/Category:Web_Coding">Web Coding</a> » CSS Codes</span></div>
<div id="bookmark">
</div>
</div>
</div>
<!-- Served by app9 in 3.551 secs. --> <!-- Kontera ContentLink -->
<script type="text/javascript">
var dc_UnitID = 14;
var dc_PublisherID = 25351;
var dc_AdLinkColor = '#0000CC';
var dc_isBoldActive= 'no';
var dc_adprod='ADL';
</script>
<script type="text/javascript" SRC="http://kona.kontera.com/javascript/lib/KonaLibInline.js"></script>
<!-- Kontera ContentLink -->
</body></html>
