How to override css style

Override Inline Styles with CSS

This damn juicy CSS trick has been around for a while now, but I wanted to make a special post sharing it again to spread the good word. Often we think of inline styles as a way to override styles we set up in the CSS. 99% of the time, this is the case, and it’s very handy. But there are some circumstances where you need to do it the other way around. As in, there are inline styles on some markup that you absolutely can’t remove, but you need to override what those styles are. This could be markup that is being inserted onto the page from foreign JavaScript or perhaps generated from the bowels of a CMS that you cannot control easily. Thank our lucky stars, we CAN override inline styles directly from the stylesheet. Take this example markup:

 
The inline styles for this div should make it red.
 

Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.

Comments

Wow, this is something I didn’t know but could definitely use. We have a few clients that edit their sites with Adobe Contribute and end up using non-approved colors or styles – so this would definitely help override that.

Agree, don’t like IE6… but try telling that to CIO/CTO’s across big corporations where the majority of users are on IE6.

This is exactly my feeling everytime I read someone dismiss IE6 outright. When a large corporation is unable/unwilling to upgrade their users – and those same users happen to be customers of that company (like… at a financial services company for example) then the % if IE6 can be drastically higher than stat sites often report.

I must agree with John and Greg. A statement like “then don’t use it” really doesn’t fly with me – because I am NOT using it- very few designers/developers do use it (for browsing that is, for testing , of course). However, we have clients that do use IE6. John’s example is 100% spot on. I have a large energy company as a customer and all of their employees are required/stuck with IE6 and it is going to be staying that way for at least another year or so. So, the “don’t use it” argument really doesn’t work.

It’s possible to have more than one browser installed on a system. Use IE6 for their ancient software systems and Chrome/Firefox for everything else. Also, it doesn’t matter if this trick doesn’t work in IE6…they’re used to seeing funky things on websites if they use IE6 regularly. So saying “doesn’t work in IE6” is just as annoying as saying “don’t use it.”

Simple. Tell them that it causes a loss of productivity because it doesn’t support time-saving features such as tabs. Make-up some BS numbers that “prove” that they’re losing $500,000 a year in lost productivity. Then offer your consulting services and upgrade their systems.

The most common reason that a corporation refuses to switch from IE6 is because they are stuck with some system or software that only works with IE6. The cost of upgrading the infrastructure is usually prohibitively high – definitely greater than the cost of lost productivity.

I don’t like the idea of BSing my clients for my own convenience. Recently I was looking at the stats for a site I surmised had a broad audience – a major musical event – and noticed that IE6 had a larger share than all versions of Firefox. Interpreting these results, it’s more important to support IE6 than it is Firefox. Bobby van der Sluis has a nice JS function that avoids inline styles; it’s not always possible, especially if using a library.

recently when saw google analytics of one of my sites. 40% of them were IE6 users. Its sad but we have to work with IE6 users in mind atleast for another 1 year

My stats for the last month? 66.49% using IE6 due to our primary client being a large corporation currently unwilling to upgrade. Not much you can do about that, and certainly not something you can just ignore…

I can’t really understand the decision of corporations/customers to use IE6. I respect their right to say, as the client, “We’re using X”, however. It just kind of confuses me – newer browsers are more secure and faster. What is the rationale behind sticking with IE6 other than “It’s what we use”?

It’s the whole big business mentality. Consider, for instance, the following: How many Oxford alumni does it take to change a lightbulb? “CHANGE?!”

The problem is that a lot of consumers arent web savvy like those who post on sites like this. They dont know to upgrade or how to upgrade. It sucks but its a fact of life. The best solution is to keep things simple.

I spoke to some friends working for big banking/law firms recently and they seemed to understand their companies have in house systems that won’t work outside IE6. My guess was that these might be browser based/intranet solutions that were built in such an backwards fashion that they just don’t function ‘properly’ in newer browsers.

Yeah, this is very much the case. It’s not so much that these corporations, even the slow moving and non-techie ones, want to use IE6, it’s that they’re largely locked in. There are a lot of pieces of business and enterprise software that are incompatible with non-IE6 browsers, usually bespoke software that these companies have invested heavily in and which are necessary to their day to day operations. Updating that software would require significant financial and time investment, and probably operational change as well, so it’s not feasible for them to upgrade. So you’re not going to see wholesale rollouts of updated browsers, and many of the companies may have to enforce a “don’t upgrade IE” policy to ensure all their employees have access to the relevant software. Sure, employees might be free to install alternative non-IE browsers on an individual basis, but if IE6 is the required company standard, most of them will just stick with that in the workplace.

