CSS Is Your Friend

Don’t Be Afraid to Use Cascading Style Sheets

UI Tips




CSS Is Your Friend

Don t Be Afraid to Use Cascading Style Sheets


By Andrew Flick and Devin Rader


Here s a question for all of you rapid application Web developers: Do you find yourself setting the same properties multiple times? For instance, have you set the font or the color of a font more than once in an application, setting it to the exact same specifications each time? If you answered yes to either of the preceding questions, you may be a candidate for cascading style sheets, better known as CSS.


CSS has been around for a long time, but we felt it was a necessary addition to our tips and tricks section because, even to this day, people are afraid of utilizing the technology. It seems that many people still insist on either writing the same blocks of code over and over (and over) again, or they click on different controls in Visual Studio.NET and set the exact same settings multiple times, as if CSS is some sort of voodoo. There is absolutely nothing wrong with that; however, if you want to make an application-wide style change, it does make maintenance quite a pain.


Currently there are two separate versions of CSS in existence: CSS1 and CSS2. All CSS1 style sheets work and are valid CSS2 style sheets; however, CSS2 adds the capability for the designer to target different end-devices (such as printers and handheld devices). Furthermore, according to the W3C, CSS2 supports content positioning, downloadable fonts, table layouts, internationalization, and many more features geared for UI development. For the purpose of this article, we ll discuss the basics of CSS1, because many developers are targeting IE as their end-browser and IE does not fully support CSS2 as, according to Microsoft Watch, Microsoft views the current implementation of CSS2 as flawed. Finally, CSS3 is currently under development, so it will be exciting to see if this gains traction in the Microsoft world and acceptance of the W3C. So, utilizing CSS1, we ll discuss the structure of CSS, inline vs. external styles, CSS classes, precedence, and inheritance.


The Structure of CSS

Learning CSS is a rather simple process. Really all you need to know is basic HTML and some of the terminology used by most word processors, such as font, forecolor, H1, etc. The declaration of a CSS rule consists of a selector and a declaration:




The selector is the HTML tag name, id, or class of the element for which you want to define rules. You can place multiple declarations inside each selector. For example, if you re working with the entire body of a Web page and you want to deal with the font:




     font-size: 8pt;

    color: blue;

    font-family: Sans-Serif;



You re not limited to only dealing with font; you can also quickly modify background, lists, and how elements are positioned. There is a lot of power here.


Inline Styles vs. External Styles

So far the style rules that we ve used can simply be placed in the <HEAD> section of your Web site. This isn t necessarily a bad practice, depending on the scenario. However, it helps to know the other places to use styles. One place to store styles is right in the HTML tags themselves. For instance, in the declaration of a paragraph or a div tag, a style declaration might look something like this:


<div style= FONT-WEIGHT: bold; COLOR: gray; FONT-FAMILY: Arial; TEXT-DECORATION: underline >


This declaration will make all the text inside this tag be bold, gray, Arial, and underlined. The one thing you ll need to make mention of is the fact that the style is wrapped in quotations when declared inline.


The second, and probably more common, way of utilizing style sheets is to declare them in an external file. This offers a lot of power because now you can affect a large number of pages by creating a style in a single file by simply making a reference of this file.


An external style sheet is a simple text file and commonly uses the naming convention .css to designate it as a style. After creating a style using the selector/declaration syntax and saving it to myStyle.css, you need to link this style to each Web page that you want to inherit this style. To do so, you would use the LINK tag:


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


The second way of referencing a style to a page is using @import. Generally speaking, the main use for this is not in a page reference, but in creating a generalized style sheet and inheriting that into another style sheet. For example:





    font-size: 8pt;

    color: blue;

    font-family: Sans-Serif;




@import url( /Global.css );



CSS Classes

CSS classes allow you to create a style and apply that separately for different elements that inherit that class. To use a CSS class, simply give any element that is going to inherit that class the attribute class followed by the class name. For instance, you may have a group of labels with the class name validator:


<label class= validator >Some Text</label>

<label class= validator >Some Other Text</label>


These validators should all be red as apposed to the default black of the other labels. CSS will give you a single place to declare these as red by making use of the CSS class. To declare a class in CSS, simply precursor the class name with a period and make sure the case is the same because these classes are case-sensitive. To make our validator text red, our class will look something like this:




    color: Red;



The Cascade in CSS

By this time, you know the basics of CSS. You can create a style sheet inline, import it, or even create one externally. The real question is: What takes precedence? The order of precedence begins with the author s stylesheet, followed by the user s stylesheets, and, lastly the default browser styles. When a user turns off styles, they are essentially changing the order of precedence. Furthermore, some browsers enable the user to have their own specific style sheet take precedence and override the Web page author s style sheet.


Now we know that, as the Web page author, your style sheet will take precedence (in most scenarios). However, you may have defined styles in separate places, so what takes precedence there? Persistent styles or those embedded or inline have top priority over any other stylesheet. The preferred or external style sheet takes the second priority, followed by any alternate style sheets that may have been selected by the user. Keep in mind that if an alternative style sheet is selected, the preferred style is turned off; however, the persistent styles remain.


The next order of precedence deals with conflicting rules; again, we ask what takes precedence? If you have multiple stylesheets defined and you want a particular style to take precedence, no matter in which style sheet it is located, simply mark the style with !important :


H1{font-family: Arial !important;}


Furthermore, the more specific a style is the more weight it has. So, a style pointing to a class will have more weight than a generic style. Finally, the style that is listed last will take precedence, which alludes to why persistent styles always take precedence.



Following the rules we just learned about precedence, the more specific a style is, the more weight it has. Consider this example:


< body>



         < div>...</div>




The body tag would be the parent in this relationship, the paragraph tag would be a child of the body, and the div tag would be a child of the paragraph. If the body tag is defined to have the style of blue text, then all the children inside the body tag will inherit blue text. However, if the paragraph tag has a style of red text, then all its children will then inherit red text. Finally, if the div tag has underlined text, then everything in the div tag will have underlined text.



This article barely scratches the surface of CSS. Some of the ideas we ve discussed could be written about in much greater detail. However, this article would then become a book. For more information on CSS, head over to the W3C Web site (http://www.w3.org/Style/CSS/); they have just about everything you would ever want to know on the subject.


In conclusion, we touched upon the structure of a CSS style sheet, inline vs. external styles, CSS classes, precedence, and inheritance. For all of you who still think CSS is voodoo, we strongly recommend you give it a try; we think you ll soon realize the full power it has to offer.


With that, we remind you to e-mail your questions to us at [email protected].


Andrew Flick is Product Manager of NetAdvantage Windows Forms Technologies & TestAdvantage for Infragistics, Inc., a Microsoft Visual Studio Industry Partner. He is responsible for spearheading product management and strategies of Infragistics Windows Forms product line - working directly with the Director of Development to set the direction, plan, and manage product development. Andrew is a Microsoft .NET MVP and is the chair of the INETA Academic Student Committee. Contact Andrew at mailto:[email protected].


Devin Rader is an Infragistics Technology Evangelist and is responsible for authoring Infragistics reference applications and .NET technology articles, as well as the world-wide delivery of Infragistics technology demonstrations. Devin is an active member and leader for INETA, has served as the sole technical editor for numerous works, and is a contributing author for the soon to be published ASP.NET 2.0 Professional. Contact Devin at mailto:[email protected].





Hide comments


  • Allowed HTML tags: <em> <strong> <blockquote> <br> <p>

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.