CSS; Weight loss for your code
One of the main drawbacks of traditional HTML web design is the tendency to produce almost insupportably large file sizes with anything but the simplest of page designs since formatting requires a substantial amount of code per component unless a rather plain 'default look' is to be retained.
Although there are a number of contributing factors, the burden of responsibility can largely be placed on the shoulders of font and other style tags which have to be added to every text element if an aesthetically pleasing result is to be achieved.
With web sites becoming more complex in their structure and appearance, this led to ever increasing document sizes as the years went on until the sheer amount of code required for presentation far outweighed the text contained within the page leading to slow loading times, a serious headache for search engine spiders and the coining of the phrase ' code to content ratio '.
Help became available to designers in the shape of CSS (Cascading Style Sheets).
Originally conceived in 1994 to provide an effective means for designers to control the appearance of their web pages, CSS became a W3C recommendation in 1998 and has been gradually gaining popularity within the web design community since about 2003.
By removing bulky text formatting code from HTML documents and placing it in a central data file which controls the appearance of the entire web site, CSS not only provides a means of achieving a more uniform overall appearance, it also serves to substantially reduce the size of each individual HTML document.
For example; to display text in a certain font, colour and in bold would require the following HTML code:
Note that < > brackets have been replaced with [ ] brackets to display the code correctly:
[font color="#0000FF" face="Arial, Helvetica, sans-serif"][strong]Example Text[/strong][/font]
Lots of code for very little content, as you can see.
With CSS controlled design however, the text can be displayed in the same manner with the use of a span tag controlled by the Style Sheet:
[span class="C1"]Example Text[/span]
Same end result, half the code .
If you repeat this process fifty or sixty times within a single page your code will be much more lightweight and easily indexed by search engines (if it is also W3C compliant).
Those of you not yet making use of Cascading Style Sheets to reduce the flab in your HTML would be well advised to read up on the technique.
Further information about CSS can be found at the W3Schools CSS Tutorial .
Recent article: CSS Articles
CSS Content? Using tables within the content of your page is a major no-no, the whole intent and purpose of CSS is to control the style of your page elements, this is done using an external stylesheet.
An external Stylesheet? External stylesheets give you the control of your whole website from one single file rather than trying to edit your whole websites CSS using global search and replace or by opening each page individually.
If you are new to this HTML malarkey then welcome, you have just embarked upon a new learning curve that does not take too long to master. Before the invention of CSS everything within a webpage used to be designed using tables.
Indeed there are still a lot of html editors out there that still use tables to format a pages content, one strong word of advice, get rid of that software and start again. Tables are not extinct within webpages but they should only be used for the purpose of presenting data.
Beginning CSS? I am not going to use this article to give you a whole list of tags and how to apply them, that information would be too easily ignored. There are thousands of well rounded websites available on the net today that can walk you through the first stages of CSS, the one I would recommend would be: W3Schools CSS intro this is a perfect place to start learning CSS, in the interests of parity and fairness I will also recommend What can be achieved using CSS .
- HR Question & Answer (407)
- Most Visited Question (77130)
- Technical IT Question (7,000)
- Competitive Exam Question
IT Companies Placement Papers - Live Interview Video Samples
- Top IT Companies Directory
- Sample of IT Companies Interview
- Latest Package of Top IT Companies
- Resume (CV) Sample
- Call Center Question & Answer
- IT Jobs
-
Articles Categories
- Advertising Articles
- Software Articles for Beginners
- Software Process and Project Management
- Business Solutions with Softwares
- Computer Networking and Security
- Internet Marketing
- Search Engine Optimization
- Software Utilities
- Application Software
- Software Learning
- Web Designing Articles
- Programming Articles
- PhotoShop Articles
- SE Positioning Articles
- Site Security Articles
- Technology Articles
- Traffic Analysis Articles
- Multimedias Articles
- Education Articles
- Link Popularity Articles
- Online Promotion Articles
- Content Writing Articles
- LinkBuilding Articles
- Webmasters Articles
- E-Bussiness Articles
- Careers Articles
- Computers Articles
- Copywriting Articles
- HTML Articles
- CSS Articles
- DHTML Articles
- Javascript Articles
- RSS Articles
All Information about Interview. Tips and Guideline. www.interviewGHOST.com
What Users Asked:
Advertisement Area :