Introduction to Cascading Style Sheets Cascading Style Sheets (CSS) are a powerful way to separate content from design in your Web Forms applications. An effective use of CSS is an easy way to maintain and consolidate the visual aspects of Web development. Cascading Style Sheets are a Web standard that have been in existence for a number of years. Most modern browsers support CSS, so their use in your .NET applications should pose no cross-browser compatibility issues. However, like most things in the Web world, various browsers may behave differently depending on the CSS you feed it. | " |
The practical use of CSS is the first step to creating and designing sites using Web CSS standards.
| " |
In this article, you will learn about the mechanics and the practical uses of CSS that you will find valuable as a .NET developer. This is your first step to creating and designing sites using Web CSS standards. Structure, Design, and Behavior In .NET, Web Forms are comprised of three elements: structure, design, and behavior. Isolating each element reduces coupling and increases maintainability and clarity in your code. Structure A Web Forms' structure is the actual HTML and WebControls markup of an ASPX page. As most programmers know, an HTML page must include certain elements and must include those elements in a certain order. This snippet shows an example of the structure of an HTML page. <html>
<head>
</head>
<body>
<form>
<p>
</p>
</form>
</body>
</html>
This HTML markup must be structured as you see it. You could not put a <p> tag outside of the <body>, for example. Ideally, the only markups in your ASPX page at development time are HTML elements, user controls, and/or server controls. Design Traditionally, developers have embedded design and layout in the HTML/ASPX pages in the form of tables, font tags, and other hard-coded elements. Removing all visual layout, color, positioning, and other aesthetic control to the style sheet reduces your structure code and gives you a single point-of-contact to update your site. An example might be, instead of doing this: <td bgcolor="Blue">
You might simply use this: <td>
Then, in the Style Sheet, you define <td> to be a certain color. If you wish to make a change across all your <td> tags, you only have to do so in one place. Behavior Often, Web Forms include some custom JavaScript. Instead of putting the JavaScript directly in the page, it is better to isolate the JavaScript into a separate file. This allows you to edit the file without redoing any ASPX pages, and also allows you to reuse that file on another page. This article does not address any JavaScript behavior. | & | | 
By: Craig Shoemaker Craig Shoemaker is a software engineer for PDSA, Inc. (www.pdsa.com), a Microsoft Partner in Southern California. With over 10 years experience in Web development, he brings a unique perspective to tying together front- and back-end development. Craig is also the host of the Polymorphic Podcast, (www.polymorphicpodcast.com), a weekly audio show about object-oriented development, architecture, and best practices in .NET. You may reach Craig at craigs@pdsa.com.
craigs@pdsa.com | Fast Facts | | Browsers often have a difficult time reading a style definition for one reason or another. Adding a position (and sometimes a width) value to every appropriate CSS definition can jumpstart the browser into recognizing your styles correctly. | |
|