Cascading Style Sheets (CSS) The basics
December 3, 2007 – 2:34 pmI guess your wondering what this CSS is all about right? Well it’s no secret that HTML is not a designer’s deam. With CSS (Cascading Style Sheets) we can give HTML a better overall look. Many webmasters today use CSS and many of them use it the wrong way. CSS also helps web designers control the look and feel of a web page. This tutorial is here to make sure you know how to do CSS the right way so that your web site will be top of the line and ready for the future.
CSS can be place in a HTML page in three different ways:
- In the head of a document. This is called embedded.
- In an HTML tag within the body of your document. The name of this is inline.
- In an external document that is then linked or imported into your HTML documents. This is called external.
However there is one thing you must consider when using CSS. CSS is not support in any browser below 4.0 versions of IE and NS. However the NS series starting with 4, the IE series starting with version 3 all support CSS but do not support it fully. This means that some of CSS level 1 is not supported.
When using embedded CSS files be sure to use the @import url(/your/css/file.css); as it will hide the css totally from any browser which does not support this. All Browsers of 5.x and higher support this.
Hide CSS from older browsers:
<head>
<style type=”text/css” media=”all”>
@import url(/your/css/file.css);
</style>
</head>
NEVER PLACE THIS TAG ANYWHERE OTHER THEN THE BROWSER HEADER. PLACING IT ELSE WHERE CAN GIVE YOU BAD RESULTS
Placing an External CSS File.
<head>
<link rel=”stylesheet” href=”your/css/file.css” TYPE=”text/css”>
</head>
Any unsupport CSS may cause bad results in your pages, so only using this if your using any new CSS that is not support in older browsers.
Placing CSS In your HTML file (Inline)
<span style=”color:black;”>More code…</span>
By using this method you can place the “style” element in any html tag after the body tag. This is useful if you want to make a quick change in color or add to a standard CSS class or ID you have alredy set, like so:
<div class=”header” style=”color:red;”>Stuff…</div>
Lets say that the class header had the color set as white. After you place the class, you then set the color as red, so for that class at that moment you change the color, however it will not effect any other of that class any where else in the HTML.
I hope this tutorial was helpfull to you. Please if you have any questions please feel free to post them here.
You must be logged in to post a comment.