baig772
baig772

Reputation: 3488

How to call external CSS in presence of inline and internal?

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?

Upvotes: 4

Views: 2287

Answers (3)

Guffa
Guffa

Reputation: 700182

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.

Upvotes: 3

astro boy
astro boy

Reputation: 1430

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.

Upvotes: 2

Quentin
Quentin

Reputation: 943142

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.

Upvotes: 1

Related Questions