Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Introduction to Cascading Style Sheets

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.


advertisement
ascading Style Sheets (CSS) are a powerful way to separate content from design in your Web Forms applications. 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.

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 Form's 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 in 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.

Cascade Order
To effectively use Cascading Style Sheets, you must keep in mind how cascading works within the browser. You might liken cascading to object inheritance. When you define a style up the chain, lower-defined styles may override values of the base style. A Style Sheet's power is unleashed when you set up the right type of cascade.

Web Forms are composed of three elements: structure, design, and behavior. Isolating each element reduces coupling and increases maintainability and clarity in your code.
Here is the order in which the styles are applied to elements on a page:

  1. Included files
  2. Head items (within the <style> tag)
  3. Inline styles
Included Files
Included files are when you reference an external style in the <head> tag using a <link> tag, as shown in this next snippet.

<head> <link rel="stylesheet" href="/Styles/global.css" type="text/css" /> </head>

Head Items
Head items are style definitions found in the <style> tag within the <title> tag, as shown in the next snippet.

<head> <style> h1 { color:black; } </style> </head>

Inline Styles
Inline styles are style definitions applied directly to an element via the style attribute. These are not recommended for use, as they are hard to maintain.

<h1 style="color:black;">Welcome</h1>

Application of Styles
You may apply styles to your document and elements in any of three ways: by element, by ID, or by class.

Element Styles
Often, you need to apply a style throughout your site to an existing HTML element. Perhaps you want all of your paragraphs to appear in the Arial font, have wide line spacing, and appear as black text. To style all the paragraphs on every page of your site without writing extra markup, associate the appropriate style to your paragraph tags (<p>). The next snippet shows what you put into your Style Sheet so you can link that Style Sheet to all your pages.

p { font-family:Arial; line-height:1.5em; color:black; }

As your site grows, split up your styles into multiple files.
Notice the beginning of this code block: the statement opens with the name of the HTML tag with no preceding characters. This is how you access elements within the HTML structure.

ID Styles
Every element in an HTML page may have an ID associated to it using the id attribute. An element ID is a unique identifier for each element on the page. The IDs allow technologies like CSS and .NET to distinctly locate an element on a page. Setting aside .NET development for a moment, element IDs are only required if you choose to create a style that is specific for a certain element. The next code snippet demonstrates how to apply a style to an element on the page using an ID.

 
Figure 1. ID Styles: An ID style allows you to target a specific named control on a page.

<html> <head> <style> #divContainer { font-weight:bold; } </style> </head> <body> <div id="divContainer">Styled Container</div> <div>Unstyled Container</div> </body> </html>

Notice the opening of this code block. The statement begins with a pound sign (#). The pound sign indicates to the browser that the following style is applied to an element on the page and is associated by its ID attribute value. Figure 1 shows the result of this HTML.

Class Styles
Although a style applied to an element by ID is only available to one element on the page, class styles may be reused over and over again. Class styles may be defined and applied to like or disparate types of elements on the page. To illustrate how you might use a class style, create two containers on a page that hold other controls. Each container should show up 25 pixels away from the left border of the browser, as shown in Figure 2.

 
Figure 2. Class Styles: Use class styles to set a standard left indentation on controls.
The code to generate this Web page is shown below.

<html> <head> <style> .container { position:relative; left:50px; } #divContainer1 { border:dashed 3px #000; } #divContainer2 { border:solid 1px #000; } </style> </head> <body> <div class="container" id="divContainer1"> Container 1 </div> <div class="container" id="divContainer2"> Container 2 </div> </body> </html>

Notice the opening of this code block. The statement begins with a period. The period or dot indicates to the browser that the following style is applied to an element on the page and is associated by its class attribute value.



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap