Click here to download the source code for this lesson.
ASP.NET has a lot of programming and behavior features, but there is another aspect of the web programming environment that we haven’t discussed much in prior lessons; that aspect is the look and feel of the application. The look and feel of an application is just as important as the functionality because an application that has an organized and easy to use graphical user interface design helps improve the overall experience for the end user.
In ASP.NET, you can control the way that the application looks and feels by using Cascading Style Sheets (CSS). Cascading Style Sheets are a web programming standard and are not specific to ASP.NET so you may have been exposed to them before. Cascading Style Sheets are text files with a .css extension. These files contain a list of styles that are defined for an application. A style is a descriptor that defines how an object in a web page should look and how it should be layed out within the page. For example, with a style you can define that the font size for text box should be 12 point and it should be left aligned. Applications typically contain many styles for various objects in a web application. To learn more about to see a comprehensive list and defintion of the available styles. In addition to styles, to become an effective ASP.NET web developer, you also need to understand HTML tags and how they are used. You don’t have to be an expert, but you should be able to at least understand how to layout a basic web page using DIV and TABLE tags. and see a comprehensive list of available tags.
In an .aspx file, you will typically find a combination of HTML tags and ASP.NET server tags. ASP.NET server tags are identified by the property runat=”server”. Styles can be applied to both HTML tags and ASP.NET server tags. To apply a style to an HTML tag you set the Class property to the name of the style from the style sheet. To apply a style to an ASP.NET server tag you set the CssClass property to the name of the style.
In Visual Web Developer, to create a new style sheet file, right click on the project name in the Solution Explorer and choose “Add New Item”. Choose “Style Sheet” from the template list. It will create a file called StyleSheet.css. As you are developing you can keep creating styles in this file and then reference those styles in your .aspx files using the properties discussed above. You can use as many style sheet files as you want in your application and you can re-use existing style sheet files as well by adding them into your project.
After you have created the style sheet file to the project, you need to reference the file in your .aspx pages. To do that, add the following line inside the “head” tag:
<link href="StyleSheet.css" type="text/css" rel="stylesheet"/>
*Just remember to change the href property if your style sheet file name is different. Once you put that line inside the “head” tag, you will be able to reference any of the styles in that file. In my example style sheet file I defined two different styles: one for my labels called “formlabel” and one for my text boxes called “formtext”. My label style defines that the font should be bold and my text box style defines that the color of the text should be blue. In each style, you can define multiple characteristics. To apply the style to my ASP.NET Label control, I set the CssClass property to “formlabel”. If you apply a style to one of your ASP.NET controls and you don’t see the style reflected in the Design view, go back to your “head” tag in the .aspx file and make sure you added the “link” reference tag to the style sheet.
Click here to watch an example video where I create a new CSS style sheet file and apply some styles to an .aspx web form. Remember that earlier I mentioned that CSS styles can define both how something looks and how it is layed out. In order to control layout of a web page, you have to use a combination of HTML DIV tags and styles. A DIV tag defines a distinct layout area of controls on a web page. Think of the DIV tag as a way to group visual objects. You can apply a style to a DIV tag; for example if you want a group of controls to be 20 pixels from the left edge of the web page you can create a style that defines “margin-left: 20px” and then apply that style to the DIV tag. Another HTML tag that can be used to effectively control layout is the TABLE tag. TABLE tags give you a lot of control over placement of objects on a web page. I recommend that you keep it simple at first and add additional styles as you develop your application.