Forum
 
ForumForumDiscussions and...Discussions and....Net framework ....Net framework ...About Themes , Skins And CSSAbout Themes , Skins And CSS
Previous Previous
 
Next Next
New Post
 17/03/2008 13:38
 

Hi,

Does anybody have an understanding when to use skins over css, which one is overwriting the other? I read that the sequence in which css are used inside themes is unpredictable. Is that correct? What is the difference bewteen skins and css files when I want to use it for styling the controls?

Thanks

 

New Post
 17/03/2008 21:19
 

Hi,

I'm happy to have a go at this and let the next man add some more.

Skins and CSS are different but overlapping tools.  A skin can set any ASP.Net property so it can do things that CSS cannot do.  CSS can style things (like table padding) that a skin cannot because they have no ASP .Net properties.

There is some documentation somewhere (can't find it right now) that states an order in which skins, properties, css etc are applied.  IIRC experiment showed that those rules did not apply consistently and it depended what control you were considering what order they applied in.

My view is that you should not attempt to use both CSS and Skin to style the same thing.  It just seems too open to confusion.

 

 


Cheers,
- Richard
If this post helped you over a problem, or taught you something new, please login and rate it. Ratings are in the drop down in the top left corner
New Post
 17/03/2008 23:33
 

I'll echo what Richard says. I spent some time trying to determine what the order of precedence was between CSS, skins in the theme applied at the application, skins in the theme applied at the page, property settings made at the control, named skins applied at the control, HTML attributes set in Source view, settings made by CSS brought in through a <LINK> tag, and settings made through a CSS class using the CSSClass property. I eventually gave up, except to say that named skins override skins at the page which override skins at the application level; CSSClass overrides settings made by the theme's CSS. After that, I couldn't determine any pattern. The  relationship between skins and CSS was....flexible.

When you think about it, it's not surprising. There are three ways of implementing skins at the browser: either generate an equivalent stylesheet, insert a style tag into the page, or set attributes on the control's HTML tags (either by setting an explicit attribute or by setting a style attribute on the contriol). On top of that, there isn't a one-to-one correspondence between either aspx tags and HTML tags or between asp.net properties and html attributes. Because of that lack of correspondence between aspx: tags and HTML tags, I don't think there could be a universal way to implement skin settings: some stuff would have to be done on a control-by-control basis. If that's the case, it wouldn't be surprising if there's variation between the way different controls work with skins.

I tell people is to avoid controling appearence more than one way. That generates three rules:
    - Prefer named skins to setting individual control properties (i.e. don't try to control appearance through local settings and skins or CSS). Just use skins and/or CSS.
    - Control any particular appearance items either through CSS or skins but never through both. Decide what you'll control through CSS and what you'll control through skins.
    - And the most important thing: If you make a change, look at the result in a browser before signing off

New Post
 18/03/2008 01:24
 

Hi

Skins are like templates for server-side web controls.  They let you assign default values to any 'themeable' control property, including non-style properties. For example you might define a button in your skin as:

<asp:Button runat="server" BackColor="ButtonFace" Text="Default Button Label" />

Where as CSS lets you add style at the HTML level, e.g.

input { background-color:red; }


To work out the precedence of CSS and skin styles, look at how they get rendered and consider that inline CSS styles always override external CSS styleseets.  

The Button control above will render as:

<input id="Button1" type="submit" style="background-color: buttonface;" value="Default Button Label" name="Button1"/>


So the background colour defined in the skin overrides the CSS, because the skin is rendered as an inline CSS style.

There are so many places you can apply styles: inline CSS styles, external CSS stylesheets, inline CSS stylesheets, control properties, skins from Themes, skins from StyleSheetThemes, and even JavaScript.  If you used all these techniques it'd be impossible to keep track, so choose the approach that works best for you and stick with it.

I like to use external CSS stylesheets for nearly all layout and styling, and occasionally skins if I need to set defaults for control properties that aren't configurable from CSS, maybe like GridView.AlternatingRowStyle.

Chris

 

New Post
 18/03/2008 06:33
 

Thanks guys,

You gave some helpful tips here. 

Previous Previous
 
Next Next
ForumForumDiscussions and...Discussions and....Net framework ....Net framework ...About Themes , Skins And CSSAbout Themes , Skins And CSS

Forum Usage Guidelines

The forums are a place for all to exchange ideas and techniques, and to post and answer questions.  All are welcome to read, registration is required to post. 

If you learn somthing new, discover or acquire a new technique, then please take a moment to register and rate the post that just helped you.  This site does not send spam and it does not release your personal details.  Full details in the site privacy policy.

We have some simple posting guidelines to keep the forums a pleasant and informative environment.

  • No flames, no trolls
  • No profanity, no racism
  • Site management has the final word on approving or removing any thread, post, or comment
  • English language only please

 

Copyright 2002-15 by Dynamisys Ltd