CODEWITHSUNDEEP
htmlcss
Manoz
Manoz

Reputation: 6587

CSS: What happens when style is assigned multiple times?

I am asking this strange question because I encountered a problem with CSS in my code.

Summary

I had a button that I was styling with css.

.button-phone
{
    width: 15px;
    background: url('/img/icon_phone.png') no-repeat;
    font-size: 10.5px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    display: inline-block;
    width: 14px;
    height: 14px;
   *margin-right: .3em;
   line-height: 14px;
   vertical-align: text-top;
}

Here, the width is set to 15px and 14px in a single style code.

My question

I want to know if assigning width, or any other property twice, will work? And if it works, then which one will be applied?

In my case button was set to some width and I don't know which width was set. How will I know which one is set?

Upvotes: 0

Views: 2299

Answers (4)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123377

In this specific example the last property overrides the same property previously defined

Anyway from a general point of view there could be some exceptions, e.g.

div {
    font-size: 12px;
    font-size: 2svh;
}

the property used here will be font-size: 12px; if the browser doesn't understand the svh unit value, so in this example the property applied depends on specific browser support. Another exception occurs if the first property is defined inside a rule with an higher specificity than the second one.

Upvotes: 4

n00dle
n00dle

Reputation: 6043

In the above example, the rules will be taken in order of appearance, so the last one will be used. In general though, this is not the only way to decide.

If you assign a style to a general element, and a more specific selector is used elsewhere that contains a different value, CSS will take the more specific selector, regardless of order.

For example:

 div#mydiv {
   width: 300px;
 }

 div {
   width: 600px;
 }

Here, the width of the div with id="mydiv" is taken, so 300px is used for it, overriding the later, but less specific 600px rule.

A general idea of the specificity order is below:

tag < class < id

So classes override general tags, and ids override those.

Upvotes: 2

Terry
Terry

Reputation: 5262

Css stands for cascading style sheet, which means that your browser will interpret your css from top to bottom.

You can put width 20 times in a row, only the last version will be used, it will assign the values, but each time it comes across another width property, the value will be overwritten. So basically, the last time it encounters the width-property, that value will be used in the final version of your page.

Also, based on which browser you're using, there are some ways to find out what style is applied:

  • Chrome: press F12 and an inspector will open (or you can right-click on the page and choose "inspect element" which will jump to the element you clicked on)
  • IE: also press F12, a new window will open and you can inspect the HTML/CSS on that page
  • Opera: right-click on the page and choose "inspect element"
  • Firefox: right-click on the page and choose "view page source"
  • Safari: right-click on the page and choose "view source"

Then it's up to you to navigate to element you wish to know more about.

Upvotes: 1

Pacha
Pacha

Reputation: 1526

The one you assigned last (in your case, width:14px) is used

Upvotes: 5

Related Questions