Beginning ASP.NET 2

Styling with Themes

<form id=”form1” runat=”server”>

<div style=”font-weight:bold; color:red; border-bottom:solid 2pt navy;”> This is a styled “div” tag

</div>

</form>

Notice how Visual Web Developer helps you as you type in the style information (see Figure 5-2).

Figure 5-2

3.Now switch over to Design View and see how your formatting has been applied to the page, as shown in Figure 5-3.

Figure 5-3

139

Chapter 5

4.Notice how the style tag has the style attribute information visible in the properties pane. If you click somewhere within the value for the Style attribute, you’ll notice the ellipsis button (...) next to the style information. Click this button and you will see the Style Builder dialog, shown in Figure 5-4.

Figure 5-4

This dialog comes in very handy when you are styling elements, because you won’t have to remember the individual syntax for each style. All you need to do is select the attributes you want to apply to the element and click OK to apply the style. Go ahead and do that with another page.

5.Create another .aspx page and call it StyledPage1.aspx. In this page, you need to add a simple <div> element with the text “This is highlighted text,” and a Heading 1 (h1) element with the text “This is also highlighted text.”

6.Using the Style Builder dialog (see Figure 5-5), set the style for both elements to use the Trebuchet MS font family, and set them to appear in Navy. This will add the following code to Source View for you automatically:

<div style=”font-family: ‘Trebuchet MS’;Color: Navy;”> This is highlighted text.</div>

<h1 style=”font-family: ‘Trebuchet MS’;Color: Navy;”> This is also highlighted text.</h1>

140

Styling with Themes

Figure 5-5

7.View the page in your browser to see the finished article. It should look similar to Figure 5-6.

Figure 5-6

How It Works

Now it might not look fantastic, but it didn’t take long to change how this element appeared on the page. This technique can then be applied to each element on the site. You can apply many different possible style attributes to a site, and so Appendix E includes some of the most common elements to help you to pick out your favorite styles for a site.

The good news is that having learned to style elements on a page, it’s just a short step to reorganizing your code into using a style sheet. The style attributes on HTML elements use exactly the same syntax as the style syntax used in style sheets, so move on to the next section and tidy up all this style code.

141

Chapter 5

CSS — Cascading Style Sheets

The concept of style sheets has been around for several years now (it was first made a recommendation by the W3C in December 1996), and every well-designed web application will be backed by a well-defined CSS style sheet that defines a specific look and feel for the site. Using a style sheet, you are able to define how every type of element on a page will appear, and you can also create definitions for specific styles that you can pick and choose from to apply to specific elements on a page. For example, you can specify that every instance of a <div> tag should contain navy text, or you can define a style class called HighlightedText that you can apply to any <div>, or other similar element, on a page. Here’s a section from a style sheet that defines these styles:

div

{

font-family: ‘Trebuchet MS’; Color: Navy;

}

.HighlightedText

{

font-family: ‘Trebuchet MS’; Color: Navy;

}

Notice that the only difference between these two is that the HighlightedText class has a period before the name of the custom class. This identifies the section as a class that can be applied to any element you want, instead of defining default styling for a particular type of element.

To apply a style to an element you don’t need to do anything to the element itself; as long as your page knows where the style information for the page can be found, the style will be applied automatically (locating style information is discussed in just a moment). However, to specify a custom class to be used to style an element, you use the Class attribute, for example:

<div class=”HighlightedText”>This is highlighted text.</div>

<h1 class=”HighlightedText”>This is also highlighted text.</h1>

Although you can’t see the color of the text in this printed book, you can see that the font style that was defined in the preceding style class has been applied to these two elements in Figure 5-7.

Figure 5-7

142

Styling with Themes

Of course, if you try this out for yourself, you should see the font has also been rendered in navy blue.

Style Syntax

Style definitions are surrounded by curly brackets (braces). The position of the opening brace is usually either next to the name of the element or class, or on the following line; for example, the div style can be rewritten as follows:

div{

font-family: ‘Trebuchet MS’; Color: Navy;

}

You can choose whichever presentation style you prefer — personally, I like my braces to all line up in a vertical line.

Style information can also be applied to elements like anchor tags (<a>) with some specific modifiers to provide some dynamic hover-style appearance as follows:

a:link, a:visited

{

color: #cc3300; text-decoration: underline;

}

a:hover

{

text-decoration: none;

}

a:active

{

color: #ff9900; text-decoration: underline;

}

This code will render red links with underline on a page that, when you hover your mouse over them, lose their underline, and when you click them, they momentarily appear slightly orange. This is to provide you with some feedback that you are hovering over a link, and that you have just clicked a link. The comma-separated items mean that the following style information will be applied to both style definition items (in this case, the a:link and a:visited items).

The first step in moving to a fully CSS-based layout is to decide what styles you want to use for each element and construct a set of style definitions.

You can put style definitions in two places so that they can be used in a web page. The first option is to embed style information at the top of the web page within a <style> tag, placed within the <head> element. The other option is to create a separate external style sheet to store the style definitions, and to link that external style sheet to each web page that it should be applied to.

143

Chapter 5

In the next sections, you look first at placing style definitions within the <style> tags on a page, and then see how to attach an external CSS style sheet.

Moving from Style Attributes to a Style Section

If you are only interested in styling a single page, you can embed style information in the <head> section of the HTML for the page as follows:

<html xmlns=”http://www.w3.org/1999/xhtml” > <head runat=”server”>

<title>Styled Page 1</title> <style>

.HighlightedText

{

font-family: ‘Trebuchet MS’; Color: Navy;

}

</style>

</head>

<body>

<form id=”form1” runat=”server”>

<div class=”HighlightedText”>This is highlighted text.</div> <h1 class=”HighlightedText”>This is also highlighted text.</h1>

</form>

</body>

</html>

This code is the same code used to display the previous example. Notice how you can embed the style information quite easily within the <head> of the page using the <style> tag. This technique is fine for single pages — in fact, if you ever save a Word document as HTML, you’ll see that this technique is used to define the document styles in use so that the document can be rendered as HTML. I just saved this document from within Word 2003 as a Web Page (Filtered), which produces HTML code that’s a lot cleaner than the standard auto-generated code when you just save as a Web Page from Word. After I saved it, I viewed the source code that was generated, and found the following style definition that describes how some of the highlighted sections of code used in this chapter are defined:

p.code, li.code, div.code {margin-top:0cm; margin-right:0cm; margin-bottom:0cm; margin-left:30.0pt; margin-bottom:.0001pt; line-height:112%; font-size:8.5pt; font-family:Courier;}:

This technique isn’t really ideal for constructing a web site with style information applied to many different pages, because you would have to copy the <style> tags and style definitions across to all of the pages in the site individually. The solution for that scenario is to move to a separate CSS.

144

Styling with Themes

Moving to a Separate CSS

This step is perhaps the simplest to achieve. Once you have style definitions encapsulated within <style> tags, it’s a really simple matter to extract that information into a separate style sheet. All you need to do is create a file with the file extension of .css, copy across all the style information from your web page, and then add a link to that style sheet as follows:

<head runat=”server”> <title>Styled Page 2</title>

<link href=”StyleSheet.css” rel=”stylesheet” type=”text/css” /> </head>

The style sheet file contains only style information, so say you had a style sheet with all of your style code in it:

.HighlightedText

{

font-family: ‘Trebuchet MS’; color: Navy;

}

a:link, a:visited

{

color: #cc3300; text-decoration: underline;

}

a:hover

{

text-decoration: none;

}

a:active

{

color: #ff9900; text-decoration: underline;

}

You can then link that style sheet to your web page, and make a minor addition to the page code:

<form id=”form1” runat=”server”>

<div class=”HighlightedText”>This is highlighted text.</div> <h1 class=”HighlightedText”>This is also highlighted text.</h1> <div><a href=”default.aspx”>This is a sample link</a></div>

</form>

When you view this page you’ll see the result shown in Figure 5-8.

145

Chapter 5

Figure 5-8

Go ahead and try out these concepts. In the next Try It Out, you create a simple styled page that is based on the StyledPage1.aspx that you created earlier.

Try It Out

Styling a Simple Page, Part 2 — Using CSS

1.Create another new page in your Chapter05 web site and call it StyledPage2.aspx.

2.Copy the <div> and heading from StyledPage1.aspx and remove the style attributes from each element. In their place, add a class attribute, and give it a value of “HighlightedText”:

<form id=”form1” runat=”server”> <div class=”HighlightedText”>

This is highlighted text.</div> <h1 class=”HighlightedText”>

This is also highlighted text.</h1> </form>

3.Add a hyperlink to the page below the heading with the text “This is a sample link”. Enter

“default.aspx” as the value for the href:

<form id=”form1” runat=”server”> <div class=”HighlightedText”>

This is highlighted text.</div> <h1 class=”HighlightedText”>

This is also highlighted text.</h1>

<div><a href=”default.aspx”>This is a sample link</a></div> </form>

4.After the hyperlink, add a line break, followed by an ASP.NET Label control. Remember that server controls have a different set of properties than standard controls, so set the label’s

CssClass property to “HighlightedText”, and the Font-Italic property to “true”:

This is also highlighted text.</h1>

<div><a href=”default.aspx”>This is a sample link</a></div><br /> <asp:Label CssClass=”HighlightedText” Font-Italic=”true” ID=”Label1”

runat=”server” Text=”This is an ASP.NET label”></asp:Label> </form>

146

Styling with Themes

5.Right-click the Chapter05 site in the Solution Explorer and select Add New Item. Select StyleSheet from the list of icons and accept the default name: StyleSheet.css. In this file, add the following code:

.HighlightedText

{

font-family: ‘Trebuchet MS’; color: Navy;

}

a:link, a:visited

{

color: #cc3300; text-decoration: underline;

}

a:hover

{

text-decoration: none;

}

a:active

{

color: #ff9900; text-decoration: underline;

}

Notice how you get the same syntax help when you work with a CSS style sheet as when you work with <style> attributes on a HTML control in Source View, as displayed in Figure 5-9.

Figure 5-9

Also notice the Build Style icon on the toolbar; if you click this button, it launches the Style Builder dialog. You can try this out for yourself — add another element definition (a <div>,

147

Chapter 5

perhaps), and add the opening and closing curly braces. Place your cursor between those braces and click the button to launch the style builder. Once you have selected the styles you want, you just click OK and your styles appear as CSS items in the StyleSheet.css file.

6.There is just one final finishing thing to do, which is to tell your page to refer to the styles defined in the .css file. Switch back to StyledPage2.aspx and flip to Design View. You should see the screen shown in Figure 5-10.

Figure 5-10

7.Now drag and drop the StyleSheet.css file icon from the Solution Explorer onto the design surface. As soon as you do that, your page will change appearance (see Figure 5-11).

Figure 5-11

If you run the page now, you’ll see pretty much the same thing in your browser window.

148