SEO Packages

Introduction To Cascading Style Sheets

October 29, 2011EditorCSS, Web DesignComments Off

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 /> <style> h1 { color: #636594; font-family: Verdana; size: 18pt; } </style> <p> </head> <body><br /> <h1>This is one big H1 tag!</h1> <p> </body> </html> </p> <p>When you fire up your browser, you should see the text “This is 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 a pretty standard HTML header. The page starts with the <html> tag followed by the <head> tag. Next, we use a standard <title> 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 our<br /> <style> tag, its contents, and then the closing </style> <p> tag.</p> <style> h1 { color: #636594; font-family: Verdana; size: 18pt; } </style> <p>When you add the style sheet code inline (as part of the HTML document), it must be bound by<br /> <style> and </style> <p> tags respectively. Our example is working with the<br /> <h1> tag. We are changing three attributes of the<br /> <h1>‘s style: the text color (color), the font that any<br /> <h1> tags on the page will be displayed in (font-family), and lastly, the size of the font (size). </p> <p>The code between the { and } are known as the attributes. Our sample code has three. Try changing the hexadecimal value of the color attribute to #A00808 and then save and refresh the page. You should see the same text, just coloured red instead of blue.</p> <p>————————————— An example of an external style sheet —————————————</p> <p>External style sheets are similar to internal style sheets, however, they are stripped of the<br /> <style> and </style> <p> tags, 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 code into it:</p> <p>h1 { color: #a00808; font-family: Verdana; size: 18pt } </p> <p>Next, create a HTML file and name it external.html. Enter the following code into external.html:</p> <p><html> <head> <title> External Style Sheet Reference Example < itle> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <body><br /> <h1>This is one big H1 tag!</h1> <p> </body> </html> </p> <p>As mentioned above, you can see that the actual code in mystyle.css is exactly the same as it was in the inline example. In our HTML file, we simply place a <link> tag in the <head> section of our page. The rel=”stylesheet” attribute tells the browser that the link to the external file is a style sheet. The type=”text/css” attribute tells the browser that mystyle.css is a text file containing css (cascading style sheet) declarations. Lastly, the href=”mystyle.css” attribute tells the browser that the actual file we want to load is mystyle.css. </p> <p>————————————— Conclusion —————————————</p> <p>Well, there you have it, a quick look at style sheets and how to implement both an inline and external version. Checkout the links below if you’ve never worked with cascading style sheets before. You will be surprised at some of the things you can do with them! </p> <p>- <a target='_blank' href="" target="_blank"></a> – <a target='_blank' href="" target="_blank"></a> – <a target='_blank' href="" target="_blank"></a> – <a target='_blank' href="" target="_blank"></a> </i></font> </p> <style>#socialbuttonnav li{list-style:none;overflow:hidden;margin:0 auto;background:none;overflow:hidden;width:62px; height:70px; line-height:10px; margin-right:1px; float:left; text-align:center;}</style> <ul id="socialbuttonnav"> <li><!-- Facebook like--><iframe src="//" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:44px; height:90px;" allowTransparency="true"></iframe></li> <li><!-- Google plus one--><g:plusone size="tall" count="true"></g:plusone></li> <li><!-- Twitter--><a name="twitter_share" data-count="vertical" href="" target="_blank" class="twitter-share-button" >Tweet</a></li> <li><!-- linkedin--> <div><script type="in/share" data-counter="top"></script></div> </li> <li><!-- stumbleupon--> <div><script src=""></script></div> </li> <li><!-- Pinterest like--> <a href="" class="pin-it-button" count-layout="vertical">Pin It</a></li> </ul> <div id="wpcr_respond_1"></div> </div> <!-- .entry --> <div class="entry clearfix"> <h4 class="single_headings">Related Posts</h4><ul class="related_list clearfix"> <li><a href="" title="Permanent link to Common Mistakes to Avoid During Designing a Website for Your Business" rel="bookmark">Common Mistakes to Avoid During Designing a Website for Your Business</a></li> <li><a href="" title="Permanent link to Create a Form with HTML" rel="bookmark">Create a Form with HTML</a></li> <li><a href="" title="Permanent link to Creating Tables in Html" rel="bookmark">Creating Tables in Html</a></li> <li><a href="" title="Permanent link to HTML Coded Character Set" rel="bookmark">HTML Coded Character Set</a></li> </ul></div><div id="comments" class="entry"> <p class="nocomments">Comments are closed.</p> </div><!-- #comments --> <div class="pagination"> <div class="prev"><a href="" rel="prev"><span class="meta-nav">←</span> Previous Post</a></div> <div class="next"><a href="" rel="next">Next post<span class="meta-nav">→</span></a></div> </div><!-- .pagination --> </div><!-- .content --> <div class="sidebar"> <div class="widgetwrap"><h5>Categories</h5> <ul> <li class="cat-item cat-item-5"><a href="" >Business</a> (8) <ul class='children'> <li class="cat-item cat-item-6"><a href="" >Leasing & Finance</a> (4) </li> </ul> </li> <li class="cat-item cat-item-34"><a href="" >Featured</a> (27) </li> <li class="cat-item cat-item-21"><a href="" >Internet Services</a> (11) <ul class='children'> <li class="cat-item cat-item-23"><a href="" >Domains/DNS</a> (1) </li> <li class="cat-item cat-item-22"><a href="" >Hosting</a> (9) </li> </ul> </li> <li class="cat-item cat-item-1"><a href="" >Press Releases</a> (26) </li> <li class="cat-item cat-item-24"><a href="" >Promotion & Marketing</a> (32) <ul class='children'> <li class="cat-item cat-item-25"><a href="" >Affiliate Marketing</a> (3) </li> <li class="cat-item cat-item-26"><a href="" >Search Engine Optimization</a> (17) </li> </ul> </li> <li class="cat-item cat-item-33"><a href="" >Server Hardware</a> (7) </li> <li class="cat-item cat-item-29"><a href="" >Social Websites</a> (11) <ul class='children'> <li class="cat-item cat-item-30"><a href="" >Facebook</a> (3) </li> </ul> </li> <li class="cat-item cat-item-7"><a href="" >Web Design</a> (45) <ul class='children'> <li class="cat-item cat-item-8"><a href="" >CSS</a> (8) </li> <li class="cat-item cat-item-9"><a href="" >HTML</a> (8) </li> </ul> </li> <li class="cat-item cat-item-11"><a href="" >Web Design Tools</a> (30) <ul class='children'> <li class="cat-item cat-item-15"><a href="" >Flash</a> (5) </li> <li class="cat-item cat-item-14"><a href="" >Photoshop</a> (25) </li> </ul> </li> <li class="cat-item cat-item-16"><a href="" >Web Development</a> (48) <ul class='children'> <li class="cat-item cat-item-19"><a href="" >ASP.Net</a> (2) </li> <li class="cat-item cat-item-17"><a href="" >Blogging</a> (11) </li> <li class="cat-item cat-item-20"><a href="" >MySQL</a> (1) </li> <li class="cat-item cat-item-18"><a href="" >PHP</a> (10) </li> </ul> </li> </ul> </div><div class="widgetwrap"> <div class="textwidget"><script type="text/javascript"><!-- google_ad_client = "ca-pub-6784385990585718"; /* 250 */ google_ad_slot = "7769714495"; google_ad_width = 250; google_ad_height = 250; //--> </script> <script type="text/javascript" src=""> </script></div> </div> </div><!-- .sidebar --> </div><!-- .primary_wrap --> </div><!-- .primary --> <div class="footer"> <div class="footer_wrap clearfix"> <div class="notes_left">©Designer's Playground</div><!-- .notes_left --> <a class="top" href="#" title="Scroll to top">Top ↑</a> <div class="notes_right">A site by <a href="" rel="nofollow" target="_blank"></a>.</div><!-- .notes_right --> </div><!-- .footer_wrap --> </div><!-- .footer --> <script type="text/javascript" src=""></script> <script src="" type="text/javascript"></script> <!--[if IE]> <script language=javascript> //<![CDATA[ if (screen_res=="") { screen_res = screen.width + " x " + screen.height; } if (screen_res!=" x ") { var cdate = new Date(); cdate.setTime(cdate.getTime()+(48*60*60*1000)); var cexpires = cdate.toGMTString(); //var the_cookie = "wassup_screen_res="+escape(screen_res)+"; expires="+cexpires; document.cookie = "wassup_screen_res=" + escape(screen_res)+ "; path=/; domain=" + document.domain; } //]]> </script> <![endif]--><!-- <p class="small"> WassUp 1.8.6 timestamp: 2015-11-30 06:11:27AM UTC (01:11AM)<br /> If above timestamp is not current time, this page is cached.</p> --> <script type='text/javascript'> /* <![CDATA[ */ var SlimStatParams = {"ajaxurl":"http:\/\/\/pr\/wp-admin\/admin-ajax.php","ci":"YTo0OntzOjEyOiJjb250ZW50X3R5cGUiO3M6NDoicG9zdCI7czo4OiJjYXRlZ29yeSI7czozOiI4LDciO3M6MTA6ImNvbnRlbnRfaWQiO2k6MTA2O3M6NjoiYXV0aG9yIjtzOjY6IkVkaXRvciI7fQ==.13b1888fd20824a95941eec05f7c62ee","outbound_classes_rel_href_to_ignore":"noslimstat,ab-item","outbound_classes_rel_href_to_not_track":"noslimstat,ab-item"}; /* ]]> */ </script> <script type='text/javascript' src=''></script> <script type='text/javascript' src=''></script> </body> </html>