3.2 Convert HTML to CSS
There is a revolution taking place in web design involving Cascading Style Sheets(CSS). By using HTML pages in conjunction with CSS you can make your web site more accessible. The main browsers now support CSS properly, so this is the time to to convert HTML to CSS.The title of this section is slightly midleading as you cannot fully convert HTML to CSS. They are two different markup languages that are designed to work together. The role of CSS is to define how your HTML will look on the screen, i.e. how it will be presented.
Old-style HTML marked up content and presentation. In its new guise, fully-accessible HTML provides only content-related markup—it has nothing to do with how the content looks. That is, in HTML you say things like 'this is a title'. In CSS you say 'the title uses Ariel 14 point'.
To convert HTML to CSS remove all presentation code from your HTML file and place it in a CSS file. The HTML file then interrogates the CSS file to determine how it should look. The details of CSS as used in working e-commerce sites are given in another ebook in this series. In this ebook CSS is considered in its role of making web sites more usable and accessible. In this context, some of the many advantage of CSS include:
- CSS makes HTML pages more accessible to a wider variety of devices.
- CSS makes it easier to make site wide changes—changing one word in a CSS file can change the appearance of titles in hundreds of HTML pages.
- Because CSS files take code out of HTML pages they are smaller and download faster.
- The separation means CSS and HTML codes are easier to understand than the equivalent code in HTML alone.
- Users can substitute their style sheets to view your content in their style.
- It is easier to write applications to access the style code if it is separated from the content code (and vice versa).
This ebook series is written on the premise that separation of content and presentation is the current main wave in web design. Join this wave and, in your web pages, convert HTML to CSS