I agree to the statement of your friends.
I am working for a company that got stuck in exactly this situation. A lot of online-live systems are visualized in IE6 for mainly two reasons:
1) No time for the developers to “adapt” to any other browser (even if they would like to)
1a) The Chiefs: “Well it works – so what? It’s Intranet only”. Rather than installing new browsers etc. It is a waste of time and IT secures, firewalls, … In other words never change a runnning system – unless big bang was there…
2) On top of this: Standardization, …
A no-no: different browsers: too much for the admins, they are already at their limit deploying all the standardized software packages. Instead of continuing:
As a web-designer I am working in DESPAIR county. The only HOPE: Sooner or later supreme court will rule.
Swallow it or stop signing contracts with customer that want IE6 – but please stop moaning. I can not stand it any longer…
At the end ist is always: “money talks and ……hit walks” Whether we like it or not is not the question! Can we change it? Or will time change it for us?
b r
unregistered

Источник

How to Override CSS Styles

Sometimes developers have to work with old codes, and it is when they run into some big problems, in particular, the inline style that cannot be overridden.

To prevent that problem, you should understand two concepts — the concept of Order and Inheritance.

Cascading order

The term “cascading” means hierarchical order in which different style sheet types interact when two styles come into conflict. The conflict occurs when two different styles are applied to the same element.

For these cases, there exists an order for style sheets according to their priority (4 has the highest priority):

• Browser Defaults.
• External Style Sheets (Linked or Imported).
• Internal Style Sheets (Embedded).
• Inline Styles.

So, it means that when a conflict arises between two styles, the last one used takes precedence. To make it clearer, you should remember these two rules:

Inheritance

HTML uses parent-child relationships. A child element will usually inherit the characteristics of the parent element unless otherwise defined. For example, look at the following code.

Example of using an element inheriting the style of the parent element:

html> html> head> style> body < color: blue; font-family: arial; > style> head> body> p> Lorem Ipsum is simply dummy text of the printing and typesetting industry . p> body> html>

Example of overriding the style of the

tag:

html> html> head> style> body < color: blue; font-family: arial; > p < color: red; font-weight: bold; > style> head> body> p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. p> body> html>

Internal Priorities

Now let’s see the list of the internal priorities (1 has the highest priority):

To get a better understanding, keep in your mind the following structure:

It means that if you have an element with a class and ID selector with different styles, it is the ID style that takes precedence. As an example, let’s look at this code.

Example of overriding CSS style with the ID selector:

html> html> head> style> #testid < color: blue; font-weight: bold; > .example < color: red; font-weight: normal; > style> head> body> p id="testid" class="example"> Lorem Ipsum is simply dummying text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. p> body> html>

As we can see, the Class was placed after the ID, but the ID still takes precedence. It’s only applicable if both the ID and the Class are used in the same element.

Now, let’s see an example, where an ID and a Class are used in two different elements.

Example of overriding CSS style with the Class selector:

html> html> head> style> #testid < color: #777777; font-style: normal; background-color: lightgreen; > .example < display: block; color: whitesmoke; font-style: italic; background-color: lightblue; padding: 20px; > style> head> body> div id="testid"> span class="example"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. span> div> body> html>

Here, the Class selector overrode the ID selector because it was the last used one. An ID selector only takes precedence over a Class selector if they are both used in the same element.

Let’s now see how we can make one class override another. If that class has a background-color of blue, and you want your to have a red background instead, try to change the color from blue to red in the class itself. You could also create a new CSS class that defined a background-color property with a value of red and let your reference that class.

Example of making one style override another:

html> html> head> style> .bg-blue < background-color: blue; > .bg-red < background-color: red; > style> head> body> div class="bg-blue bg-red"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. div> body> html>

! Important

An !Important declaration is a great way to override the styles you want. When an important rule is used on a style declaration, this declaration will override any other declarations. When two conflicting declarations with the !important rules are applied to the same element, the declaration with a greater specificity will be applied.

Let’s see how you can use the !important declaration to override inline styles. You can set individual styles in your global CSS file as !important overrides inline styles set directly on elements.

Example of overriding CSS style with the !important rule:

html> html> head> style> .box[style*="color: red"] < color: white !important; > .box < background-color: blue; padding: 15px 25px; margin: 10px; > style> head> body> div class="box" style="color: red;"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. div> body> html>

However, you should avoid using !important, because it makes debugging more difficult by breaking the natural cascading in your stylesheets.

Instead of using !Important, you can try the following:

1. Make better use of the CSS cascade.
2. Use more specific rules. By indicating one or more elements before the element you’ve selected, the rule becomes more specific and gets higher priority.
3. As a nonsense special case for (2), duplicate simple selectors for increasing specificity when you have nothing more to specify.

Источник