2

About to have an exam and I am going through the previous exam that we have been given.

The question:
When two or more style sheet rules apply to the same element, which of the following types of rules will take precedence?

a. Any declaration with browser origin
b. Normal declaration with user origin
c. Normal declaration with author origin
d. Document-level declaration

So would the answer be c or d? I am guessing d because c is a normal declaration and not important but I can't really get a definitive answer anywhere

Cheers

Improve this question
12
  • what makes you to not try first ?
    – NullPoiиteя
    Commented Nov 18, 2012 at 6:56
  • 1
    What is a document-level declaration? Is it referring to an inline style?
    – BoltClock
    Commented Nov 18, 2012 at 6:58
  • @BoltClock document level declaration means levels of declaring multiple stylesheets...so it will pick up styles from last linked stylesheet
    – Mr. Alien
    Commented Nov 18, 2012 at 6:59
  • 1
    @Mr. Alien: I don't think so. That's an author stylesheet, which means it falls into category c.
    – BoltClock
    Commented Nov 18, 2012 at 7:01
  • @BoltClock Now you are confusing me, but what right is the styles are picked up from last declared link for stylesheet...
    – Mr. Alien
    Commented Nov 18, 2012 at 7:02

3 Answers 3

Reset to default
2

The answer is Document-level declaration, it will be applying styles to the element which are declared in the last linked stylesheet

Test case

HTML

<html>
    <head>
        <link href="stylesheet1.css" rel="stylesheet" type="text/css" />
        <link href="stylesheet2.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div>hello<!-- Color applied will be green --></div>
    </body>
</html>

CSS

stylesheet1.css

div {
    color: red;
}

stylesheet2.css

div {
    color: green;
}
Improve this answer
12
  • Am 100% sure, it will pick up the styles from the stylesheet which is linked last
    – Mr. Alien
    Commented Nov 18, 2012 at 6:56
  • 1
    @NullPointer: What? You can't lock answers.
    – BoltClock
    Commented Nov 18, 2012 at 6:59
  • @NullPointer haha thanks and (Daniel) he meant that I am sure or not... ;)
    – Mr. Alien
    Commented Nov 18, 2012 at 7:00
  • 1
    @BoltClock its wasnt about the locking answer
    – NullPoiиteя
    Commented Nov 18, 2012 at 7:00
  • Those are external - the precedence rules on that are 1 - inline 2 - document-level (in the head of the document) 3 external The other rules referred to are in this order 1 - Important declaration of user origin 2 - Important declaration of author origin 3 - Normal declaration of author origin 4 - Normal declaration of user origin 5 Any declaration with browser origin
    – user1667474
    Commented Nov 18, 2012 at 7:10
1

The exam question is incorrect, as exam questions often are. The expression “Document-level declaration” is not a proper term, and it has multiple interpretations. Moreover, it uses the word “normal” without specifying its meaning, but probably you are right in guessing that it means “without !important”.

The answer is “undecided”, since “a” includes a browser style sheet rule with !important, which trumps “b” and “c” (and “d” unless it means something that may have !important), but it would be incorrect to say that “a” generally trumps the others. Edit: The specifications might be read so that browser style sheets cannot have !important or that it does not have an effect in them, but at least Firefox html.css uses !important (obscurely).

My bet is that the author of the exam did not think of the possible of an !important rule in a browser style sheet, and you are therefore supposed to answer “c”.

Edit: Option “d” is there probably just to confuse students, since if it means a style sheet embedded in an HTML document, it’s a special case of author style sheel, and being embedded does not affect the cascade rules (among style sheets embedded with style and linked with link, it is the placement of the HTML element that matters, not the embedded vs. linked thing).

Improve this answer
4
  • In the uni course the context of document-level means the style is in the head of the document
    – user1667474
    Commented Nov 18, 2012 at 7:50
  • The author is aware of important, the answer is not a as that rule comes after normal declarations (number 5 - Any declaration of browser origin) which normal declaration of author origin trumps (it is number 3 on that particular set of rules above number 4 which is b in the multi-choice)
    – user1667474
    Commented Nov 18, 2012 at 7:54
  • @user1667474: In that case, it is ambiguous with c, because a style in the head of the document is part of an author stylesheet. If it's in <style> tags, it's an internal author stylesheet, whereas if it's linked in a file, it's an external author stylesheet.
    – BoltClock
    Commented Nov 18, 2012 at 7:56
  • I think I'll check with the Lecturer as there is bound to be a similar type of question. Thanks for all your input
    – user1667474
    Commented Nov 18, 2012 at 7:59
0

You are reffering the CSS Cascading.

So, from the link

Style sheets may have three different origins: author, user, and user agent.

and the precedence between them is as follows

By default, rules in author style sheets have more weight than rules in user style sheets. Precedence is reversed, > however, for "!important" rules. All user and author rules have more weight than rules in the UA's default style sheet.

The cascading order is defined by ascending order of precedence

user agent declarations
user normal declarations
author normal declarations
author important declarations
user important declarations

The CSS specificity Rules later come into picture.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.