The first half of this chapter focuses on the use of XHTML and CSS when working in Dreamweaver. Discover why developing in XHTML instead of HTML is a good idea and how to start working in valid XHTML Transitional. Some basics of CSS design are also covered. (From the book ASP.NET Web Development with Macromedia Dreamweaver MX 2004, by Costas Hadjisotiriou, Rachel Andrew and Kevin Marshall, published by Apress, 2004, ISBN: 1590593480.)
Web Standards in Dreamweaver, Part 1 - Authoring Valid CSS (Page 6 of 7 )
CSS allows the separation of content and structure from the presentation. HTML was originally designed as a language to allow creation of easy-to-read, structured documents. Formatting tags were added by the browser companies (notably Netscape) to extend the capabilities of HTML, and many of these later became part of the official specifications. The CSS1 specification covers basic CSS mainly for text styling. This specification is widely implemented across all the main browsers. The CSS2 specification builds on CSS1 and adds support for positioning elements. Although much of this specification is implemented across browsers, you still need to test thoroughly when using it because it is newer and has been implemented slightly differently between browsers.
Why Use CSS?
If you are working to standards (and especially if you want to validate against aStrict DOCTYPE) you will need to replace presentational tags and attributes in your (X)HTML with CSS. This may sound like a lot of extra work, but it brings many benefits.
Separating Document Structure from Presentation
Youwill see this phrase a lot wherever stylesheets are discussed. In practice, it means that all information describing how the document looks is removed from the HTML and put into stylesheet rules. All information that defines the content and document structure remains in the HTML. Elements such as headings (<h1> through to <h6>), paragraphs (<p>), tables for tabular data (<table>), and so on are used to describe the structure and content of the document. Other elements and attributes are typically used to set text colors and fonts, and to position content.
By replacing these presentational HTML elements and attributes with style-sheets, your pages will become smaller and far easier to read and debug.
CSS allows precise control over layout, obviating tag misuse. Screen readers and other technologies interpret the markup by using the HTML tags that are present on the page. If inappropriate markup is used, a person who is blind will find your page confusing because the structure and meaning of your document is not clear.
Modern browsers allow users to override your styles with a user stylesheet. You might not think this is a good idea at first—why would you want users to replace your carefully crafted stylesheet with theirs? But users with low vision can apply a stylesheet that uses large fonts or high contrast, allowing them to interact with your site much more easily.
By using CSS, you can easily change the font size, colors, and even layout of your site simply by changing the stylesheet. Many sites now offer different themes, for example, providing a high-contrast color scheme or large text in order to assist those who would have difficulty reading your site otherwise. One example of this is http://www.zeldman.com. By displaying different stylesheets, designers are not so restricted in their design choices when attempting to make their sites both visually appealing and accessible to people with disabilities or alternative devices. We will return to the issue of displaying different stylesheets later in this chapter.
More Flexibility in Design
Using HTML tags to lay out and style your pages limits the way you resize and position page elements. Using <font size="xx"> allows resizing, but CSS enables you to specify the spacing between words, letters, and lines of text, and to add or reduce the amount of padding around <h1> and other structural tags. CSS2 goes even further, allowing positioning of page elements outside the grid layout made necessary by using tables as a layout tool.
Smaller File Sizes
Moving to CSS allows you to control the appearance of all the elements in your entire site with one stylesheet. More advanced use of CSS can produce effects that previously would have required an image, such as the layering of page elements.
CSS is very browser friendly. If a browser or device does not support CSS, the browser just ignores the stylesheet and renders the content with its default settings. Apart from certain bugs in traditional web browsers (which we will discuss later), using CSS will not render your pages inaccessible to someone who is using an older browser or device that does not support CSS.
Shortening Development Time
Once you have set up a stylesheet for the common elements across your site, adding new pages that are consistent with the rest of the site is simple because any page that has the stylesheet linked will adopt the same styles for headings, paragraphs, borders, and other elements. Should you want to change the font or the color scheme used throughout the site, you need to alter only one stylesheet and the changes will be reflected across the entire site consistently.
This chapter is from ASP.NET Web Development with Macromedia Dreamweaver MX 2004, by Costas Hadjisotiriou (Apress, 2004, ISBN: 1590593480). Check it out at your favorite bookstore today.