Build Your Own ASP.NET 2.0 Web Site Using C# & VB, Second Edition

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

Chapter 4: Constructing ASP.NET Web Pages

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 attrib-

ute. 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 se-

lector. 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

Types of Styles and Style Sheets

<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, in-

cluding 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

Chapter 4: Constructing ASP.NET Web Pages