PDA

View Full Version : A CSS tip that can turn into a trick


GodKid
May 28, 2004, 12:25 AM
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! :o :o :o
Arch_Angel
May 29, 2004, 06:36 PM
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?
GodKid
May 31, 2004, 02:22 AM
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:


/* 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.....



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
owen
May 31, 2004, 12:40 PM
there is also


a {

}



some tags also inherite stuff from other tags.