Home/ Questions/Q 5846721
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T12:37:01+00:00

I have multiple webpages that work together. Most of them have the same css

  • 0

I have multiple webpages that work together. Most of them have the same css from a master file. The issue I am having is that one page needs the css to be a little different. Here is what I mean:

Master’s CSS

  .Close
  {
      position: relative;
      top: 0px; /* Different */
      display: block; /* Different */
      margin: auto; /* Different */
  }

.ArrowLeft
{
    background-image: url(arrow_left.png);
    border: 0 none transparent;
    padding: 0 0 0 0;
    position: relative;
    top: 0px;
    height: 37px;
    width: 47px;
    z-index: 10;
    display: none;
    background-color: transparent;
    float: left; /* Different */
}

.ArrowRight
{
    background-image: url(arrow_right.png);
    border: 0 none transparent;
    padding: 0 0 0 0;
    position: relative;
    top: 0px;
    height: 37px;
    width: 47px;
    z-index: 10;
    display: none;
    background-color: transparent;
    float: right; /* Different */
}

Page’s CSS

.ArrowLeft
{
    background-image: url(arrow_left.png);
    border: 0 none transparent;
    padding: 0 0 0 0;
    position: absolute;
    height: 24px;
    width: 25px;
    z-index: 10;
    display: none;
}

.ArrowRight
{
    background-image: url(arrow_right.png);
    border: 0 none transparent;
    padding: 0 0 0 0;
    position: absolute;
    left: 258px;
    height: 24px;
    width: 25px;
    z-index: 10;
    display: none;
}

  .Close
  {
      position: relative;
      top: -1px;
      left: 105px;
  }

Notice the small differences (margin: auto, float: left .. ect) I want to have these differences not happen in my page’s css. I know that float: none will remove the floats but how can i remove the display, top, and margin properties that are different? I would just change the class name but all the pages use the same .js file so renaming them would be very long/unwanted.

Suggestions?

Is there a way to just turn off the master css or disable it for these classes?

Edit Here is what I am talking about (The arrow):

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I do it like this:

    Master head section: 

    <head>
    <!-- other head stuff -->

    <link href="css/master.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="CPH_Css" runat="server" />
</head>

    ContentPage:

    <asp:Content ID="Content1" ContentPlaceHolderID="CPH_Css" runat="server">
    <link href="css/content.css" rel="stylesheet" type="text/css" />
</asp:Content>

    That way you can override the master.css with whatever specifics you want in the content page.

    • 0