How to use CSS in an ASP.NET application

Question

I want to know use CSS in ASP.NET.

If I have a set of CSS files and I link my home page with them, how to use them to make the 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 am looking for suggestions, resources, sites or opinions.

Answer 1

Well, if you want a quick but effective answer, I will share my opinion on how to use CSS files and CSS in general, this is not related to controls or ASP.NET language.

First of all, ask the graphic designer to give you an idea of ​​what the website looks like. : the position of each element (menu, logo, content), the appearance of each element (color? image, if necessary?) and, possibly, the most important, uniform font family and colors throughout the site: there may be several colors, but more than three or four gets too dirty and noisy.

With a sketch, start by placing empty placeholders (or with dummy text) on the page and give each one its own class, where you later determine how the contents of the placeholder will look. You can also use the placeholder element identifier later if you are sure that its design is unique and will not be "shared" by other elements.

The "heart" of all this makes everyone manifest themselves, as in a sketch, determining the correct style. For example, if you need a menu on the right with links in a specific color and content 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 "hidden" part is required when using float, just an empty div with a clear: both styles.

Something about this, in a very shallow short ... I will talk about a specific part if you want.

As for ASP.NET controls, if more than one control uses the same CSS file and that the CSS file is not “global” for all pages, you can use this 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 only contain the CSS file once, even if there are 20 instances of the control on this page.

Answer 2

the controls have a CssClass property

 <asp:Button ID="Button1" CssClass="Red" runat="server" Text="Button" OnClientClick='ani();'/> 

Answer 3

In addition to @anishmarokey's answer, don't forget that all ASP.NET markup will display as HTML in the browser, so you can do whatever you can do with HTML. This even includes adding attributes such as style to all elements (although intellisense does not request it). This will correctly display as an HTML style attribute on the client.

In addition, CssClass can only be used for ASP elements, all others require style

Answer 4

Based on your question + comments, I think everything about CSS.

Check out css Zen Garden :

demonstration of what can be done visually using CSS design. Select any stylesheet from the list to upload it to this page.

They have 210 alternative CSS schemes that use the same unmodified html. Take a look at alternative designs, this is a very good example of preserving design aspects for CSS.

Answer 5

Others have already explained the use of CssClass using web controls. In my opinion, the use of skins in files is important for this. If you map all aspects of the web control to CssClass in the skin file, you get a layout that depends on the skin file alone and the CSS associated with it.

Here is my own question with sample code for a menu control.

Answer 6

All the benefits of CSS are listed by others, but I thought, why did you add a lot of CSS files to your main page?

Although CSS files are graphic libraries and are sent to the browser on their first visit, linking many CSS files to the main page slows down your site. Consider removing unnecessary ones after you find out the answer to your question.

Answer 7

One addition to all answers:

Also consider minimizing CSS. Css / javascript minification means that if you have, for example, 6 css files at runtime, they will all be merged into one and the browser will make one request for your css instead of 6. This is especially useful as the number of your css files grows as The browser supports a finite number of requests at the same time.

For asp.net, I used this library and works great with css and javascript:

http://combres.codeplex.com/