Results 1 to 4 of 4

Thread: A CSS tip that can turn into a trick

  1. #1
    Join Date
    Apr 2003
    Posts
    1,389
    Rep Power
    0

    Default A CSS tip that can turn into a trick

    hehehehehhehe ;D

    OK... many ppl overlook this but remember that there are three MAIN types of CSS styles...

    1 - in-line (where the style is defined in the same line as the object it applies to)

    2 - embedded (defined in the <HEAD> tags) [imported CSS goes here as well and functions like embedded styles)

    3 - external (residing somewhere else and linked to the HTML file)


    Now also remember that there's a little thing called precedence.. meaning one kind will "override" another... the order from most to least import is as it's listed with in-line being most important/powerful.

    Now the thing is.. precedence no only happens inter-type (between the types) but because of sequential processing there is INTRA-type precedence as well.

    This means that an HTML tag override like a: hover will only affect the code ABOVE it ... so if you ever wanna give your webmaster a MAJOR headache... just shift some dependent code around ;D


    eg:
    a: link, a:visted and a:hover work together - shift em around and see what happens ;D


    edit: - I just found t=out that precedence extends to even the very LINES within each CSS class!

  2. #2
    Join Date
    Apr 2003
    Posts
    13,269
    Rep Power
    34

    Default Re:A CSS tip that can turn into a trick

    What you saying GK? That the order of the css tags makes a differene in what is displayed?

    Does this go for all 3 style types?

  3. #3
    Join Date
    Apr 2003
    Posts
    1,389
    Rep Power
    0

    Default Re:A CSS tip that can turn into a trick

    yes for all 3.. but the difference is most readily seen in the reverse order of power.. that is you'll see the diff in external stylesheets EASY EASY.. embedded a little less easy and in-lines almost never, but still possible.

    Important to note is that it's not the type of stylesheet that introduces the vulnerability its the way in which people write the diff stylesheets. For instance, people tend to forget about precedence in external sheets and drop their classes anywhere, whereas with inline classes they are forced to write what will be applied to the object.. so the rules of precedence become much more difficult to break.

    For instance...

    here's some of my code I tested it on... this is an externally linked sheet:

    Code:
    /* CSS Document */
    a:link {
       font-family: Verdana, Arial, Helvetica, sans-serif;
       color: #0066FF;
       text-decoration: none;
       font-size: xx-small;
    }
    a:visited {
       font-family: Verdana, Arial, Helvetica, sans-serif;
       text-decoration: none;
                    font-size: xx-small;
                    color: #0066FF;
    }
    a:active {
       font-family: Verdana, Arial, Helvetica, sans-serif;
       font-size: xx-small;
                    color: #006666;
    }
    a:hover {
       font-family: Verdana, Arial, Helvetica, sans-serif;
       font-size: xx-small;
       color: #FF6600;
       text-decoration: underline;
    }

    the above displays all links a particular color, and all links are displayed without an underline. Now.. BECAUSE the hover class is LAST then ALL links will have an underline when you mouse over, however.....

    Code:
    a:link {
       font-family: Verdana, Arial, Helvetica, sans-serif;
       color: #0066FF;
       text-decoration: none;
       font-size: xx-small;
    }
    a:hover {
       font-family: Verdana, Arial, Helvetica, sans-serif;
       font-size: xx-small;
       color: #FF6600;
       text-decoration: underline;
    }
    a:visited {
       font-family: Verdana, Arial, Helvetica, sans-serif;
       text-decoration: none;
                    font-size: xx-small;
                    color: #0066FF;
    }
    a:active {
       font-family: Verdana, Arial, Helvetica, sans-serif;
       font-size: xx-small;
                    color: #006666;
    }
    Now the underline will only appear on links which are neither active nor visited... This weakness is seen just as evidently in linked and embedded CSS.

    Try it. ;D

  4. #4
    Join Date
    Feb 2003
    Posts
    3,184
    Rep Power
    0

    Default Re:A CSS tip that can turn into a trick

    there is also
    Code:
    a {
    
    }

    some tags also inherite stuff from other tags.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •