A Quick Overview of CSS

for RuBoard

A cascading style sheet (referred to as just a style sheet from now on) enables you to control formatting options for a limitless number of HTML elements in a single place. The style sheet exists as a file in your Web project that typically has a .css extension. In this file, you place formatting information for HTML tags, as well as any custom types (called classes) that you want. If you include this file into any of your existing Web forms, the Web forms will automatically pick up the formatting from the CSS file. These concepts are best grasped by looking at some examples. Consider the simple DataGrid example from the preceding hour shown again in Listing 12.1. There are only a few differences between this listing and the one in the preceding hour . First, inside the <head></head> tags, there is the following entry:

 <LINK rel="stylesheet" type="text/css" href="ADO24HRS.css">

This includes an external style sheet into the existing Web form. By modifying the contents of the ADO24HRS.css file in the same directory, you can control the appearance of almost any element in the DataGrid example in Listing 12.1. Most of the examples in this book so far have used the Main.css style sheet. This hour uses a style sheet named ADO24HRS.css with some additional formatting.

Listing 12.1 A Simple `DataGrid` Example

 <% @Page Language="VB" %> <%@ Import Namespace="System.Data" %> <%@ Import Namespace="System.Data.SqlClient" %> <HTML> <HEAD>     <LINK rel="stylesheet" type="text/css" href="ADO24HRS.css">     <!-- End Style Sheet -->     <script language="VB" runat="server" >         Sub Page_Load(Source as Object, E as EventArgs)             LoadDataGrid(orders)         End Sub         Private Sub LoadDataGrid( _                          myDataGrid as System.Web.UI.WebControls.DataGrid)            Dim conn as New SqlConnection("Initial Catalog=Northwind;" + _                                        "Server=(local);UID=sa;PWD=;")            Dim cmd as New SqlCommand("SELECT OrderID, " + _                                      "CustomerID, " + _                                      "OrderDate, " + _                                      "ShipName " + _                                      "FROM Orders", conn)            conn.Open()            myDataGrid.DataSource = cmd.ExecuteReader()            myDataGrid.DataBind()            conn.Close()         End Sub     </script> </HEAD> <BODY> <h1 class="MainHeader">A Simple DataGrid Example</h1> <hr> <form runat="server" id=form1 name=form1>    <asp:DataGrid id="orders" runat="server"></asp:DataGrid> </form> <hr> </BODY> </HTML>

Before you make any modifications, take a look at the Web form as it currently exists. Figure 12.1 shows the appearance of the Web form with no modifications made through the style sheet. It's bland , which makes the data difficult to read. Luckily, we can easily spice things up a bit.

Figure 12.1. The default appearance of the Web form in Listing 12.1 before any CSS modifications are made.

graphics/12fig01.jpg

By just adding the lines in Listing 12.2 to the ADO24HRS.css file, you can drastically change the appearance of the Web form in Listing 12.1 without directly editing that file. Examining the code in Listing 12.2, you can see that we're modifying the appearance of the <TD> and <TABLE> HTML tags. Specifically, we're adding a border, changing the font, padding the content inside the table cells , and changing the background color of the table. Figure 12.2 shows the appearance of the example in Listing 12.1 with the new style sheet applied.

Figure 12.2. The appearance of the Web form in Listing 12.1 with a basic style sheet applied.

graphics/12fig02.jpg

Listing 12.2 A Simple Stylesheet

 TD {     border-color: black;     font-family: sans-serif;     border-width: thin     border-bottom: black;     border-left-width: 0;     border-right-width: 0;     padding: 5px; } TABLE {     background-color: gold;     border-color: black; }

Certain style sheet properties are not supported by all browsers. For instance, version 4 of Netscape does not support the border-left and border-right properties used in Listing 12.2. A quick search of the World Wide Web turns up a number of reference guides to developing cross-platform style sheets. One particularly good reference is located at http://www.webreview.com/style/index.shtml.

Any Web form that includes this style sheet will have its tables modified in the same way, however. This might sound desirable, but because tables are an extremely popular HTML formatting device, you probably wouldn't want this appearance given to standard text tables. You could include multiple style sheets based on the type of page, but this introduces a lot of overhead and opportunity for error. The easiest solution is to use a CSS class.

Listing 12.3 contains a new class to add to the ADO24HRS.css file. It contains a class called MainHeader that is applied to the H1 HTML tag only. By omitting the H1 . before the MainHeade r class name, you can apply the class to any HTML element that supports the properties.

Listing 12.3 Adding a CSS Class

 H1.MainHeader {     font-size: 30px;     font-weight: bold;     font-family: sans-serif;     text-decoration: overline; }

This changes the appearance of the header, as you can see in Figure 12.3.

Figure 12.3. The appearance of the header in Listing 12.1 with a CSS class applied.

graphics/12fig03.jpg

This section on style sheets has covered the bare minimum necessary to explain how to use these concepts to format list controls. The sheer number of changes you can make to the user interface using style sheets is staggering. For a terrific list of tutorials, references, and online books on the subject of CSS, visit the official home page at http://www.w3.org/Style/CSS/.

By using the same style sheet for all of the pages in your application, you can control the appearance of all pages from a single location. This is an extremely powerful tool that lets you customize the appearance of your entire application by making changes in one place.