Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Designers of the ASP.NET websites have access to all of the tools that modern website developers use, such as Cascading Style Sheets, Div tags and other capabilities that are enabled by the modern web browsers such as Internet Explorer and Firefox. In older websites, pages tended to be laid out with HTML tables. You place tables within tables within tables to control layout and positioning of objects on the screen. But there were problems with this approach. Not all browsers interpreted table measurement the same, so a page that would be laid at one way in the Internet Explorer, might look somewhat different in Firefox.
Also when you use table containership to manage the layout and positioning of elements on the screen, it isn't possible to change that information without really restructuring the tables and finally the rules of layout can't easily be shared among multiple pages as they can with Cascading Style Sheets. In modern websites, developers tend to use what we call Div tags. A Div tag is a block element that describes content that lays out horizontally across the screen, but Div tags can also be controlled in terms of their sizing and placement on the screen using Cascading Style Sheet rules. Cascading Style Sheets, or for short CSS, is used to control visual styles like colors and fonts, placement and positioning and Z order which determines which object overlay each other as the user sees them.
When you are building static websites, you declare Cascading Style Sheets in a few different ways. You can place your styles as inline styles declared within an HTML element, like the span tag I show here. The Style Attribute declares a style rule of color with the value of blue or FF0000. The result would be that the text within that span would be blue. You can also embed your style rules in a web page using the Style tag as shown next in this example. A Style Sheet class called blueItems is declared and then that class is applied to HTML elements with the class attribute.
Here is another example of the same class, but this time placed in an external style sheet and then linked to a HTML page with the link element. Again, these are approaches that are used in static websites. When you work in ASP.NET, there are a number of approaches that you can use. All of the server-side visual controls that generate HTML for delivery to the browser, such as the .NET label control shown here have a set of properties that equate to Cascading Style Sheets style names. For example, the BackColor property, which is available on many ASP.NET web controls, translates into an HTML style name of Background-Color. BorderColor translates to Border Color, Font- Bold actually represents a style name, Font-Weight with a value of Bold, Font- Italic is really a font style of Italic and so on.
As you see here, each of the properties that I apply to my label control is translated into a part of the style setting in the Span tag. So this will work, but the problem with this approach is that if you have a number of labels that you all want to look the same, you are going to have to apply the label properties many times. So here is an alternative approach, you can combine client site Cascading Style Sheet code with server-side ASP.NET declarations. In this example, I have created a CSS class name myLabels. CSS classes are always prefixed with a dot character. The markup that you see here, it could be placed either embedded in a page, if it was only used on a single page within the Style element or it can be placed in an external style sheet file and linked into all pages.
Then the class myLabels would be available throughout the website. Then for each instance of an ASP.NET control that you want to use the Cascading Style Sheet class, you use the ASP.NET CSSClass property shown in the second code sample at the bottom. The CSSClass property in an ASP.NET control translates as an HTML class attribute. So here is the generated code before and after. In the earlier example, I showed that there is a single style attribute that combines all of the values of the ASP.NET properties and in the second example, the CSSClass property has been translated as the simple HTML attribute class and given the same value.
Between the linking of the Cascading Style Sheet external files into your pages, and the use of the CSSClass attribute, you will see that you are combining the best of both worlds. Global implementation of visual design for the whole website using a single external CSS file, plus the use of ASP.NET server controls which give you dynamic capability both on the client and in the server environment using your choice of programming language. In the remaining videos in this chapter, I'll show some examples of ways that you can use Cascading Style Sheets both in the RAW ASP.NET code and how you can implement that code using Visual Web Developer.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 99447 Viewers
56 Video lessons · 112683 Viewers
71 Video lessons · 81502 Viewers
131 Video lessons · 39125 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.