CODEWITHSUNDEEP
css
Ayman Morsy
Ayman Morsy

Reputation: 1419

what is the difference between Declared Values and Specified Values?

The difference between Declared Values and Specified Values confused me .

at first I thought the Declared Values written by author

and then it filter out to one value "winning value" this winning value becomes the Cascaded Values

but latter the spec defining Specified Values

The specified value is the value of a given property that the style sheet authors intended for that element.

so this make me rethink about Declared Values is it the default value for element ? if yes it should be one default value as I know but it looks there are multiples values and cascading rules applied to get one value "winning value".

Upvotes: 2

Views: 127

Answers (1)

Alohci
Alohci

Reputation: 82986

Probably a simple example will help. Suppose we have this html

<!DOCTYPE html>
<title>My demo</title>
<style>
  #foo { color:orange }
  .content { color:red }
  div { color:blue }
</style>
<div class="content">Lorem ipsum dolor sit amet</div>

then there are three rules.

#foo { color:orange }

does not apply to our div because it does not have the id "foo". orange is not a declared value for the color property of our div.

.content { color:red }

applies to our div because it has class "content". red is a declared value for the color property of our div.

div { color:blue }

also applies to our div because it is a div element. blue is also a declared value for the color property of our div.

Now the cascade is applied. The origin and importance of both the declared value declarations are the same so specificity is used to choose between two. The rule .content { color:red } has the higher specificity so it provides the "winning" value.

red is therefore the specified value for the color property of our div.

Upvotes: 3

Related Questions