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:
<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, which sets the background and foreground color of all <a> elements:
a {
background-color: #ff9;
color: #00f;
}
using an embedded style sheet
You can place style rules for a page between <style type="text/css"> tags inside that page’s head element, like so:
<style type="text/css">
a {
background-color: #ff9;
color: #00f;
}
</style>
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.
using inline style rules
Inline styles allow us to set the styles for a single element using the styleattribute.
For instance, we’d apply the style declarations from our previous example to a specific <a> tag like this:
<a href="/" style="background-color: #ff9; color: #00f;">
Home
</a>
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 <h2>s:
h2 {
color: #369;
}
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:
<p class="pageinfo">
Copyright 2006
</p>
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 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:
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" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.blosums.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.blosums.org/1999/xhtml">
<head runat="server">
<title>
Testing CSS
</title>
<link rel="Stylesheet" type="text/css" href="Styles.css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<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>
</div>
</form>
</body>
</html>
Loading this page should produce the output shown in belowFigure. (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 : CSS at work with ASP.NET
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:
<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, which sets the background and foreground color of all <a> elements:
a {
background-color: #ff9;
color: #00f;
}
using an embedded style sheet
You can place style rules for a page between <style type="text/css"> tags inside that page’s head element, like so:
<style type="text/css">
a {
background-color: #ff9;
color: #00f;
}
</style>
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.
using inline style rules
Inline styles allow us to set the styles for a single element using the styleattribute.
For instance, we’d apply the style declarations from our previous example to a specific <a> tag like this:
<a href="/" style="background-color: #ff9; color: #00f;">
Home
</a>
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 <h2>s:
h2 {
color: #369;
}
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:
<p class="pageinfo">
Copyright 2006
</p>
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 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:
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" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.blosums.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.blosums.org/1999/xhtml">
<head runat="server">
<title>
Testing CSS
</title>
<link rel="Stylesheet" type="text/css" href="Styles.css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<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>
</div>
</form>
</body>
</html>
Loading this page should produce the output shown in belowFigure. (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 : CSS at work with ASP.NET
