Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: classes

  1. #1
    New Coder
    Join Date
    Aug 2002
    Location
    Jacksonville, NC
    Posts
    48
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question classes

    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 {...


    ???????????????
    Genius has to have a starting point

  • #2
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    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.

  • #3
    Regular Coder
    Join Date
    May 2002
    Location
    Helsinki, Finland
    Posts
    231
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: classes

    Originally posted by shashgo
    Hey all

    I dont understand this.

    .
    .

    Similarly
    p.cls {...

    vs

    .cls {...


    ???????????????
    There are differences. For instance :
    Code:
    <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 :
    Code:
    
    <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?
    Zvona
    First Aid for
    Web Design

  • #4
    New Coder
    Join Date
    Aug 2002
    Location
    Jacksonville, NC
    Posts
    48
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?
    Genius has to have a starting point

  • #5
    Regular Coder
    Join Date
    Oct 2002
    Posts
    380
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

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