Home > .NET, ASP.NET, CSS > A reflection on Cascading Style Sheets (CSS)

A reflection on Cascading Style Sheets (CSS)

October 12th, 2006

I’ve been using Cascading Style Sheets (CSS) since the mid 90′s. The lack of consistent support across browsers had always impeded my shift from table based design to CSS design. When I did make the transition, I can clearly recall the frustration, and confusion that preceded. Lately I’ve been using Themes and Master Pages (ASP.NET 2.0) with CSS. Personally I don’t like how .NET automagically inserts the CSS file references into the header. Much of CSS’s power is determined by the loading order, and the ability to define separate CSS files for Internet Explorer (IE).

I’ve compiled a list of techniques I find useful when developing CSS:

When designing my CSS I try to use a browser that is W3C compliant (Firefox, Opera), I then apply fixes for the many quirks found in IE.
I find it easier to develop CSS in a text editor, rather than a WYSIWIG editor – perhaps I’m a bit of a standards geek, but I like to thoroughly understand a technology rather than rely on wizards, etc…

By inserting the code below into a webpage’s header you define a CSS file that will only be loaded by IE, this is great for fixing display issues in IE by overloading the effected CSS elements.
<!–[if IE]>
       <link href=”IEQuirkFixFile.css” rel=”stylesheet”
            type=”text/css” media=”all” />

<![endif]–>

You can also define different CSS files for different media types like a printer, letting us hide content (like navigation menus) that you don’t want printed.
<link href=“HideAllNavigationalContent.css” rel=“stylesheet” type=“text/css” media=“print” />

You can specify other media types like: Braille, handheld, projection, tv, and so on. See more media types here: http://www.w3.org/TR/REC-CSS2/media.html#media-types

CSS can be applied in 3 different ways: Inline, Embedded, and External (Linked or Imported). It’s nice to keep everything in external files as this method promotes a more n-tier approach even in the presentation level, but I also find it convenient to override classes through CSS Embedded blocks.

An example:
The following Embedded CSS will hide a Navigation menu, and increase the Content pane to 100% when inserted into webpage. Using a combination of Embedded and External CSS can allow us to use a single Master Page.

<style type=“text/css”>
<!–
    #Navigation
    {
        display: none;
    }
    #MainContent
    {
       max-width: 100%;
       width: 100%;
    }
–>
</ style>

CSS coupled with SVG (Scalable Vector Graphics) and Extensible Markup Language (XML) is becoming an increasingly powerful technology, and most web applications under the Web 2.0 (alternatively known as Chmod 777 web or the Read / Write Web) use CSS, XHTML, AJAX, Clean and meaningful URLs (URL Rewriting), and so on.

View a SVG example: http://www.w3schools.com/svg/svg_examples.asp

Related links:
Cascading Style Sheets Home Page
CSS Zen Garden

Author: Adam Kahtava Categories: .NET, ASP.NET, CSS Tags:
  1. No comments yet.
  1. No trackbacks yet.