A Cascading Style Sheet (CSS) is collection of document styles recognized by HTML. Most Web sites use CSS files to standardize the appearance of related Web pages. This Web site uses one, for example, that defines the H1 style as Red text, using the Times New Roman font. We use it as the title on each page.
Each Visual Basic .NET project has a Cascading Style Sheet file named Styles.css. You can edit the styles in this file by double-clicking the filename in the Solution Explorer window. Here, for example, are two styles defined in the file, Body and H1:
/* Default CSS Stylesheet for a new Web Application project */
BODY
{
BACKGROUND-COLOR: white;
FONT-FAMILY: Verdana, Helvetica, sans-serif;
FONT-SIZE: 0.8em;
FONT-WEIGHT: normal;
LETTER-SPACING: normal;
TEXT-TRANSFORM: none;
WORD-SPACING: normal
}
H1
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 2em;
font-weight: 700;
font-style: normal;
text-decoration: none;
word-spacing: normal;
letter-spacing: normal;
text-transform: none;
}
The BODY style is the default style for all controls and text on a Web form. The H1 style is a Heading level 1 style, perfect for Web form titles. Here's part of the Picnic program's Web form, showing the two styles:
Attaching a Style Sheet to a Web Form
Before working with styles in a particular Web form, you must add a style link to the form:
- Select Document Styles from the Format menu.
- Select the Web form name with the mouse and click the Add Style Link button:
- Select Styles.css in the Contents of Picnic box (right side) and click on OK. This sets up a Style Link from the Web form to the cascading style sheet file:
- Close the Document Styles window. Look at the form's HTML code and find the following entry generated by Visual Studio .NET in the form's HEAD section:
<LINK href="Styles.css" type="text/css" rel="stylesheet">
We could have added this entry directly to the HTML rather than using the Document Styles window.
It is possible to create links to more than one CSS file, and it is also possible to link to a CSS file located anywhere on your machine or network. You can also use a single CSS file to generate styles for an entire set of Web applications.
Modifying Standard HTML Styles
You can modify standard HTML styles by editing their properties in the Styles.css file. Suppose we want to change the H1 style to Times Roman font, in Red:
H1
{
font-family: Times New Roman;
color: Red;
font-weight: 700;
font-style: normal;
text-decoration: none;
word-spacing: normal;
letter-spacing: normal;
text-transform: none;
}
When we save Styles.css, none of the style attributes on the Web form appear to have changed. You must select Refresh from the View menu to see style changes.
Here's the output when the sample program runs, showing the new Heading line:
Using the Style Builder Window
Another way to edit a style in Styles.css is to right-click anywhere inside the style definition and select Build Style. The Style Builder window appears:
As you modify the various style attributes, the builder displays a text sample.
For practice, let's select the Background panel and choose an Aqua background for style H1. We will select the Text panel and center the text horizontally. We then select the Edges panel and specify thin black solid lines around all edges:
The dialog's choices have occasional limitations. For example, we cannot select border lines on just the top and bottom. But we can directly edit the code produced by the dialog:
H1
{
border-right: black thin solid;
border-left: black thin solid;
border-top: black thin solid;
border-bottom: black thin solid;
background-color: aqua;
If we delete the first two entries (border-right and border-left), the resulting header is the following:
Defining Custom Styles
You can add new styles to the Styles.css file and use them in your programs. Your style names must begin with a period. Here, for example, is a style named .personName, which consists of capitalized text (initial caps), bold font-weight, and font-size = .9em:
.personName
{
TEXT-TRANSFORM: capitalize;
FONT-WEIGHT: bold;
FONT-SIZE: .9em
}
To use this style, we must add a Web control to the form that supports style classes. Let's add a TextBox control to the form and set its CssClass property to personName. Note that we drop the initial period from the style name. When the program runs and the user enters a name using only lowercase letters, the Web browser automatically capitalizes the first character of each word:
Needless to say, if we wanted to perform a capitalizing operation using program code (JavaScript perhaps), we would have to do a lot of work!
Let's create a style named label that shows bold white text on a blue background, using font size .8em:
.label
{
color:White;
BACKGROUND-COLOR: blue;
FONT-WEIGHT: bold;
FONT-SIZE: .8em;
}
When we set the CssClass property to label in three Label controls, this is the result:
Next, let's define a style named .numberEntry that right-justifies text in a bold .9em font:
.numberEntry
{
FONT-SIZE: .9em;
FONT-WEIGHT: bold;
text-align:right
}
If we apply this style to the third TextBox control on the form, the user's input is automatically right-justified:
Summary
You can define any number of styles, using all the possible combinations of attributes. Numerous HTML books describe the possible HTML styles. Visual Studio .NET's Intellsense feature helps you select from lists every step of the way. If you define a new style and press the Tab key, a list of possible attributes appears in a scrolling window:
Suppose we select the font-style attribute from this list. After typing a colon (:), a new list appears with the possible values you can assign to font-style:
The possibilities are endless. Have fun! Download a copy of the sample program.