How to add new property within existing css?

Question

I have two css file.I have a class following in one css below

input[type="submit"], input[type="button"], .butLink {
    padding: 3px 9px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: inset 1px 1px 0 rgba(255,255,255,0.3);
    -webkit-box-shadow: inset 1px 1px 0 rgba(255,255,255,0.3);
    box-shadow: inset 1px 1px 0 rgba(255,255,255,0.3);
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;

    color: #FFFFFF;
    background: #A5BD24;
    background: -moz-linear-gradient(top, #A5BD24 0%, #7DAC38 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#A5BD24), color-stop(100%,#7DAC38));
    background: -webkit-linear-gradient(top, #A5BD24 0%,#7DAC38 100%);
    background: -o-linear-gradient(top, #A5BD24 0%,#7DAC38 100%);
    background: -ms-linear-gradient(top, #A5BD24 0%,#7DAC38 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a5bd24', endColorstr='#7DAC38',GradientType=0 );
    background: linear-gradient(top, #A5BD24 0%,#7DAC38 100%);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
    border: 1px solid #781;
}

Now I want to change this style from another css file.I tried following below which isnt working -

input[type="submit"], input[type="button"], .butLink
{
    background-color:#000 !important;
}

Any Idea?

You need change the background: aswell

Krish R
– Krish R

2013-12-23 17:38:37 +00:00
Commented Dec 23, 2013 at 17:38 — Krish R
– Krish R, Commented Dec 23, 2013 at 17:38

codingrose · Accepted Answer · 2013-12-23 17:37:33Z

1

Writing background will override previously defined properties.

Write:

input[type="submit"], input[type="button"], .butLink{
    background:#000;
}

answered Dec 23, 2013 at 17:37

codingrose

15.7k11 gold badges41 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dpeif · Accepted Answer · 2013-12-23 17:41:16Z

0

Try using the background rule instead of background-color, and make sure that your stylesheets are in the correct order in the <head> of your HTML. If they are in the correct order, the rule should not need the !important.

answered Dec 23, 2013 at 17:41

Dpeif

5311 gold badge6 silver badges19 bronze badges

Comments

Asraful Haque · Accepted Answer · 2013-12-23 17:51:54Z

You can do it easily.

Option one: If you apply this css rule for the particular page so use internal css .Add this rule within the header tag like this 


          <style>
             input[type="submit"], input[type="button"], .butLink
             {
                  background-color:#000 !important;
             }
          </style>

It will perfectly works because internal css overwrite the external css rule.

Option two: If you apply this css rule for the all pages so use external css .Add this rule after the last css property:value;like this
       color: #FFFFFF;
       background: #A5BD24;  
       background:#000;/* This will overwrite with the previous background property value #A5BD24;
Hope the answer!

Collectives™ on Stack Overflow

How to add new property within existing css?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related