I want to know to use CSS in ASP.NET.
If I have set of CSS files and I link my master page to them, how to utilize them to make my application look good. I'm not talking about CSS itself but about how to use its elements in the source of any ASP.NET page.
I'm looking for suggestions, resources, sites, or opinions.
in controls there is a property CssClass
<asp:Button ID="Button1" CssClass="Red" runat="server" Text="Button" OnClientClick='ani();'/>
In addition to @anishmarokey's answer don't forget that all all ASP.NET markup will render as HTML on the browser, so you can do anything that you can do to HTML. This even includes adding attributes such as style to all elements (even though intellisense will not prompt it). This will render correctly as a HTML style attribute on the client.
In addition CssClass can only be used on ASP elements, all others will require style
Well, assuming you want quick yet efficient answer, I'll share my view of how to use CSS files and CSS in general, it's not really related to controls or ASP.NET language.
First of all, ask the graphic designer to give you sketch of how the website should look: position of each element (menu, logo, content), look and feel of each element (color? picture if needed?) and maybe most important, uniform font family and colors all over the site: there might be several colors, but more than three or four becomes too messy and noisy.
Having the sketch, start by placing empty placeholders (or with dummy text) in the page, and give each its own class where you'll later define how the content in the placeholder is going to look like. You can also use the ID of the placeholder element later if you are sure its design is unique and won't be "shared" by other elements.
The "heart" of all this is making everything appear as it is in the sketch by defining the proper style. For example if you need menu on the right with links in specific color and contents on the left, all you need in the HTML part (.aspx or .ascx in your case) is this:
<div id="MainContents">contents here</div>
<div id="MainMenu">menu links come here</div>
<div class="clear"></div>
Then in the CSS file:
#MainContents { float: left; width: 700px; padding: 10px; }
#MainMenu { float: right; width: 300px; padding: 5px; }
#MainMenu a { color: #e01010; }
.clear { clear: both; }
The "clear" part is required when using float, just an empty div with the clear: both style.
That's about it, in a very shallow nutshell... I'll elaborate on specific part if you want.
Regarding ASP.NET controls, if more than one control is using the same CSS file and that CSS file is not "global" to all pages, you can use such code to include the CSS file only once:
if (!Page.ClientScript.IsClientScriptBlockRegistered(this.Page.GetType(), "MyCssFile"))
Page.ClientScript.RegisterClientScriptBlock(this.Page.GetType(), "MyCssFile", "<link href=\"MyCssFile.css\" rel=\"stylesheet\" type=\"text/css\" />", false);
This code, placed in the Page_Load of the control, will include the CSS file only once even if there are 20 instances of the control in the page.
Based on your question + comments I think it's all about CSS.
Check the css Zen Garden:
demonstration of what can be accomplished visually through CSS-based design. Select any style sheet from the list to load it into this page.
They have 210 alternate CSS designs all using the same unmodified html. Take a look at the alternate designs, it's a very nice example on keeping the design aspects to the CSS.
Others already explained the usage of CssClass with web controls. In my opinion an important usage for this is the usage in skin files. If you map all aspects of a web control with CssClass in a skin file, you get a layout that depends predominant on one skin file and the related CSS.
Here is a SO question of mine with a code sample for the Menu control.
All benefits of CSS is listed by others but I was thinking why you added many CSS files to your master page ?
Although CSS files are graphic libraries and are sent to a browser on first visit but still binding many CSS file to master page slow down your website. Consider removing unnecessary ones after you find out the answer of your question.
One addition to all answers:
Consider CSS minification as well. Css/javascript minification means that if you have for example 6 css files at runtime they will be all merged into one and the browser will make one request for your css instead of 6. This is especially helpful as your number of css files is growing as the browser supports a finite number of requests in the same time.
For asp.net I have used this library and it works great with both css and javascript:
