WindowsDevCenter.com
oreilly.comSafari Books Online.Conferences.

advertisement


AddThis Social Bookmark Button

Why Do ASP.NET Programmers Need to Learn CSS?
Pages: 1, 2, 3, 4

For attributes requiring a length, such as padding and line-height, allowable units are listed in Table 2. Relative units are relative to the other content on the page.

Table 2. Style length units

Unit Abbreviation Type
Width of lowercase M em Relative
Height of letter x ex Relative
Pixels px Absolute
Inches in Absolute
Centimeters cm Absolute
Millimeters mm Absolute
Points (1/72 inch) pt Absolute
Picas (12 points, or 1/6 inch) pc Absolute
Percentage % Percentage

Also, any length property can be prepended with either a plus (+) or minus(-) sign to indicate that the value is to be added or subtracted, respectively, from the current value of the property.

Percentage units are defined for each different property. Depending on the type of control, it might be relative to the element's font size, or perhaps the total space available to the element.

While in Source view for the page, add the following <h1> to demonstrate how your h1 selector works.

<h1> Heading 1</h1>

Next, follow these steps:

  1. Switch to Design view. Type some text on the page.
  2. Then drag a Label control onto the page. Set the Text property to Heading 2 and the CssClass property to MyHeading2. Type some text on the page.
  3. Drag a second Label on the page. Set the Text property to Heading 3 and the CssClass property to MyHeading3. Type some text on the page.
  4. Add two more Label controls with the CssClass set to MyHeading2 and MyHeading3, along with some text.
  5. To format the text under the two MyHeading3 headings, switch to Source view and insert some <div> or <span> elements so that you can apply the BodyText style.
  6. Finally, add one more <div> element with the class attribute set to TextWarning.

The Design view should look something like Figure 5.

ExternalStylesInDesignView
Figure 5. AspNetStyleSheet in design view

The Source view will look something like Example 4, except the highlighted line of code will not yet be present--you must add it manually.

You saw this line previously in a code snippet; it imports the style sheet. It uses the @import command to import the style sheet specified in the URL. In this case, a relative URL is provided and refers to our style sheet in the current directory. Since it is a URL, it can be either relative or absolute. For example, you could provide an absolute URL such as http://CorporateWebSite.com/stylesheets/handhelds.css.

The @import command must appear in the <head> element, and before any conventional style rules are specified. Otherwise, the imported style sheet will be ignored. This allows the browser to properly cascade styles from the external style sheet down to the document-level styles.

Example 4. Default.apx for AspNetStyleSheet

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>ASP.NET Style Sheets</title>
    <style type="text/css">@import url(CorporateStyleSheet.css);</style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h1> Heading 1</h1>
        This is some text.
        <br />
        <asp:Label ID="Label2" runat="server" CssClass="MyHeading2" 
            Text="Heading 2"></asp:Label>
        <br />
        Some more text.
        <br />
        <asp:Label ID="Label3" runat="server" CssClass="MyHeading3" 
            Text="Heading 3"></asp:Label>
        <div class="BodyText">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
        <asp:Label ID="Label4" runat="server" CssClass="MyHeading2" 
            Text="Another Heading 2"></asp:Label>
        <br />
        <asp:Label ID="Label5" runat="server" CssClass="MyHeading3" 
            Text="Another Heading 3"></asp:Label>
        <br />
        <span class="BodyText">
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
            nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
            reprehenderit in voluptate velit esse cillum dolore eu fugiat 
            nulla pariatur.
        </span>
        <div class="WarningText">Warning: Viewing raw or undercooked web pages can 
                    be harmful to your cosmic karma.
        </div>
    </div>
    </form>
</body>
</html>

The resulting page is shown in Figure 6.

ExternalStyles
Figure 6. External styles in action

Layout with Style Sheets

This article has focused exclusively on using style sheets to apply styles to specific elements on the page. Many web page developers use HTML tables to control the layout (or positioning) of their controls on the page. This is because using inline absolute positioning is ugly and very difficult to maintain.

Using HTML tables for layout is relatively straightforward and very easy for most people to visualize and implement. The problem is that to get precise layout, you often have to embed tables within tables, and soon the HTML becomes confusing and difficult to maintain. Also, and perhaps more crucially, using tables for layout can produce maintenance nightmares, especially if you need to change the layout on a large site with many, many pages. (Note also that there is a bit of a performance penalty on pages with deeply nested tables, but as the Internet gets faster thanks to DSL and FIOS, this is less of an issue.)

To address these concerns, CSS comes galloping to the rescue, or so many web developers would have you believe. There is not space in this article to do justice to using CSS for layout, so we will tackle this issue in a future article. In the meantime, for a taste of what can be accomplished using CSS, we recommend a relaxing visit to the CSS Zen Garden website.

Dan Hurwitz is the president of Sterling Solutions, Inc., where for nearly two decades he has been providing contract programming and database development to a wide variety of clients.

Jesse Liberty is a senior program manager for Microsoft Silverlight where he is responsible for the creation of tutorials, videos and other content to facilitate the learning and use of Silverlight. Jesse is well known in the industry in part because of his many bestselling books, including O'Reilly Media's Programming .NET 3.5, Programming C# 3.0, Learning ASP.NET with AJAX and the soon to be published Programming Silverlight.


Return to Windows DevCenter.