PDA

View Full Version : classes

shashgo
11-05-2002, 03:37 AM
Hey all

I dont understand this.

<style>
a.linker:link {font-weight: bold; color: blue; text-decoration: none;}
a.linker:visited {font-weight: bold; color: blue; text-decoration: none;}
a.linker:hover {font-weight: bold; color: red; text-decoration: none;}
a.linker:active {font-weight: bold; color: green; text-decoration: none;}
</style>

VS.

<style>
.linker:link {font-weight: bold; color: blue; text-decoration: none;}
.linker:visited {font-weight: bold; color: blue; text-decoration: none;}
.linker:hover {font-weight: bold; color: red; text-decoration: none;}
.linker:active {font-weight: bold; color: green; text-decoration: none;}
</style>

Both these stylesheets cause the same effects when used as in

<a class="linker" href="blah.com">BLAH</a>


So what is the different in saying
a.linker:{...
and
.linker:{...

Similarly
p.cls {...

vs

.cls {...


???????????????
jkd
11-05-2002, 03:54 AM
Really none, however some of those pseudo-classes can be applied to more than just links.

:active and :hover in particular can be used to awesome effects in standard compliant web browsers such as Mozilla or Opera. Using "a" in front ensures that they will only be applied to links if somehow say a form element was also assigned that class.
Zvona
11-05-2002, 11:11 AM
Originally posted by shashgo
Hey all

I dont understand this.

.
.

Similarly
p.cls {...

vs

.cls {...


???????????????

There are differences. For instance :

<style type="text/css">
p .cls {font:normal 14px arial,serif;color:#000000;}
.cls {font:normal 12px arial,serif;color:#20A020;}
</style>
Used with mark-up :

<body>
<p class="cls">This paragraph has class-definition "cls". Also
<span class="cls">this part of the paragraph has class-definition "cls" but it's in span element</span>.
Notice the difference?</p>
Will cause effect :
This paragraph has class-definition "cls". Also this part of the paragraph has class-definition "cls" but it's in span element.Notice the difference?
shashgo
11-05-2002, 04:01 PM
Zvona

So if I guess the difference is that i I define a style
.cls {...}
I can use it more universally with any tag by using it in n a span tag

But if I define a style as
p.para {...}

then the style para is only incorporated in a <p class="para">

but I can still use something like <p class="cls"> or <h1 class="cls">

Am I right?
Kiwi
11-05-2002, 10:56 PM
Pretty much. You can get caught up on the cascade effects at times. From Zvona's example, you can see that if you have a p.cls class, this takes precedence over the .cls class. Just be aware of how specific elements will pick up styles. If you're not sure, use Mozilla's DOM inspector and see what the css style rules and computed style for any element are.