Chapter 4: Constructing ASP.NET Web Pages

little attention to the specifics of how particular items appeared in the browser. HTML left it to the individual browsers to work out these intricacies, and tailor the output to the limitations and strengths of users’ machines. While we can change font styles, sizes, colors, and so on using HTML tags, this practice can lead to verbose code and pages that are very hard to restyle at a later date.

CSS gives web developers the power to create one set of styles in a single location, and to apply those styles to all of the pages in our web site. All the pages to which the style sheet is applied will display the same fonts, colors, and sizes, giving the site a consistent feel. Regardless of whether our site contains three pages or 300, when we alter the styles in the style sheet, our changes are immediately applied to all pages that use the style sheet.

Look out for Themes and Skins

ASP.NET 2.0 provides extra value and power to those building reusable visual elements through its offerings of themes and skins. You’ll learn more about these features in Chapter 5.

Types of Styles and Style Sheets

There are three different ways in which we can associate styles to the elements of a particular web page:

using an external style sheet

By placing your style rules in an external style sheet, you can link this one file to any web pages on which you want those styles to be used. This makes updating a web site’s overall look a cakewalk.

To reference an external style sheet from a web form, insert the following markup inside the head element:

<link rel="stylesheet" type="text/css" href="file.css" />

In the above example, file.css would be a text file containing CSS rules, much like the example shown below:

a

{

background: #ff9; color: #00f;

text-decoration: underline;

}

136

Types of Styles and Style Sheets

using an embedded style sheet

You can place style rules for a page within <style type="text/css"> tags inside that page’s head.

<style type="text/css"> a

{

background: #ff9; color: #00f;

text-decoration: underline;

}

</style>

The problem with using these “embedded” styles is that we can’t reuse those styles in another page without having to type them in again, which makes global changes to the site very difficult to manage.

using inline style rules

Inline styles allow us to set styles for a single element using the style attribute. For instance, we might give a paragraph a border, and color it red, with the following markup:

<p style="border-style: groove; color: red;"> Copyright 2006

</p>

When used in embedded or external style sheets, the first part of any style rule must determine the elements to which the rule will apply; we do this using a selector. In ASP.NET, we typically use two types of selectors:

element type selectors

An element type selector targets every single instance of the specified element. For example, if we wanted to change the colour of all level two headers in a document, we’d use an element type selector to target all <h2>s:

h2

{

color: #369;

}

classes

Arguably the most popular way to use styles within your pages is to give each element a class attribute, then target elements that have a certain class value. For example, the following markup shows a paragraph whose class attribute is set to fineprint:

137

Chapter 4: Constructing ASP.NET Web Pages

<p class="fineprint"> Copyright 2006

</p>

Now, given that anything with the class fineprint should be displayed in, well, fine print, we can create a style rule that will reduce the size of the text in this paragraph, and any other element with the attribute class="fineprint":

.fineprint

{

font-family: Arial; font-size: x-small;

}

Whether you’re building external style sheets, embedded style sheets, or inline style rules, style declarations use the same syntax.

Now that you have a basic understanding of some of the fundamental concepts behind CSS, let’s look at the different types of styles that can be used within our ASP.NET applications.

Style Properties

You can modify many different types of properties using style sheets. Here’s a list of the most common property types:

font

This category provides you with the ability to format text level elements, including their font faces, sizes, decorations, weights, colors, etc.

background

This category allows you to customize backgrounds for objects and text. These values give you control over the background, including whether you’d like to use a color or an image for the background, and whether or not you want to repeat a background image.

block

This category allows you to modify the spacing between paragraphs, between lines of text, between words, and between letters.

138

Types of Styles and Style Sheets

box

The box category allows us to customize tables. If you need to modify borders, padding, spacing, and colors on a table, row, or cell, use the elements within this category.

border

This category lets you draw boxes of different colors, styles, and thicknesses around page elements.

list

This category allows you to customize the way ordered and unordered lists are created.

positioning

Modifying positioning allows you to move and position tags and controls freely.

These categories provide an outline of the aspects of a design that can typically be modified using CSS. As we progress through the book, the many types of style properties will become evident.

The CssClass Property

Once you’ve defined a class in a style sheet (be it external or internal), you’ll want to begin to associate that class with elements in your Web Forms. You can associate classes with ASP.NET Web server controls using the CssClass property. In most cases, the value you give the CssClass property will be used as the value of the resulting element’s class attribute.

Let’s see an example. First, create in your Learning folder a file named Styles.css, and copy this code into it:

File: Styles.css

.title

{

font-family: Arial, Helvetica, sans-serif; font-size: 19px

}

.dropdownmenu

{

font-family: Arial; background-color: #0099FF;

}

139

Chapter 4: Constructing ASP.NET Web Pages

.textbox

{

font-family: Arial; background-color: #0099FF; border: 1px solid

}

.button

{

font-family: Arial; background-color: #0099FF; border: 1px solid

}

Then, create a new file named UsingStyles.aspx with this code:

File: UsingStyles.aspx (excerpt)

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

<html>

<head>

<title>Testing CSS</title>

<link href="Styles.css" type="text/css" rel="stylesheet" /> </head>

<body>

<form runat="server">

<p class="title">Please select a product:</p> <p>

<asp:DropDownList id="productsList" CssClass="dropdownmenu" runat="server">

<asp:ListItem Text="Shirt" selected="true" /> <asp:ListItem Text="Hat" />

<asp:Listitem Text="Pants" /> <asp:ListItem Text="Socks" />

</asp:DropDownList>

</p>

<p>

<asp:TextBox id="quantityTextBox" CssClass="textbox" runat="server" />

</p>

<p>

<asp:Button id="addToCartButton" CssClass="button" Text="Add To Cart" runat="server" />

</p>

</form>

</body>

</html>

140