Why We Develop Websites with (x)HTML and CSS
Cascading Style Sheets (CSS) revolutionized website design just a few short years ago. However, this revolution is invisible to the untrained eye. Websites designed without CSS and using tables for visual markup look identical to websites designed with CSS and HTML (or XHTML). So what exactly is the difference, and why do we choose to design websites using CSS?
What Came Before
The Internet and World Wide Web were invented with the intention of rapidly sharing text-based documents among geographically dispersed computers. HTML was developed as the means of standardizing text documents for transmission over the World Wide Web. You can read about the history of the World Wide Web and HTML here. What does all this have to do with CSS?
Since HTML was a text-only language, it could not adapt to the commercial and entertainment focus of the internet without considerable changes. To accomodate images, audio, and video, HTML was updated repeatedly. The resulting complex web pages were difficult to access for those with disabilities, and the code behind the scenes was a mess. Without a visual representation, the words on the page were unrelated, there was no semantic structure. Unfortunately, many websites are still being designed this way today.
Benefits of Using CSS for Website Design
With CSS, we can now create documents that are nearly as meaningful in a pure text format as they are with a full visual representation. CSS separates the visual elements of your document (formatting) from the content. But exactly why does this matter to your business?
- Properly designed HTML with CSS results in less cluttered code (high content to code ratio).
- This means that the page is downloaded more quickly, and that
- web users needing assistive devices can navigate your website more easily (tables for page layout do not transform gracefully).
- It can also have an impact on increased search engine rankings, though I’ve heard this disputed by some Search Engine Optimization experts.
- Redesigning or tweaking the design of a website with semantically structured HTML is easier than redesigning a website designed the old way (with tables for visual presentation).
- Tables break website content apart into rows and columns which means that if the site is to be redesigned with correct code, even the underlying HTML must be completely rewritten.
- A CSS/HTML website with correctly written code will need much less work to reformat the underlying HTML code for a redesign. In fact, your designer should be able to drastically alter the appearance of a CSS/HTML website by editing a single CSS file.
To summarize, the benefits of CSS design with semantic HTML include increase search engine visibility, better accessibility for those with assistive devices, and easier maintenance and redesign of your website.
Is CSS with semantic HTML for you? We think it’s the right choice for every business – from corporation to startup!
Related Reading
Really superb
CSS is very useful when using div id’s to position images, text etc in specific areas within the page. I am pretty new to CSS, having concentrated mainly on Actionscripting. But i have taken to it pretty well, as i find a few similarities between the two.
As someone new to website development, I’ve always wonder what all the hype was with CSS. Now, I know. Thanks for sharing and educating me about this subject.
I loved crossing over from tables to CSS and DIVs. I can’t get my head around how I ever liked working with tables…. o thats right, I didn’t… tables would always shift around when you dont want them too and didn’t really have to capability to create stunning looking websites.
The great thing about CSS also is that in most cases to change the whole look of your site you only need to update the CSS file and BOOM! no need to go into every page and change details!