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 </h2>
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.
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
|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