CODEWITHSUNDEEP
css
user3651862
user3651862

Reputation: 31

Is it possible to have 2 different values for the same property in CSS?

When performing an example for the purpose of testing CSS I tried the following:

Adding 2 CSS Values to the same property is not taking effect even though when being used for a single selector.

p{
  color: green;
  font-family: verdana;
  font-style: italic;
  font-style: bold
}

As of the above code is not taking effect on text for making it Italics and Bold

Upvotes: 1

Views: 130

Answers (3)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201568

No, a property for an element always has a single value, though the value itself can have multiple parts, as in font-family: verdana, sans-serif, where verdana, sans-serif is the single value.

If a CSS rule contains several declarations with the same property name, the last one wins, as explained in @MarcAudet’s answer.

CSS declarations do not have cumulative effects in the sense that you could set, in a rule, foo: bar and then foo: abc, expecting this to result in a value that somehow combines bar and abc. For some properties, such cumulation might be desirable, but it’s not possible.

As explained by @Paulie_D, your practical mistake was to use a wrong property name. You need to use the correct font property name, such as font-weight for boldness, or, alternatively, use the font shorthand property:

p {
  color: green;
  font: bold italic 100% verdana;
}

In this approach, you need not remember the names of the component properties. On the other hand, you need to follow the rules for the order of the values (and for required values), and they aren’t really much simpler.

Upvotes: 0

Marc Audet
Marc Audet

Reputation: 46785

You can write a CSS rule and repeat a property declaration.

However, the value actually used is the last one listed.

For example:

p {
    color: green;
    color: red;
}

In this example, p could have the color red since the second line over-rides the previous property declaration.

Reference: The relevant CSS specification is known as the cascading order:

http://www.w3.org/TR/CSS2/cascade.html#cascade

Upvotes: 2

Paulie_D
Paulie_D

Reputation: 115045

font-style: bold should be font-weight:bold

https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight https://developer.mozilla.org/en-US/docs/Web/CSS/font-style

Upvotes: 7

Related Questions