Introduction To Cascading Style Sheets

CSS (Cascading Style Sheets) have been around for a while now,
and act as a complement to plain old HTML files. Style sheets
allow a developer to separate HTML code from formatting rules
and styles. It seems like many HTML beginnersÂ’ under-estimate
the power and flexibility of the style sheet. In this article,
IÂ’m going to describe what cascading style sheets are, their
benefits, and two ways to implement them.

—————————————
Cascading whats?
—————————————

Cascading Style SheetsÂ…thatÂ’s what! TheyÂ’re what paint is to
canvas, what topping is to ice creamÂ… they complement HTML
and allow us to define the style (look and feel) for our entire
site in just one file!

Cascading style sheets were introduced to the web development
world way back in 1996. They get their name from the fact that
each different style declaration can be Â“cascadedÂ” under the
one above it, forming a parent-child relationship between the
styles.

They were quickly standardized, and both Internet Explorer and
Netscape built their latest browser releases to match the CSS
standard (or, to match it as closely as they could).

So, youÂ’re still asking what a style sheet exactly is? A style
sheet is a free-flowing document that can either be referenced
by, or included into a HTML document. Style sheets use blocks
of formatted code to define styles for existing HTML elements,
or new styles, called classes.

Style sheets can be used to change the height of some text, to
change the background color of a page, to set the default border
color of a tableÂ…the list goes on and on. Put simply though,
style sheets are used to set the formatting, color scheme and
style of an HTML page.

Style sheets should be used instead of the standard , ,
and tags because:

- One style sheet can be referenced from many pages, meaning
that each file is kept to a minimum size and only requires
only extra line to load the external style sheet file

- If you ever need to change any part of your sites look/feel,
it can be done quickly and only needs to be done in one
place: the style sheet.

- With cascading style sheets, there are many, many page
attributes that simply cannot be set without them:
individual tags can have different background colors,
borders, indents, shadows, etc.

Style sheets can either be inline (included as part of a HTML
document), or, referenced externally (Contained in a separate
file and referenced from the HTML document). Inline style sheets
are contained wholly within a HTML document and will only
change the look and layout of that HTML file.

Open your favorite text editor and enter the following code.
Save the file as stylesheet.html and open it in your browser:

