Friday, September 3, 2010

csstutorialz-3: Why CSS or Cascading Style Sheet?

You the people who are already familiar with HTML/XHTML know that we can easily create pages without Style Sheets. So, why we use it? The answer is as follows:
1. If your website has only one page then you don't need CSS and If your website has only five pages then it might be your options to choose CSS or not, but if your website has 100 pages then you must use CSS. Because you r not able to write the same styles or same codes in 100 pages. I think u r not clear that what I want to say.. OK.. lets see the following picture:

1. If you have one page then you can write the style codes and HTML codes in one page. This picture shows it..
Figure: One HTML page with Style Codes

2. But if you have 5 pages then you have two choices. You can use a style sheet or not, but if you use a style sheet then it will be best process to create a website, this reduces the codes and page loads. Look at the following figure.
Figure: Five different HTML page with Style codes

There have 5 pages and also look at the red box of page1. You are writing this box style code in the other five pages, because most of cases your web pages styles are the same in five or more pages. As for example header, main menu or left side menus view are same in all the pages. So, why you write the same code in the all five or more pages?? Your HTML codes are different but your Style Sheet codes are not different. So, if you have 100 pages then will you write 100 same style sheet codes into 100 pages?? And if a change needs in the style sheet then will you change the codes in 100 pages? Is it possible? So, whats the solution? The solution is you need to use a external style sheet. I will show you in the next chapter how can you add a external style sheet but now see the solution in the following figure:

Figure: You have only one Style page and 5 or 100 or unlimited number of HTML pages

Thanks for reading this tutorial. The next tutorial will show you how can you write your first CSS Style and how can you link up your style sheet to the HTML page.

No comments:

Post a Comment