Invoke css selectively on master page

If you include the firstpage.css after master.css, and your css is well structured, the contents of firstpage.css will override those of master.css.

If you have very specific rules in master.css you need to ensure a higher selector specificity value for the same rule in firstpage.css. You can read more here: http://www.w3.org/TR/css3-selectors/#specificity http://css-tricks.com/specifics-on-css-specificity/

As a last resort you can use !important in your page specific rules. However, this is probably going to cause you even more pain in the future.

If there aren't many pages on your site, you could define a content area for css files and specify on each page which styles to reference. If you have 100 pages this could be tedious though.

If this page is very different, you may consider not using master page.

Also, take into account that styles can be overwritten so having both css files on the same page could provide desired result if styles are defined properly.

Cascading stylesheets are designed to work in a cascading manner. However, you can create a content placeholder with default content in master page. This can contain master.css that you can override in your page with firstpage.css. Personally I would design a common css file for all pages within a site and then have one or more "page specific" css files that can override and add new styles.

You could do it this way if you don't want to use any of the styles from site.css. In Site.master where you have your current site.css reference, replace that with: (You'll need to change about.aspx)

NOTE - this is potentially bad because you might end up with CSS duplication if you completely remove the reference to site.css and then decide you need some of the styles, and have to add them to the new stylesheet.

<%
    string sPagePath = System.Web.HttpContext.Current.Request.Url.AbsolutePath;
    System.IO.FileInfo oFileInfo = new System.IO.FileInfo(sPagePath);
    string sPageName = oFileInfo.Name.ToLower();

    if (sPageName == "about.aspx") { %>
        <link href="~/Styles/about.css" rel="stylesheet" type="text/css" />
    <% } else { %>
        <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <% } %>

Getting the current page name code from - https://stackoverflow.com/a/1833313/2470724

EDIT

It also depends on what kind of styles you want to override, if it's text etc, then you could just add a class to your body content, and then style each page accordingly.

You have the following options:

1. The best way to do it would be to pull out the style definitions from the master css which you want to be duplicated and put them in a seperate stylesheet. Then you can do conditional statements in the head to apply the relevant stylesheet for the appropriate page.
2. You could also put the duplicate sylesheet that you want to apply after the master css in the head or on the page itself (which would obviously be after the head), this way the styles would be overridden. You should note that this might not work well across all browsers specially IE.
3. You could have !important next to every style you wish to override but this would be a lot of work and again you might run into some cross-browser compatibilty (read IE) issues.
4. The last option you have is to apply styles to the elements using javascript/jquery after the document is loaded. This will definitely work but this would again be a lot of work.
5. Read option 1.

"StyleSheetTheme" is what you are looking for. Take advantage of the Theming support of ASP.Net instead of applying stylesheets separately to all pages. If there is a page you want to be styled differently, then disable "theme" in its page declaration.

EnableTheming="true" / "false" in the page declaration

and styleSheetTheme="theme_folder_name" inside "pages" element of web.config