Cascading Style Sheet Example < itle> <br /> <br /> <style> h1 <br /> { <br /> color: #636594; <br /> font-family: Verdana; <br /> size: 18pt; <br /> }<br /> </style> <p> </head> <br /><body> <br /> <br /> <h1>This is one big H1 tag!</h1> <p></body> <br /></html> </p> <p>When you fire up your browser, you should see the text “This is<br />one big H1 tag!” in a large, blue Verdana font face.</p> <p>LetÂ’s step through the style code step by step. Firstly, we have<br />a pretty standard HTML header. The page starts with the <html><br />tag followed by the <head> tag. Next, we use a standard <title><br />tag to set the title of the page we are working with. </p> <p>Notice, though, that before the <head> tag is closed, we have<br />our<br /> <style> tag, its contents, and then the closing </style> <p> tag.</p> <style> h1 <br /> { <br /> color: #636594; <br /> font-family: Verdana; <br /> size: 18pt; <br /> } <br /></style> <p>When you add the style sheet code inline (as part of the HTML<br />document), it must be bound by<br /> <style> and </style> <p> tags<br />respectively. Our example is working with the<br /> <h1> tag. We are<br />changing three attributes of the<br /> <h1>Â’s style: the text color<br />(color), the font that any<br /> <h1> tags on the page will be<br />displayed in (font-family), and lastly, the size of the font<br />(size). </p> <p>The code between the { and } are known as the attributes. Our<br />sample code has three. Try changing the hexadecimal value of<br />the color attribute to #A00808 and then save and refresh the<br />page. You should see the same text, just coloured red instead<br />of blue.</p> <p>—————————————<br />An example of an external style sheet<br />—————————————</p> <p>External style sheets are similar to internal style sheets,<br />however, they are stripped of the<br /> <style> and </style> <p> tags,<br />and need to be referenced from another HTML file to be used. </p> <p>Create a new file called Â“mystyle.cssÂ” and enter the following<br />code into it:</p> <p>h1 <br />{ <br /> color: #a00808; <br /> font-family: Verdana; <br /> size: 18pt <br />} </p> <p>Next, create a HTML file and name it external.html. Enter the<br />following code into external.html:</p> <p><html> <br /> <head> <br /> <title> External Style Sheet Reference Example < itle> <br /> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <br /> <body> <br /> <br /> <h1>This is one big H1 tag!</h1> <p> </body> <br /></html> </p> <p>As mentioned above, you can see that the actual code in<br />mystyle.css is exactly the same as it was in the inline example.<br />In our HTML file, we simply place a <link> tag in the <head><br />section of our page. The rel=Â”stylesheetÂ” attribute tells the<br />browser that the link to the external file is a style sheet.<br />The type=Â”text/cssÂ” attribute tells the browser that mystyle.css<br />is a text file containing css (cascading style sheet)<br />declarations. Lastly, the href=Â”mystyle.cssÂ” attribute tells<br />the browser that the actual file we want to load is mystyle.css. </p> <p>—————————————<br />Conclusion<br />—————————————</p> <p>Well, there you have it, a quick look at style sheets and how<br />to implement both an inline and external version. Checkout the<br />links below if youÂ’ve never worked with cascading style sheets<br />before. You will be surprised at some of the things you can do<br />with them! </p> <p>- http://www.devarticles.com/art/1/7<br />- http://hotwired.lycos.com/webmonkey/98/15/index0a.html<br />- http://www.webreview.com/style/index.shtml<br />- http://jigsaw.w3.org/css-validator/</p> <p><u>Authur Information:</u></p> <p> Mitchell is the founder and senior editor of<br />http://www.devarticles.com. DevArticles provides its readers<br />with top quality ASP, PHP and .NET articles, interviews and<br />product reviews. If you’re looking for insider tips and tricks,<br />you’ll also find them at DevArticles. You can visit DevArticles<br />by clicking on this link: http://www.devarticles.com.</p> <p class="akst_link"><a href="http://www.freearticleonline.info/?p=192&akst_action=share-this" onclick="akst_share('192', 'http%3A%2F%2Fwww.freearticleonline.info%2F2007%2F09%2Fintroduction-to-cascading-style-sheets%2F', 'Introduction+To+Cascading+Style+Sheets', '192', '4e52de6a-4885-4db0-87e9-392af94da8e4'); return false;" title="Email, post to del.icio.us, etc." id="akst_link_192" class="akst_share_link" rel="noindex nofollow">ShareThis</a> </p> <p align=right></p> <div style="clear:both;"></div> <div class="postinfo"> September 21, 2007 | Filed Under <a href="http://www.freearticleonline.info/category/css/" title="View all posts in CSS" rel="category tag">CSS</a> </div>  <h3>Comments</h3>  <div id="commentblock">  <p id="respond"><b>Leave a Reply</b></p> <p>You must be <a href="http://www.freearticleonline.info/wp-login.php?redirect_to=http://www.freearticleonline.info/2007/09/introduction-to-cascading-style-sheets/">logged in</a> to post a comment.</p></div> </div>  <div id="l_sidebar"> <ul id="l_sidebarwidgeted"> <li id="Categories"> <h2>Categories</h2> <ul> <li class="cat-item cat-item-1"><a href="http://www.freearticleonline.info/category/advertising/" title="View all posts filed under Advertising">Advertising</a> </li> <li class="cat-item cat-item-3"><a href="http://www.freearticleonline.info/category/advice/" title="View all posts filed under Advice">Advice</a> </li> <li class="cat-item cat-item-4"><a href="http://www.freearticleonline.info/category/affiliate-programs/" title="View all posts filed under Affiliate-programs">Affiliate-programs</a> </li> <li class="cat-item cat-item-5"><a href="http://www.freearticleonline.info/category/autos/" title="View all posts filed under Autos">Autos</a> </li> <li class="cat-item cat-item-6"><a href="http://www.freearticleonline.info/category/awards/" title="View all posts filed under Awards">Awards</a> </li> <li class="cat-item cat-item-7"><a href="http://www.freearticleonline.info/category/business/" title="View all posts filed under Business">Business</a> </li> <li class="cat-item cat-item-8"><a href="http://www.freearticleonline.info/category/careers/" title="View all posts filed under Careers">Careers</a> </li> <li class="cat-item cat-item-9"><a href="http://www.freearticleonline.info/category/cgi/" title="View all posts filed under Cgi">Cgi</a> </li> <li class="cat-item cat-item-10"><a href="http://www.freearticleonline.info/category/communication/" title="View all posts filed under Communication">Communication</a> </li> <li class="cat-item cat-item-11"><a href="http://www.freearticleonline.info/category/computers/" title="View all posts filed under Computers">Computers</a> </li> <li class="cat-item cat-item-13"><a href="http://www.freearticleonline.info/category/css/" title="View all posts filed under CSS">CSS</a> </li> <li class="cat-item cat-item-15"><a href="http://www.freearticleonline.info/category/dhtml/" title="View all posts filed under DHTML">DHTML</a> </li> <li class="cat-item cat-item-16"><a href="http://www.freearticleonline.info/category/direct-mail/" title="View all posts filed under Direct-mail">Direct-mail</a> </li> <li class="cat-item cat-item-17"><a href="http://www.freearticleonline.info/category/domain-names/" title="View all posts filed under Domain-names">Domain-names</a> </li> <li class="cat-item cat-item-18"><a href="http://www.freearticleonline.info/category/ebooks/" title="View all posts filed under Ebooks">Ebooks</a> </li> <li class="cat-item cat-item-19"><a href="http://www.freearticleonline.info/category/ecommerce/" title="View all posts filed under Ecommerce">Ecommerce</a> </li> <li class="cat-item cat-item-20"><a href="http://www.freearticleonline.info/category/education/" title="View all posts filed under Education">Education</a> </li> <li class="cat-item cat-item-21"><a href="http://www.freearticleonline.info/category/email/" title="View all posts filed under Email">Email</a> </li> <li class="cat-item cat-item-22"><a href="http://www.freearticleonline.info/category/entertainment/" title="View all posts filed under Entertainment">Entertainment</a> </li> <li class="cat-item cat-item-23"><a href="http://www.freearticleonline.info/category/environment/" title="View all posts filed under Environment">Environment</a> </li> <li class="cat-item cat-item-24"><a href="http://www.freearticleonline.info/category/family/" title="View all posts filed under Family">Family</a> </li> <li class="cat-item cat-item-25"><a href="http://www.freearticleonline.info/category/finance/" title="View all posts filed under Finance">Finance</a> </li> <li class="cat-item cat-item-26"><a href="http://www.freearticleonline.info/category/fitness/" title="View all posts filed under Fitness">Fitness</a> </li> <li class="cat-item cat-item-27"><a href="http://www.freearticleonline.info/category/food/" title="View all posts filed under Food">Food</a> </li> <li class="cat-item cat-item-28"><a href="http://www.freearticleonline.info/category/free/" title="View all posts filed under Free">Free</a> </li> <li class="cat-item cat-item-29"><a href="http://www.freearticleonline.info/category/gardening/" title="View all posts filed under Gardening">Gardening</a> </li> <li class="cat-item cat-item-30"><a href="http://www.freearticleonline.info/category/government/" title="View all posts filed under Government">Government</a> </li> <li class="cat-item cat-item-31"><a href="http://www.freearticleonline.info/category/health/" title="View all posts filed under Health">Health</a> </li> <li class="cat-item cat-item-33"><a href="http://www.freearticleonline.info/category/home-business/" title="View all posts filed under Home-Business">Home-Business</a> </li> <li class="cat-item cat-item-34"><a href="http://www.freearticleonline.info/category/home-repair/" title="View all posts filed under Home-repair">Home-repair</a> </li> <li class="cat-item cat-item-35"><a href="http://www.freearticleonline.info/category/humor/" title="View all posts filed under Humor">Humor</a> </li> <li class="cat-item cat-item-36"><a href="http://www.freearticleonline.info/category/internet/" title="View all posts filed under Internet">Internet</a> </li> <li class="cat-item cat-item-37"><a href="http://www.freearticleonline.info/category/javascript/" title="View all posts filed under Javascript">Javascript</a> </li> <li class="cat-item cat-item-38"><a href="http://www.freearticleonline.info/category/law/" title="View all posts filed under Law">Law</a> </li> <li class="cat-item cat-item-41"><a href="http://www.freearticleonline.info/category/marketing/" title="View all posts filed under Marketing">Marketing</a> </li> <li class="cat-item cat-item-43"><a href="http://www.freearticleonline.info/category/metaphysical/" title="View all posts filed under Metaphysical">Metaphysical</a> </li> <li class="cat-item cat-item-44"><a href="http://www.freearticleonline.info/category/mlm/" title="View all posts filed under MLM">MLM</a> </li> <li class="cat-item cat-item-45"><a href="http://www.freearticleonline.info/category/motivational/" title="View all posts filed under Motivational">Motivational</a> </li> <li class="cat-item cat-item-46"><a href="http://www.freearticleonline.info/category/multimedia/" title="View all posts filed under Multimedia">Multimedia</a> </li> <li class="cat-item cat-item-47"><a href="http://www.freearticleonline.info/category/newsletters/" title="View all posts filed under Newsletters">Newsletters</a> </li> <li class="cat-item cat-item-48"><a href="http://www.freearticleonline.info/category/off-line-promotion/" title="View all posts filed under Off-Line Promotion">Off-Line Promotion</a> </li> <li class="cat-item cat-item-49"><a href="http://www.freearticleonline.info/category/online-promotion/" title="View all posts filed under Online Promotion">Online Promotion</a> </li> <li class="cat-item cat-item-51"><a href="http://www.freearticleonline.info/category/pets/" title="View all posts filed under Pets">Pets</a> </li> <li class="cat-item cat-item-52"><a href="http://www.freearticleonline.info/category/politics/" title="View all posts filed under Politics">Politics</a> </li> <li class="cat-item cat-item-53"><a href="http://www.freearticleonline.info/category/psychology/" title="View all posts filed under Psychology">Psychology</a> </li> <li class="cat-item cat-item-60"><a href="http://www.freearticleonline.info/category/se-positioning/" title="View all posts filed under SE Positioning">SE Positioning</a> </li> <li class="cat-item cat-item-61"><a href="http://www.freearticleonline.info/category/se-tactics/" title="View all posts filed under SE Tactics">SE Tactics</a> </li> <li class="cat-item cat-item-62"><a href="http://www.freearticleonline.info/category/self-help/" title="View all posts filed under Self Help">Self Help</a> </li> <li class="cat-item cat-item-63"><a href="http://www.freearticleonline.info/category/sexuality/" title="View all posts filed under Sexuality">Sexuality</a> </li> <li class="cat-item cat-item-64"><a href="http://www.freearticleonline.info/category/site-security/" title="View all posts filed under Site Security">Site Security</a> </li> <li class="cat-item cat-item-65"><a href="http://www.freearticleonline.info/category/social-issues/" title="View all posts filed under Social Issues">Social Issues</a> </li> <li class="cat-item cat-item-66"><a href="http://www.freearticleonline.info/category/spam/" title="View all posts filed under Spam">Spam</a> </li> <li class="cat-item cat-item-67"><a href="http://www.freearticleonline.info/category/sports/" title="View all posts filed under Sports">Sports</a> </li> <li class="cat-item cat-item-68"><a href="http://www.freearticleonline.info/category/technology/" title="View all posts filed under Technology">Technology</a> </li> <li class="cat-item cat-item-69"><a href="http://www.freearticleonline.info/category/traffic-analysis/" title="View all posts filed under Traffic Analysis">Traffic Analysis</a> </li> <li class="cat-item cat-item-70"><a href="http://www.freearticleonline.info/category/travel/" title="View all posts filed under Travel">Travel</a> </li> <li class="cat-item cat-item-71"><a href="http://www.freearticleonline.info/category/viral-marketing/" title="View all posts filed under Viral Marketing">Viral Marketing</a> </li> <li class="cat-item cat-item-72"><a href="http://www.freearticleonline.info/category/web-design/" title="View all posts filed under Web Design">Web Design</a> </li> <li class="cat-item cat-item-73"><a href="http://www.freearticleonline.info/category/web-hosting/" title="View all posts filed under Web Hosting">Web Hosting</a> </li> <li class="cat-item cat-item-74"><a href="http://www.freearticleonline.info/category/webmasters/" title="View all posts filed under Webmasters">Webmasters</a> </li> <li class="cat-item cat-item-75"><a href="http://www.freearticleonline.info/category/weight-loss/" title="View all posts filed under Weight Loss">Weight Loss</a> </li> <li class="cat-item cat-item-76"><a href="http://www.freearticleonline.info/category/wisdom/" title="View all posts filed under Wisdom">Wisdom</a> </li> <li class="cat-item cat-item-77"><a href="http://www.freearticleonline.info/category/womens-issues/" title="View all posts filed under Women's Issues">Women's Issues</a> </li> <li class="cat-item cat-item-78"><a href="http://www.freearticleonline.info/category/writing/" title="View all posts filed under Writing">Writing</a> </li> </ul> </li> <li id="Recent"> <h2>Recently Written</h2> <ul> <li><a href='http://www.freearticleonline.info/2008/11/10-reasons-to-use-promotional-items/' title='10 Reasons to Use Promotional Items'>10 Reasons to Use Promotional Items</a></li> <li><a href='http://www.freearticleonline.info/2008/11/what-you%c2%92ll-pay-to-hire-an-atlanta-limo/' title='What you?ll pay to hire an Atlanta limo'>What you?ll pay to hire an Atlanta limo</a></li> <li><a href='http://www.freearticleonline.info/2008/11/tips-on-choosing-the-right-gas-mileage-devices/' title='Tips On Choosing The Right Gas Mileage Devices'>Tips On Choosing The Right Gas Mileage Devices</a></li> <li><a href='http://www.freearticleonline.info/2008/11/what-are-conflict-diamonds/' title='What Are Conflict Diamonds'>What Are Conflict Diamonds</a></li> <li><a href='http://www.freearticleonline.info/2008/11/interesting-ideas-for-families-looking-for-cheap-holiday-breaks/' title='Interesting Ideas For Families looking for cheap Holiday Breaks'>Interesting Ideas For Families looking for cheap Holiday Breaks</a></li> <li><a href='http://www.freearticleonline.info/2008/11/winning-your-ex-back-how-to-win-back-your-ex-in-5-steps/' title='Winning Your Ex Back - How To Win Back Your Ex In 5 Steps'>Winning Your Ex Back - How To Win Back Your Ex In 5 Steps</a></li> <li><a href='http://www.freearticleonline.info/2008/11/promotional-gifts-a-trusted-plan-for-bright-business-future/' title='Promotional Gifts - A Trusted Plan for Bright Business Future'>Promotional Gifts - A Trusted Plan for Bright Business Future</a></li> <li><a href='http://www.freearticleonline.info/2008/11/finding-free-online-business-advertising/' title='Finding Free Online Business Advertising'>Finding Free Online Business Advertising</a></li> <li><a href='http://www.freearticleonline.info/2008/11/child-approved-uk-family-breaks/' title='Child Approved UK Family Breaks'>Child Approved UK Family Breaks</a></li> <li><a href='http://www.freearticleonline.info/2008/11/promotional-gifts-%c2%96-a-ladder-to-success/' title='Promotional Gifts ? A Ladder to Success'>Promotional Gifts ? A Ladder to Success</a></li> </ul> </li> </ul> </div>   <div id="r_sidebar"> <ul id="r_sidebarwidgeted"> <li id="Search"> <form method="get" id="search_form" action="http://www.freearticleonline.info/"> <input type="text" class="search_input" value="To search, type and hit enter" name="s" id="s" onfocus="if (this.value == 'To search, type and hit enter') {this.value = '';}" onblur="if (this.value == '') {this.value = 'To search, type and hit enter';}" /> <input type="hidden" id="searchsubmit" value="Search" /></form><br /> </li> <li id="About"> <h2>About</h2> <p><a href=/>FREE Articleonline.Info is providing free articles for you, <br><br>Please feel free to read and enjoy the articles. :)</a></p> </li> <li id="Archives"> <h2>Archives</h2> <ul> <li><a href='http://www.freearticleonline.info/2008/11/' title='November 2008'>November 2008</a></li> <li><a href='http://www.freearticleonline.info/2008/10/' title='October 2008'>October 2008</a></li> <li><a href='http://www.freearticleonline.info/2008/09/' title='September 2008'>September 2008</a></li> <li><a href='http://www.freearticleonline.info/2008/08/' title='August 2008'>August 2008</a></li> <li><a href='http://www.freearticleonline.info/2008/07/' title='July 2008'>July 2008</a></li> <li><a href='http://www.freearticleonline.info/2008/06/' title='June 2008'>June 2008</a></li> <li><a href='http://www.freearticleonline.info/2008/05/' title='May 2008'>May 2008</a></li> <li><a href='http://www.freearticleonline.info/2008/04/' title='April 2008'>April 2008</a></li> <li><a href='http://www.freearticleonline.info/2008/03/' title='March 2008'>March 2008</a></li> <li><a href='http://www.freearticleonline.info/2008/02/' title='February 2008'>February 2008</a></li> <li><a href='http://www.freearticleonline.info/2008/01/' title='January 2008'>January 2008</a></li> <li><a href='http://www.freearticleonline.info/2007/12/' title='December 2007'>December 2007</a></li> <li><a href='http://www.freearticleonline.info/2007/11/' title='November 2007'>November 2007</a></li> <li><a href='http://www.freearticleonline.info/2007/10/' title='October 2007'>October 2007</a></li> <li><a href='http://www.freearticleonline.info/2007/09/' title='September 2007'>September 2007</a></li> </ul> </li> <li id="Blogroll"> <h2>Links</h2> <ul> <li><a href="http://www.articlesfactory.com/">Articles Factory</a></li> <li><a href="http://www.google.com">Google</a></li> </ul> </li> </ul> </div>  </div>   <div style="clear:both;"></div> <div id="footer"> <p>Copyright © 2008 <a href="http://www.freearticleonline.info/">Free Article Online</a> <script type="text/javascript">  </script> <script type="text/javascript" src="http://js.tongji.yahoo.com.cn/0/24/477/ystat.js"></script></p> </div>  <div id="akst_form"> <a href="javascript:void($('akst_form').style.display='none');" class="akst_close">Close</a> <ul class="tabs"> <li id="akst_tab2" class="selected" onclick="akst_share_tab('2');">E-mail</li> <li id="akst_tab1" onclick="akst_share_tab('1');">Social Web</li> </ul> <div class="clear"></div> <div id="akst_email"> <form action="http://www.freearticleonline.info/index.php" method="post"> <fieldset> <legend>E-mail It</legend> <ul> <li> <label for="akst_to">To Addresses (up to 5):</label> <input type="text" id="akst_to" name="akst_to" value="" class="akst_text" /> </li> <li> <label for="akst_name">Your Name:</label> <input type="text" id="akst_name" name="akst_name" value="" class="akst_text" /> </li> <li> <label for="akst_email_field">Your Address:</label> <input type="text" id="akst_email_field" name="akst_email" value="" class="akst_text" /> </li> <li> <input type="submit" name="akst_submit" value="Send It" /> </li> </ul> <input type="hidden" name="akst_action" value="send_mail" /> <input type="hidden" name="akst_post_id" id="akst_post_id" value="" /> </fieldset> </form> </div> <div style="display: none;" id="akst_social"> <ul> <li><a href="#" id="akst_facebook">Facebook</a></li> <li><a href="#" id="akst_digg">Digg</a></li> <li><a href="#" id="akst_stumbleupon">StumbleUpon</a></li> <li><a href="#" id="akst_delicious">del.icio.us</a></li> <li><a href="#" id="akst_reddit">reddit</a></li> <li><a href="#" id="akst_blinklist">BlinkList</a></li> <li><a href="#" id="akst_newsvine">Newsvine</a></li> <li><a href="#" id="akst_furl">Furl</a></li> <li><a href="#" id="akst_tailrank">Tailrank</a></li> <li><a href="#" id="akst_magnolia">Ma.gnolia</a></li> </ul> <div class="clear"></div> </div> <div id="akst_credit"><a href="http://sharethis.com"><img src="http://r.sharethis.com/powered-by?publisher=4e52de6a-4885-4db0-87e9-392af94da8e4" alt="Powered by ShareThis" /></a></div> </div>  </body> </html>