6

I've noticed that there are a couple of similar questions and answers at SO already, but let me clarify my specific question here first:

I've got lecture slides which states like this:

http://mindinscription.net/webapp/csstest/precedence.PNG

To be frank, I haven't heard of this rule of css precedence myself, and I googled to find something with similar topic but not quite like that : here

To have a test myself, I've made a test page on my own server here

After running it on FireFox 3.6.3, I am sure it does not show the way as it should be, according to the statement in lecture slides:

  • imported stylesheet ? am I doing it wrong? I cannot see its effect using FireBug
  • it says that embedded stylesheet has a higher precedence over linked/imported stylesheets, however, it doesn't work, if I put the linked/imported tag AFTER that.
  • inline style vs html attributes ? I've got an image where I firstly set its inline style to control the width and height, then use direct html attributes width/height to try modifying that, but failed...

Below is the source code :

<html>
<head>
    <style type="text/css">
        #target
        {
            border : 2px solid green;
            color  : green;
        }
    </style>
    <link rel="stylesheet" href="./linked.css" type="text/css" media="screen" />
</head>
<body>
    <div id="target">A targeted div tag on page.</div>

    <img src="cat.jpg" alt="" style="width : 102px; height : 110px;" width="204px" height="220px" />
</body>
</html>

Can any experienced CSS guys help me figure out if the slide is correct or not?

Frankly speaking, I am puzzled myself, as I can clearly see some other "incorrect" statements here and there amongst the slides, such as JavaScript is on client-side (how about server-side JavaScript?) and "Embedded styles are in the head section of a web page "(what the heck? I am not allowed to put it inside the body tag?)

Sorry about this silly question, the exam is on TOMORROW, and I now see a lot of things to think about :)

4
  • @Nick Yuck, you don't want to touch that slide then... Did you mean: amok? </spellcheck> ;)
    – deceze
    Jun 18, 2010 at 2:59
  • 5
    That's a JPEG picture of 933 KB with only black text on a yellow background? You definitely should use PNG for that! Jun 18, 2010 at 3:00
  • Your slide definitely needs an adjustment, the CSS style determining your background color has run a mock*, spelling eludes me still :( Jun 18, 2010 at 3:02
  • @Marcel Korpel : Thanks for this, I just used MS paint to get the pic but forgot to change it to PNG :) Jun 18, 2010 at 3:04

2 Answers 2

2

First, with imported stylesheets they mean stylesheets embedded using the @import rule.

Second, a few lines below that explanation in the CSS 2.1 spec there's an explanation of the cascading order. Other parts of the spec might be useful for your exam, too. Good luck.

Update: A bit of googling resulted in:

etc.

3
  • Thanks for the links, definitely helpful. Jun 18, 2010 at 3:15
  • I always forget to put the + among keywords :( Thanks for the links, now I can tell why the slide would get such a weird statement to me :) I hope in exam it wouldn't get too much on this tricky topic. Jun 18, 2010 at 3:34
  • @Michael: the +? You mean when doing a Google search? You can just enter spaces in the search field. Jun 18, 2010 at 3:38
2
  • The properties by <style></style> are being reassigned by the selector in linked.css.
  • There is no element with id="div" for imported.css.
1
  • sorry, my mistake. But I am happy to see it doesn't change the final appearance of the page. Yeah, I am thinking the "precedence" is actually whichever comes the "latest" applies. But... that is not in the slide :( Jun 18, 2010 at 3:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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