oreilly.comSafari Books Online.Conferences.


AddThis Social Bookmark Button

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

Suppose you don't like the default way the <h2> headings look. In HTML, you can add style attributes directly to the <h2> element to control the way the browser renders it. So for example, you could add the highlighted attributes from the following snippet to the default <h2> to make the heading display in an Arial Black font family, xx-large, with maroon text over an aqua background.

<h2 style="font-family:Arial Black; font-size:xx-large; 
            background-color:Aqua; color:Maroon">
    First Section Heading

This results in the section heading shown in Figure 2.

Figure 2. Results of adding style attributes to an <h2> element

The big problem with this sort of implementation is that you must add the exact same attributes to every element that should have the same appearance. Also, you must specify the style for every element essentially from scratch. There is an easier way: Cascading Style Sheets (CSS).

Before getting into the nitty-gritty of CSS, there are a few basics to cover.

In all the HTML shown so far, style attributes were added to the HTML tags. Obviously, as ASP.NET programmers, we primarily use ASP.NET controls, and do relatively little direct HTML coding (remembering, of course, that ultimately, all ASP.NET controls are rendered on the browser as HTML). As we will talk about at the end of this article, with CSS replacing HTML tables for layout, we will likely be using even less direct HTML in the future.

ASP.NET controls provide many properties that are exactly analogous to the HTML style attributes, although implemented in a more logical and consistent way. These are rendered to the browser as in-line styles of normal HTML elements (see below), but Visual Studio (and Visual Web Developer) provide a very easy and object-oriented way to deal with them, and they are well supported by IntelliSense.

For example, the Label control shown in Design view of Visual Studio 2005 in Figure 3 will display the same as the <h2> from the previous code snippet.

Figure 3. Label in Design view made to look like the previous <h2>

There are three different levels at which styles can be applied:

  • Inline: The style is implemented as an attribute of a specific HTML element or ASP.NET control.
  • Document: A set of styles is declared on and for an entire HTML page.
  • External: A style sheet is created and "included" in one or more HTML pages. We'll have much more to say about this approach below.

Inline Styles

You can apply styles to a specific HTML element using an inline style attribute, as in the following:

<input type="text" value="Sample text" style="color:Red;font-family:Arial;
        font-weight:bold;width:150px;" />

The style attribute contains one or more style properties, each consisting of a property name and value separated with a colon. Each property-value pair is separated from the next with a semicolon.

Inline style attributes are set for ASP.NET controls using properties of the controls, either declaratively in the markup file, or using the Properties window in Design view. To see this, create a new web site in Visual Studio or Visual Web Developer (VS/VWD). Call it AspNetInlineStyles.

In Design view, drag a Label and a Button control from the Standard section of the Toolbox onto the page. In the Properties window, set the properties displayed in Table 1.

Table 1. Properties to set in the Properties window

Control Property Value
Label1 Font-Bold True
Font-Name Arial
ForeColor Red
Text Sample Text
Width 150px
Button1 Font-Bold True
Font-Name Arial Narrow
BackColor Yellow
Text Toggle Colors
Width 150px

Once you've entered the values in the table, your property should look something like the one shown in Figure 4. When you set the Font-Name property, VS/VWD automatically fills in the Names property for you.

Figure 4. ASP.NET controls in Design view showing style properties

Pages: 1, 2, 3, 4

Next Pagearrow