CSS precedence order? My lecture slides are correct or not?

Posted by Michael Mao on Stack Overflow See other posts from Stack Overflow or by Michael Mao
Published on 2010-06-18T02:54:18Z Indexed on 2010/06/18 3:03 UTC
Read the original article Hit count: 308

Filed under:
|
|

Hi all:

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:

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 :)

© Stack Overflow or respective owner

Related posts about html

Related posts about css