4

If in my webpage, i have all the three css defined for a div

  1. Inline
  2. Internal
  3. external

I know that browser first looks for 1)Inline then for 2)Internal and last, it looks for external css.

but i want to call only external css, how it would be done?? Can i do it through !important or there is any other way?

Improve this question
3
  • yes u can use !important Commented Jun 19, 2012 at 6:22
  • 1
    So you want to overcome all defined styles with external css then why don't delete inline css Commented Jun 19, 2012 at 6:23
  • There are times when you actually need to declare some style properties inline. Usually you declare general rules using an external CSS, and there are times when you need to expand/override the rule [through inline declaration] so the original declaration is intact. In my experience, I use inline css during a testing phase, to see the effect instantly, and when I'm satisfied, I transfer the style in the external stylesheet. Commented Jun 19, 2012 at 6:53

3 Answers 3

Reset to default
3

There is no difference between internal and external style sheets. Which styles are applied depends on:

  1. Specificity
  2. Declaration order

Inline styles are the most specific, then identity rules (#), then class rules (.), then element rules.

For two rules that have the same specificity, for example div .main and span.title, both rules apply, but the one declared last takes over when they specify the same properties.

The only way to circumvent the precedence is to use !important.

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

Comments

2

Best thing to do is to put everything into an external css file. If you must have inline styling then make sure you only have ones that aren't already defined in your external stylesheet. i.e Dont duplicate/override styling. e.g, if you have the following in your css file:

div { padding: 5px; }

then dont have the following inline styling.

<div style="padding-right:2px;" />

Just put it into the css file

div { padding: 5px 2px 5px 5px; }

Like you said, you can use !important if you have to override a styling for just one page that doesn't apply to the other pages in your site.

Improve this answer

3 Comments

To not override the settings [using inline styles] is the user's choice [depends on motive]. I, for one, override my declarations during a testing phase, to see the effect instantly, and decide from there if I will update my external CSS or leave the inline style inside the html. In some cases, I use inline to EXPAND the declaration, and later on transfer the expanded rule externally.
Its all right for testing but like you said, you should move it to an external css file once the html is cleaned up. This is really an effort to keep things clean and readable. Otherwise you will end up having inline styles being accumulated all over the place throughout the life of the site.
Yes, of course, for the sake of clean codes and maintainability that should be the discipline among all developers, unfortunately, most are TOO lazy to clean up.
1

1)Inline then for 2)Internal and last, it looks for external css.

No. There is no difference in priority between CSS included with <style> and CSS included with <link>.

but i want to call only external css, how it would be done??

You cannot cause CSS included via <style> or CSS included via the style attribute to be ignored.

Can i do it through !important or there is any other way?

You could apply !important to every rule and then hope that no rule included via <style> or style also has !important… but that way lies madness.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.