CSS Cascading Style Sheets - What is CSS and how to use it CSS Cascading Style Sheets
What is CSS and How to Use It



September 18th, 2008:

CSS Cascading Style Sheet

CSS stands for "Cascading Style Sheets" and is an additional feature to HTML. With CSS users are able to add more defined information to their HTML documents and thus add more control over the design and functionality of their websites. CSS can be placed in the HTML document itself, or in a separate file. If CSS instructions are specified in a separate file, which is highly recommended, this file must have the extension .css for Cascading Style Sheets. (for example: styles.css). This .css file is usually located in the root of your website's directory. In order to make the CSS file functional, the following code must be added to the head of each HTML page within your site:

<link rel="stylesheet" type="text/css" href="styles.css">

This line of code will tell the web browser where to find the CSS file, and to look into the styles.css file for additional information. The .css file defines how various elements like headers, font size and font color, links, and other formatting, like for example tables, appear in your site.

What is The Advantage of CSS - Cascading Style Sheets?

Some webmasters and web designers might share the opinion that with CSS it is still necessary to write a lot of code, and in some cases even more than with plain HTML, which might be correct to a certain extend. However, Cascading Style Sheets enable web designers and developers to have more control over particular design functions and add more usability to HTML.
For Example: While with HTML you are just able to specify <H1> <H2> <H3> and so on, which are pre-defined styles and not editable, with CSS you can design the size, font, color, style (and more) of your header any way you please.
Example 1.0: 
h1 
{
      font-size: 18px;
      font-family: verdana;
      color: #ff0000;
      font-style: italic;
}
Where ever you use the <H1> tag in your website, it will appear as specified in the CSS file.

Another Big Advantage of CSS

Should you decide to change the style of your headers, you will only have to make changes in one location, instead of every single HTML document in your website, your .css file!

This applies to your headers, font, background color, as well as tables and many other formatting options. Thus, CSS allows you to keep formatting elements separate from functional elements. This helps keeping your HTML files cleaner and will save you a lot of work, especially with larger websites.

If you have been using a search and replace function to edit code in multiple HTML documents of your website so far, you might have made the experience that you screwed up the code of your entire website, and you find out by coincidence weeks later that the search and replace function did not work on one or more pages in your site. CSS will take care of such hazles.

How to Specify The Body Style: Background Color and Default Font Style

With CSS you can specify the default body style for your entire website in just one single location. The beauty of this is that should you decide at a later point in time to change your default font or your site's background color, you can do so by editing the code in one single file only. Add this to your CSS file: 
body 
{
     background-color: blue ;
     color: red ;
     font-family: verdana
}
This will let your entire website appear in blue with red text and verdana font style.

How to Specify Text Style With CSS

CSS lets you do additional text formatting, which can even make tables become obsolete. Here is an example for CSS specified text formatting: 
.sidetext
{
     font-family: verdana ;
     margin-left: 25px ;
     margin-right: 200px ;
     margin-top: 150px ;
     font-size: 14px ;
     color: blue ;
}

How to Specify Text Style Inside a Table

You might have noticed that your default font style does not apply to text inside a table. Instead of adding unnecessary font tags to your table, here is a much easier way to format text inside a table. Add this to your CSS file and all text on your site within a table or the <td></td> tags will appear as follows without adding additional code to your HTML documents. 
TD 
{
     font-face: verdana ;
     font-size: 12px ;
}

How to Specify Link Style With CSS

CSS gives you the option to additionally format links and add many different link styles to your site. And again, should you decide to change the style of your links in your entire website, all you will need to do is change the formatting in one single location, your CSS file. Here is an example of a CSS link format which lets you define text decoration, font size, font color, font style, the active link style, visited link style, and the hover link style: This goes into your .css file: 
.mainlink { 
     font-weight: bold; 
     font-size: 11px; 
     color: blue; 
     font-family: 
     verdana; 
     text-decoration: none }
	 
.mainlink:active { 
     color: green; 
     text-decoration: none }
	 
.mainlink:visited { 
     color: darkblue; 
     text-decoration: none }
	 
.mainlink:hover { 
     color: green; 
     text-decoration: underline }
You would just need to put this piece of code into the link code of your HTML file: class="mainlink"
For Example: 
<a class="mainlink" href="mainpage.htm">

What is The Disadvantage of Using Cascading Style Sheets?

Older web browsers might have problems reading CSS or cascading style sheets. However, nowadays most people have updated to newer browsers, which are capable of reading CSS. There might be a very small percentage of people still using older browsers, and there are ways to make CSS suitable for those older browsers as well. The future however lies in CSS and sooner or later these old browser versions will disappear.

CSS offers a lot of useful features and saves webmasters and web designers a lot of time and energy. If you are used to writing your websites in plain HTML you might find after this short tutorial that cascading style sheets are very well worth taking a look at. At least it can't hurt being familiar with CSS, and after playing around with it for a while you will not want to miss it anymore.

© This Article is Copyrighted by WebmasterSeminar.com

Please do not copy or reproduce this article in whole or part, in any form, without mentioning the source and including a live link back to WebmasterSeminar.com - Thank You!

LINK TO THIS TUTORIAL:


Copy the code below and paste into your web page 
<a href="http://www.webmasterseminar.com/css.php">
Webmaster Seminar</a><br />
CSS - Cascading Style Sheets

Related Links




CSS Cascading Style Sheet - © WebmasterSeminar 2000 - 2008 Terms Of Use