With HTML/XHTML elements, the problem is that the elements do not provide any meaning to the data inside them. By picking up an element you can get the data inside it but you can’t know what the data actually is? Is it a person’s name, age or phone number? So all we do with HTML is present data with some formatting.
There is a problem with the formatting and styling too.
Suppose you were making an article site. Every article has a title, a body and some comments. You want to set a font size of 14 for the title, the text in the body of the article should be justified, and for each comment, you want to put a box around it, and may be italicize the first line of each comment.
Now you have some 1000 articles on your site. On every article you have to set the font size 14 for the article, for each one of them you have to set the body with the paragraph set as justified, and for every comment on each article you would need to set the border by making a single cell table for each comment, and applying the or element to the first line of each comment.
You have written same html formatting elements again and again for each article and for each comment. For every article the formatting elements would be the part of the article page and would download each time at client’s machine.
Now after some time, you decided to change all the styling information of each article, and also the comments. You have to make changes on 1000 pages. Imagine the time and effort required for that.
You are developing some site where you want to give the user the option to choose the color scheme of the site. It would seem like pretty much making a full site for every color scheme that you are giving the user options for. You would definitely decide not to give such option.
CSS
CSS (Cascading Style Sheets) is the solution to all such problems. We extract all the styling information from the html and instead use css to implement all the styling. We make a separate css file, do all the css coding in there and then simply link the css file to all the pages where we wanted to implement that styling. And when comes the time to change, all you need to do is make one change in your css file and all the hundreds or even thousands of pages where that file was linked would be changed.
It would also speed up your subsequent page loading. As a page of your site is viewed on some browser, your page and the css associated with the page would be downloaded to the client machine. When another page of your site is viewed, the styling related to that page is already downloaded so your page now would take less time to load.
Also as the styling is now separate from the text, it means that text and styling are loading kind of separately. This works pretty much like the download managers. They divide the file being downloaded into multiple parts and download them separately, hence the download speeds up. Hence css based pages load faster.
Then there is our user chosen site color scheme. Well with css all you need to do is make one css file based on one color scheme. Once your site is complete, simply make another copy of your css file say you named the original one green.css as you were implementing the green color scheme. Name the copy as may be pink.css. Open the pink.css, simple replace the color values/names. You have a pink color scheme css file. Make as many color schemes as you want. Now when you give the user the option to select some color to choose his/her color scheme while viewing your site, all you need to do is to link the respective color.css file.
There is a problem with the formatting and styling too.
Suppose you were making an article site. Every article has a title, a body and some comments. You want to set a font size of 14 for the title, the text in the body of the article should be justified, and for each comment, you want to put a box around it, and may be italicize the first line of each comment.
Now you have some 1000 articles on your site. On every article you have to set the font size 14 for the article, for each one of them you have to set the body with the paragraph set as justified, and for every comment on each article you would need to set the border by making a single cell table for each comment, and applying the or element to the first line of each comment.
You have written same html formatting elements again and again for each article and for each comment. For every article the formatting elements would be the part of the article page and would download each time at client’s machine.
Now after some time, you decided to change all the styling information of each article, and also the comments. You have to make changes on 1000 pages. Imagine the time and effort required for that.
You are developing some site where you want to give the user the option to choose the color scheme of the site. It would seem like pretty much making a full site for every color scheme that you are giving the user options for. You would definitely decide not to give such option.
CSS
CSS (Cascading Style Sheets) is the solution to all such problems. We extract all the styling information from the html and instead use css to implement all the styling. We make a separate css file, do all the css coding in there and then simply link the css file to all the pages where we wanted to implement that styling. And when comes the time to change, all you need to do is make one change in your css file and all the hundreds or even thousands of pages where that file was linked would be changed.
It would also speed up your subsequent page loading. As a page of your site is viewed on some browser, your page and the css associated with the page would be downloaded to the client machine. When another page of your site is viewed, the styling related to that page is already downloaded so your page now would take less time to load.
Also as the styling is now separate from the text, it means that text and styling are loading kind of separately. This works pretty much like the download managers. They divide the file being downloaded into multiple parts and download them separately, hence the download speeds up. Hence css based pages load faster.
Then there is our user chosen site color scheme. Well with css all you need to do is make one css file based on one color scheme. Once your site is complete, simply make another copy of your css file say you named the original one green.css as you were implementing the green color scheme. Name the copy as may be pink.css. Open the pink.css, simple replace the color values/names. You have a pink color scheme css file. Make as many color schemes as you want. Now when you give the user the option to select some color to choose his/her color scheme while viewing your site, all you need to do is to link the respective color.css file.
No comments:
Post a Comment