Build Your Own ASP.NET 3.5 Website Using C# & VB (29 page)
Read Build Your Own ASP.NET 3.5 Website Using C# & VB Online
Authors: Cristian Darie,Zak Ruvalcaba,Wyatt Barnett
Tags: #C♯ (Computer program language), #Active server pages, #Programming Languages, #C#, #Web Page Design, #Computers, #Web site development, #internet programming, #General, #C? (Computer program language), #Internet, #Visual BASIC, #Microsoft Visual BASIC, #Application Development, #Microsoft .NET Framework
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 of 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 the pages that use that style sheet.
Look Out for Themes and Skins
ASP.NET provides extra value and power to those building reusable visual elements through offerings like themes and skins. You’ll learn more about these features in
Chapter 5.
Licensed to [email protected]
Constructing ASP.NET Web Pages
149
Types of Styles and Style Sheets
There are three ways in which you can associate styles with the elements of a particular web page:
using an external style sheet
If you place your
style rules
in an external style sheet, you can link this file to
any web page on which you want those styles to be used, which makes updating
a web site’s overall appearance a cakewalk.
To reference an external style sheet from a web form, place the following markup
inside the head element:
In the above example,
file.css
would be a text file containing CSS rules, much
like the example shown below, which sets the background and foreground color
of all elements:
a {
background-color: #ff9;
color: #00f;
}
using an embedded style sheet
You can place style rules for a page between
The problem with using embedded styles is that we can’t reuse those styles in
another page without typing them in again—an approach that makes global
changes to the site very difficult to manage.
Licensed to [email protected]
150
Build Your Own ASP.NET 3.5 Web Site Using C# & VB
using inline style rules
Inline styles allow us to set the styles for a single element using the style attribute. For instance, we’d apply the style declarations from our previous example to a specific tag like this:
Home
When it’s used in embedded or external style sheets, a style rule has a selector,
followed by a declaration block that contains one or more style declarations. Consider
this example:
a {
background-color: #ff9;
color: #00f;
}
Here we have a style rule with a selector, a, followed by a declaration block that
contains two style declarations: one for the background-color property, and one
for the color property. A declaration block is delimited by curly braces: {…}. A style
declaration consists of a property, a colon (:) and a value. Multiple declarations are
delimited by semicolons (;), but it’s a good practice to put a semicolon at the end
of all your declarations.
The
selector
in a style rule determines the elements to which that rule will apply.
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 second-level headings in
a document, we’d use an element type selector to target all s:
h2
{
color: #369;
}
Licensed to [email protected]
Constructing ASP.NET Web Pages
151
class selectors
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 pageinfo:
>
Copyright 2006
Now, given that any element with the class pageinfo should be displayed in
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="pageinfo", using
a class selector. The class selector consists of a dot (.) and the class name:
.pageinfo
{
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 specify many different types of properties within style sheets. Here’s a list
of the most common property types:
font
This category of properties gives you the ability to format text-level elements,
including their font faces, sizes, decorations, weights, colors, and so on.
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
Licensed to [email protected]
152
Build Your Own ASP.NET 3.5 Web Site Using C# & VB
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.
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 borders of different colors, styles, and thicknesses
around page elements.
list
This category allows you to customize the way ordered and unordered lists are
displayed.
positioning
Modifying positioning allows you to move and position tags and controls freely.
These categories outline the aspects of a page 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, use the
Style Sheet
template to create within your
working folder (
LearningASP\VB
or
LearningASP\CS
) a file named
Styles.css
. You’ll notice that Visual Web Developer adds an empty style rule to the newly created
style sheet file with the selector body. We don’t need that rule for this example, so
just insert this code after it:
Licensed to [email protected]
Constructing ASP.NET Web Pages
153
Styles.css
body {
}
.title {
font-family: Arial, Helvetica, sans-serif;
font-size: 19px;
}
.dropdownmenu {
font-family: Arial;
background-color: #0099FF;
}
.textbox {
font-family: Arial;
background-color: #0099FF;
border: 1px solid
}
.button {
font-family: Arial;
background-color: #0099FF;
border: 1px solid
}
Then, create a new web form named
UsingStyles.aspx
, containing this code:
Visual Basic
LearningASP\VB\UsingStyles.aspx
<%@ Page Language="VB" %>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Loading this page should produce the output shown in
Figure 4.16
. (We know it doesn’t look great—we’re programmers, not designers—and it shows! But as far as
you understand the principles of using CSS with ASP.NET, you’ve successfully met
the goal of this exercise.)
Figure 4.16. CSS at work with ASP.NET
Licensed to [email protected]
Constructing ASP.NET Web Pages
155
In the next chapter, we’ll learn to use Visual Web Developer to create CSS definitions
through a simple visual interface.
Summary
In this chapter, we discussed web forms, HTML server controls, web server controls,
web user controls, master pages, and CSS. All these elements can be combined to
create powerful structures for your web sites.
In the next chapter, we’ll start building “real” web applications, putting into practice
most of the theory you’ve learned so far, and using a professional development environment that will do part of the work for you. Licensed to [email protected]
Licensed to [email protected]
Chapter5
Building Web Applications
In the previous chapters, we discussed the different pieces of ASP.NET in some
detail. In this chapter, you’ll start putting together everything you’ve learned in a
larger context. That’s right: it’s time to build your own web application!
Microsoft defines a
web application
as the collection of all files, pages, handlers,
modules, and executable code that can be invoked or run within a given directory
on a web server. As we embark on developing a web application, we’ll continue
using Visual Web Developer 2008 Express Edition, and you’ll explore more of the
useful features it has in store for ASP.NET developers.
It’s worth keeping in mind that you don’t have to use Visual Web Developer, or any
other specialized tool, to develop ASP.NET web applications: any old text editor
will do. However, we recommend using Visual Web Developer for any real-world
project that’s more complex than a simple, “Hello World”-type example, because
this tool can do a lot of the work for you as you build web applications.
In this chapter, you’ll learn about much of the functionality Visual Web Developer
offers as we start to create an intranet for a company called Dorknozzle. Along the
way, we’ll also explore many interesting ASP.NET features:
Licensed to [email protected]
158
Build Your Own ASP.NET 3.5 Web Site Using C# & VB
■ We’ll use Visual Web Developer to create a new Web Application.
■ We’ll work with
Web.config
,
Global.asax
, and the special ASP.NET folders.
■ We’ll use the application state, user sessions, the application cache, and cookies.
■ We’ll debug your project and handle potential coding errors.