CODEWITHSUNDEEP
css
Damian At Tla
Damian At Tla

Reputation: 5

CSS Button Class Override

Looking to change the color of this default button.

<div class="embedded-joinwebinar-button"><button class="btn btn-default css3button" title="regpopbox_169105139238456865_2a56da29a6" type="button">SIGN UP NOW!</button></div>

Is there anyway to override this default button class to change the color of the button's background? I know there is an !important instrument to use but not sure how it could work since I can't edit the class. This is a piece of embed code I am using from another platform.

Upvotes: 0

Views: 2722

Answers (1)

user3810867
user3810867

Reputation: 96

There are 4 levels of rule prioritization when it comes to CSS selectors. From lowest to highest priority:

1. External CSS files referenced in the HTML.

Rules placed below the same rules in the same stylesheet will overwrite them. Rules with the same selectors placed in external stylesheets that load later will override rules in stylesheets that load earlier.

2. Rule specificity.

Rules with more specific selectors such as button.btn {} will override .btn.

3. Inline styles.

Writing a style inline for example <button style="color:blue; padding:2rem 6rem"> will override the matching css rules for that element.

4. !important.

Writing .btn-default { color: green !important } will override all of the previous styles mentioned above.

In college, we'd get very low grades on assignments if we used #4. One quick tell-tale sign of developer with a degree is when mostly #1 is used, less often #2, and never #4.

Based on what I've mentioned and to directly answer your question, there are two good ways to solve your issue:

1. [Preferred] You can utilize #1 to place the following rule in a new external stylesheet that loads after your bootstrap stylesheet.

.cssbutton3 {
    background-color:cyan;
}

2. You can utilize #2 and make your selectors increasingly more specific until the rule is overwritten.

div.embedded-joinwebinar-button > button.btn-default { 
    background-color:pink;
}

Upvotes: 2

Related Questions