CSS Options

One thing I have been thinking a lot about lately has been the multitude of ways that CSS can be applied to a document. You can have inline styles, you can have style elements in your page, you can have external style sheets, you can have styles applied by ID, styles applied by classname, styles applied by tag. Every web developer I talk to has a different preference for how to do things. Some will use different techniques depending on the situation, and some will always follow a rule based on standards or personal preference.

This is all well and good. CSS allows a lot of flexibility. I respect that. But how do you have an interface that allows people to efficiently direct a designer to generate CSS like this? This is the next challenge for web development tools to handle.

In my comments to my first post I asked a respondent what he thought of a feature that would move inline styles off of tags and it sounds like for that person it would be something he wanted. But would this be something everybody would want? When I think about what I would like to have for managing styles it seems like a good idea.

Whidbey generates a lot of CSS when you use the designer. This is a good thing, and an improvement over VS.NET 2003. No more font tags! It will be interesting to hear about how people will arrange all this CSS that the tool will generate for them.

Comments

• Anonymous
  February 21, 2004
  The comment has been removed
• Anonymous
  February 21, 2004
  Sorry in my excitement I wrote Script tags - what I meant was Style tags. Oh the excitment of being listened to!
• Anonymous
  February 21, 2004
  I agree too. It's frustrating when you want to change a style for something that is set in an inline style attribute from a Web Control.
  
  My preference is to have multiple external stylesheets. Have one for generic style stuff (fonts, colors, general layout of the site). Then, have one tailored for the controls on a specific page.
  
  
  I understand this would be a big challenge though. Dreamweaver MX 2004 tries to put your styles in classes, but it doesn't work out all that well.
• Anonymous
  February 21, 2004
  The comment has been removed
• Anonymous
  February 21, 2004
  External stylesheets all the way. I think ASP.NET has done a great disservice by teaching new web developers to use inline styles out of ignorance. I get so many questions on how I make my site's colors change on the fly -- and its just basic stylesheets!
• Anonymous
  February 21, 2004
  It is interesting to hear this feedback. Back when HTML was brand new large websites did not exist (obviously, because nobody had time to create them yet :) but as the websites got bigger, they turned into large code-like projects. I think that some people still treated them like documentation instead of code, but the design patterns I see with complex sites now resemble code way more than documentation.
  
  CSS is basically code reuse for websites. And when I look at people's Longhorn demos I can see that the idea of separating content and appearance will be the future of client side apps too.
  
  What is it about current tools that is not quite there? I think that the difficulty in designing a tool for these scenarios is when people want to mix and cascade styles. Personally I don't do it much (it makes it hard to debug the appearance of things) but people sometimes want to or have to do it.
  
  What I am curious about is the order that people do things. Do you find yourself making everything inline at first, to get a handle on things, and later on making a stylesheet? Or do you make a stylesheet first and then create content around it? I have seen people do both, but I wonder what is more common, or if what people do is because of how the tools work rather than what they want to do.
  
• Anonymous
  February 21, 2004
  The comment has been removed
• Anonymous
  February 21, 2004
  The comment has been removed
• Anonymous
  February 22, 2004
  All very good comments up to this point. Here's one concern I have (or maybe I'm mistaken). Recently I was asked to CSS a calendar control for a client of mine. They wanted the ability to change the "look & feel" of the calendar without having to mess with the .aspx page. So I set about doing that... here's the methodology I used.
  
  I went into the .aspx page, where I declared the calendar control. I proceeded to add CssClass properties to every aspect of the control. Then I went into the .css file, and added classes for each of those calendar parts. But there was a problem. For some reason, several parts of the calendar control weren't accepting the styles from the CssClass I had defined for it. I won't name them here, but it made it very frustrating to work with. Even though I had set the CssClass property, the calendar control was still outputting inline styles! Needless to say, it was very, very frustrating... and I had to train my client how to make some changes in the .aspx page (never a good thing to do) and the .css page.
  
  Moral of the story, let's hope Whidbey provides us the opportunity to better style of web pages with CSS.
  
  C
  
  PS
  
  Oh, if I was simply mistaken and this is a common problem, please give me a hand. I asked on the asp.net forums and nobody could help. Thanks!
• Anonymous
  February 22, 2004
  The order I usually do things with CSS now is externally (after the structural XHTML is setup). Very similiar to Joe's approach. When I first started with CSS, I would code inline at times to get a feel for what it would do to my page. But, now that I understand exactly what the CSS is going to do to my page, I just code it straight into an external sheet. I always use external stylesheets now, to keep the css separate from the XHTML, and to allow stylesheet switching (which is very, very cool. Check out www.csszengarden.com for some great examples).