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

Run the application. When the page comes up in the browser, view the rendered source by clicking on the View->Source menu item (in IE).

Notice how the ASP.NET Label and Button controls are rendered to the page in HTML:

<span id="Label1" style="display:inline-block;color:Red;
    font-family:Arial;font-weight:bold;width:150px;">Sample Text</span>
<input type="submit" name="Button1" value="Toggle Color" id="Button1" 
    style="background-color:Yellow;font-family:Arial Narrow;
    font-weight:bold;width:150px;" />

The result is exactly the same as if you had handcoded HTML using inline styles. In fact, when ASP.NET renders a page to the browser, all the ASP.NET controls are converted to straight HTML output with elements and their attributes set to appropriate values. Label controls are rendered as <span> elements, and Buttons are rendered as <input> elements of type submit.

You can also set or change style properties (or any properties of a control, for that matter) programmatically. Our button says Toggle Colors, so obviously we want it to act on the ForeColor property of the Label control.

To see this, double-click on the Button control in the Design view to open up the event handler in the code-behind file for the Click event. Enter the highlighted code from Example 2.

Example 2. Button Click event handler to toggle the Label color

protected void Button1_Click(object sender, EventArgs e)
{
    if (Label1.ForeColor == System.Drawing.Color.Red)
    {
        Label1.ForeColor = System.Drawing.Color.Green;
    }
    else
    {
        Label1.ForeColor = System.Drawing.Color.Red;
    }
}

Again run the application. Every time you click the button, the ForeColor property of the Label will toggle between red and green.

Pros and Cons

Inline properties are excellent for overriding the styles in your external style sheet for a particular control. Unfortunately, they are very easy to use and developers are often seduced into using them to excess, creating markup that is very difficult to maintain.

Document-Level Styles

You can set all the styles for a single HTML page at the top of that page, but this is rarely done in practice and can be hard to maintain, so we will pass over this approach in favor of extensive coverage of the preferred approach: external or cascading style sheets.

The one thing to note about document-level styles is that if you do create styles at the document level, these styles will take precedence over styles created in your cascading style sheets, as noted below.

External Style Sheets

External style sheets are called cascading style sheets because the style specifications cascade down from the most general (the external style sheet) to the more specific (the document-level styles) to the most specific (a style applied to a particular element).

If your style sheet says that text boxes should have a white background, but one particular page says that its text boxes will have gray backgrounds, and on that page the seventh text box has its own style calling for a yellow background, the rules will cascade as you would expect: all the other pages will have text boxes whose background color is white. Our one document will have text boxes with gray backgrounds except for the seventh text box, which will be… you guessed it! Yellow.

For a complete discussion of CSS, see HTML & XHTML: The Definitive Guide, 6th Edition, by Chuck Musciano and Bill Kennedy, or CSS: The Definitive Guide, 3rd Edition, by Eric Meyer, both published by O'Reilly.

In general, the most powerful and easiest to maintain way to apply styles to a web site is with an external cascading style sheet (sometimes just called a style sheet), with an extension of .css. This external style sheet is imported into the page using an HTML <style> element, as shown in  the following snippet:

<head runat="server">
    <style type="text/css">@import url(MyStyleSheet.css);</style>
    <title>My Home Page</title>
</head>

You are not limited to a single style sheet. In fact, you are free to create separate style sheets for different sections of your web site, for example, or for rendering to different devices.

External Style Sheet = Style Sheet = Cascading Style Sheet. All three of these terms refer to the same thing, a file that contains styles that will be "included" into one or more HTML files.

To see a cascading style sheet in action, create a new web site called AspNetStyleSheet. Click on the Website-> Add New Item... menu item and add a Style Sheet. You could use the default name of StyleSheet.css, since we will only be using a single style sheet in this web site, but let's call it CorporateStyleSheet.css.

The default style sheet template looks like the following, with an empty selector for the body element:

body {
}

A selector will affect any element of the named type. For example, if you put <h1> into your style sheet, the styles you attach to that selector will affect every h1 element.

To see this, add the following line to CorporateStyleSheet.css:

h1 {color:red;font-style:italic;font-weight:bold;}

Most of the styles in a style sheet will be declared as style classes, defined with a leading period. A style class is applied to an HTML control using the class attribute.

Style classes are applied to ASP.NET controls using the CssClass attribute, as in the following:

<asp:TextBox ID="txtName" Cssclass="GreenText" runat="server" />
The names used for style classes are case sensitive. If you try assigning the class name greentext to a property of an object in this web site, it will be ignored. There will be no error message.

Example 3 contains the complete contents of MyStyleSheet.css, including both the selectors and the style classes you will use in the example.

Example 3. CorporateStyleSheet.css containing both selectors and style classes

body {
}
h1 {color: red; font-style:italic; font-weight:bold;}
.MyHeading2
{
    font-family:Arial Black, Sans-Serif;
    font-style:normal;
    font-weight:bold;
    font-size:x-large;
    background-color:Aqua;
    color:Blue;
    padding-left:.1in;
    padding-right:.1in;
    line-height:.75in;    
}
.MyHeading3
{
    font-family:Arial Black, Sans-Serif;
    font-style:normal;
    font-weight:bold;
    font-size:large;
    text-decoration:underline;
    color:Black;
}
.BodyText
{
    font-family:Times New Roman, Serif;
    font-style:normal;
    font-weight:bolder;
    font-size:medium;
    color:blue;
}
.WarningText
{
    font-family:Times New Roman, Serif;
    font-style:normal;
    font-weight:bolder;
    font-size:medium;
    color:red;
}

Pages: 1, 2, 3, 4

Next Pagearrow