A central philosophy of Cascading Style Sheets (CSS) is “separation of content and presentation.” In other words, you build, maintain, and store the core content of your web page, web site, or application (the text, related images, forms, and so forth) separately from the visual presentation (such as the layout, typography, and decorative images).
HTML = CONTENT
CSS = PRESENTATION
This is the magical key to unlocking better web pages. If you apply this rule when building web pages then you’re already halfway toward achieving web standards and the benefits that come with them. By separating the two layers of your document, you make it simple to add, remove, or update content without having to worry about botching up your layout. You also make it easy to change the font used for the entire site without having to dig through your content in search of every single tag. Separating the two layers allows a web team to work efficiently; your visual designers can focus on design while your content producers focus on content—and neither has to worry about the other getting in their way. If you’re a solo developer, you’ll find that the separation of content and presentation allows you to keep your “frames of mind” separate as well. When you need to make a change to content, you won’t have to dig through a bunch of style code to find what you’re looking for.
The main advantages of using CSS / XHTML are presented below:
Centralized control of presentation: Using CSS allows a single, or multiple, global file(s) to apply presentation to all web pages across a site. Separating out the presentation from the HTML in this way makes it much easier and quicker to make site-wide presentational changes, resulting in a more consistent design than a situation in which you have to change every web page individually. In addition, separating the two layers makes it possible to do an entire site redesign without touching the content at all—you only need to create a new CSS style sheet. By using external style sheets, separate from your HTML structure, you can make all modifications to the visual presentation of the site by editing just one file rather than the numerous files (possibly numbering in the hundreds!) that make up your content.
Search engine optimization: Search engines love web standards. They used to love metadata (data about the web page explicitly written into it by the author) but this subjective tagging was easy to exploit and led to search results that weren’t necessarily that relevant. Now search engines are much more sophisticated and use more advanced techniques to rate the relevancy of a page to a search query. They tend to analyze the content itself and take special interest in things such as headings and even how close relevant content is to the top of the page. So if you’re using font tags to make text look like headings instead of h1s and h2s or if you’ve got all of that table mess surrounding more table mess surrounding the content, then you’re not doing yourself any favors.
Fastloading Lightweight pages: Pages are much lighter (smaller in size) and therefore download faster, because your content only needs minimal structural markup. We can now replace all of the presentational markup we used to load onto the tags in every page of a site with a single style sheet. As you will see, a single style sheet can define the presentation of an entire site and the user only needs to download it once. Lighter pages mean decreases in bandwidth (reducing hosting costs) and web page loading time.
Forward compatibility: Thanks to the increased likelihood of cross-compatibility, web pages will be more likely to work as desired on future browsers than they would be if they depended on the nonstandard proprietary oddities of current browsers.
Device independence: You might think that to properly accommodate multiple devices you would need multiple versions of web pages. But you don’t, not with web standards. By separating structure and presentation, the same content can be displayed differently depending on the device.
Accessibility: Web standards enable us to reach the highest possible number of browsers and devices. Content can be easily read in any browser, phone, PDA, or by those using assistive software. Making it easier for users with disabilities to access web pages satisfies a moral duty, opens up your website to a wider market, and helps it to comply with antidiscrimination laws. A large proportion of web accessibility issues are technical and are tackled by using good web-standard HTML and CSS.
Reduced markup: Less code means faster pages. Less code also means more server capacity, which in turn means less money needed for server space and bandwidth.
All browsers compability: With a little effort, you can have your pages degrade nicely in older browsers, so all users get the best experience possible with their available technology.