WindowsDevCenter.com
oreilly.comSafari Books Online.Conferences.

advertisement


AddThis Social Bookmark Button

Why Do ASP.NET Programmers Need to Learn CSS?

by Dan Hurwitz and Jesse Liberty
05/01/2007

ASP.NET and the HTML it generates is all about specifying the elements on a web page, but historically, ASP.NET has not been great at controlling the layout or even the subtleties of the display of those elements. What we need, of course, is a straightforward way to preserve the structural details that ASP.NET controls provide while gaining precise control over presentation. The answer is Cascading Style Sheets, and this article will argue that ASP.NET programmers who embrace CSS as their own, rather than thinking of it as an esoteric skill of designers, place themselves ahead of the pack.

The Internet was originally invented by academic types (with government support) as an easy and efficient way to exchange scientific research. Content was king; format and presentation were afterthoughts. HTML (HyperText Markup Language) was created by Tim Berners-Lee to facilitate this goal.

Early HTML was all content and structure. The browser supplied all the formatting. For example, consider the small HTML file, Sample.htm, shown in Example 1.

Example 1. Sample.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<pre><code>
<html>
    <head>
        <title>Sample HTML</title>
    </head>
    <body>
        <h1>Page Heading</h1>
        <h2>First Section Heading</h2>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

        <h2>Second Section Heading</h2>
    <h3>Unordered List</h3>
    <ul id="list1">
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
    </ul>
    <h3>Ordered List</h3>
    <ol id="list1">
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
    </ol>

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    </body>
</html>

The page in Example 1 consists of a title, a major heading, two minor headings, some text under each minor heading, and two lists, and it will display as shown in Figure 1 when rendered by Internet Explorer 6 (IE6). A simple page like this will look essentially identical in most browsers, but more complex HTML may look significantly different depending on whether it's running in Internet Explorer, Safari, Firefox, or any of the many available browsers for mobile devices.

Sample HTML
Figure 1. Sample HTML rendered in IE6

The HTML of Example 1 says nothing about how the page it defines is to be displayed. It doesn't specify the font, type size, color, or spacing of any of the elements. The browser controls all of that. Ultimately, the browser decides how the page will look. The author of the page must trust the browser to display the page properly. Or not, as you will see momentarily. But the structure of the page is well specified by the HTML. There is a top-level heading element, <h1>, which contains content that will always, unambiguously, be treated as a top-level heading.

This is a good thing, for many reasons. It means that search engines instructed to look only in page headings will find the page. Page readers, used by the visually impaired, will know to identify this content as a major heading, not body text. But the most important reason to use HTML structure is so that you can globally control the look of all the pages in the web site.

IE displays the top-level heading using a large, bold Times New Roman font or some similar typeface. You could replace the <h1> with the following HTML to get nearly the same effect:

<b><font size=6 color=black face="Times New Roman, Serif">
    Manual Page Heading
</font></b>

You may get away with this for an element typically used only once on a page, but even there, it is very difficult to make sure all the pages in your web site have the same appearance. Also, the font attribute used in this snippet has been deprecated by the W3C, meaning that a page that works fine in today's browser may no longer work correctly in a future browser. So using the predefined structural elements provided by HTML is a good thing.

But leaving the presentation up to the browser sacrifices a level of control that few developers (and no designers) are willing to put up with. And it is boring.

The way to regain control and to spice up your page is with styles.

What Are Styles?

One of my favorite columnists is the Style Man in Bicycling magazine, who, if asked "What is style?", would no doubt reply that if you have to ask, you are probably hopelessly lost style-wise. However, in the world of web development, it is a very reasonable question.

When it comes to web applications, style refers to the appearance of your content. In a perfect world, HTML describes what you want to display (the word "Danger"), and styles describe how to display it (big, bold, and red).

Web applications use styles to ensure attractive and reasonable display on a wide variety of devices, including desktop and laptop computers, tablet PCs, mobile PCs, telephones, PDAs, televisions, printers, audio devices, and media not yet imagined.

Style is an overloaded word. We use it to mean the general look and feel of part of a page, but it is also a keyword used to indicate specific rendering information to the browser. In that sense of the term, a style attribute specifies how an object will be rendered to an output device, typically a browser. Styles are used to manipulate the layout and appearance of controls and text, detailing every aspect of the appearance from border color to font size.

There are many different styles available. There are style attributes for font family, font style (normal, italic, oblique, etc.), size, weight, and decoration (underline, overline, line-through, or blink). You can set the foreground and background colors of page elements, create borders around elements, and specify the amount of blank space that surrounds items. You create space with padding, either as a percentage of the overall size or as a value measured in pixels, inches, centimeters, points, ems, or one of several other somewhat obscure units. And on and on.

Pages: 1, 2, 3, 4

Next Pagearrow