CODEWITHSUNDEEP
css
Maizere Pathak.Nepal
Maizere Pathak.Nepal

Reputation: 2413

CSS Cascading Order not working

Multiple Styles Will Cascade into One:

Styles can be specified:

inside an HTML element
inside the head section of an HTML page
in an external CSS file

Tip: Even multiple external style sheets can be referenced inside a single HTML document. Cascading order

What style will be used when there is more than one style specified for an HTML element?

Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:

Browser default
External style sheet
Internal style sheet (in the head section)
Inline style (inside an HTML element)

So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside the head tag, or in an external style sheet, or in a browser (a default value).Reference Here.

But the css here is working just opposite:

<head>
<style>
.thumbnail 
{
float:left;
width:110px;
height:90px;
margin:5px;
}
</style>
</head>

<img class="thumbnail" src="klematis_small.jpg" width="107px" height="100px">
<img class="thumbnail" src="klematis2_small.jpg" width="107px" height="80px">

The width and height of the img are taken from internal style sheet i.e one defined in the head tag

Upvotes: 2

Views: 737

Answers (4)

zachzurn
zachzurn

Reputation: 2201

Attributes inside of an html tag other than the "style" attribute are not part of css.

CSS cascading and priority rules are pretty complex, but here are the general priorities I go by which by no means covers everything.

General CSS Priority:

  1. Style tag applied directly to element using the style tag
  2. Style applied using elements ID
  3. Style applied using the elements class or tag name

CSS Includes or Style Tag Priority:

When it comes to including css in the page the priority goes from last to first. If these two styles were included in this sequence the body color would be red.

<style>

    body {
        background-color: blue;
    }

</style>

<style>

    body {
        background-color: red;
    }

</style>

Upvotes: 0

David Storey
David Storey

Reputation: 30394

I think you are mistaken. What you are using inside the img element are HTML attributes, not inline styles. Inline styles have the highest specificity (except for any CSS declarations denoted with !important which gain higher specificity), but html attributes have no such high specificity, as they’re not even CSS.

Upvotes: 1

FelipeAls
FelipeAls

Reputation: 22161

  • width and height in your img element are HTML attributes.

  • The reference you're quoting is about the HTML attribute style like:

    <img style='width: 1337px; height: 42px' (...)>

The former has low priority: it'll be styled by ANY CSS instruction that may apply I believe; it's HTML code. The latter has fairly high priority.

Upvotes: 4

David Nguyen
David Nguyen

Reputation: 8528

values of width and height should be numbers width="107" or % width="100%" and are attributes inline style would be style="width:107px"

Upvotes: 1

Related Questions