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 7 of 7
  1. #1
    New Coder
    Join Date
    Jan 2005
    Posts
    31
    Thanks
    1
    Thanked 0 Times in 0 Posts

    How does applying custom CSS class to a tag work

    Hi
    This is about using a custom class for <a> tags and getting it working.

    The custom class definition is
    ----------------------------
    CustomLink:link {font-family:Arial;font-size:12pt;color:#664400}
    CustomLink:active {font-family:Arial;font-size:10pt;color:#ff8802}
    CustomLink:visited {font-family:Arial;font-size:10pt;color:#996633}

    I am setting CSS propety for <a> tag to the class mentioned above. The name of the class is CustomLink. When i set this class to 'CustomLink' on <a>
    like : <a href="http://www.google.com" class="CustomLink">Google</a>
    This works fine. I don't understand the concept as to how it works.

    Does 'CustomLink' get Aliased to 'a' when used with in <a> tag. I thought decalartion as one given below should work rather the the 'CustomLink' definition.

    A:link {font-family:Arial;font-size:12pt;color:#664400}
    A:active {font-family:Arial;font-size:10pt;color:#ff8802}
    A:visited {font-family:Arial;font-size:10pt;color:#996633}

    What is the rule and how is it expected to work. Can anyone let me know how it basically works or point me to approriate link which talks about this kind of setting.

    I am totally new to CSS and i am in learning phase.

    Thanks,
    Vijay Venkataraman
    -----------------------------------------------------------------------------------------------------
    Knowing the concept is the right way to learn than trying to get a quick answer for the question in hand.
    -----------------------------------------------------------------------------------------------------

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    setting a class to the link and then using a:link or a:hover or w/e after will define only elements with that class, while the other way a:link or a:hover or similar will define all elements matching that so for example i can have a paragraph tag and define the css for ALL paragraph tags (except for ones that have classes or ids or names) like this
    Code:
    p {width:300px;height:200px;color:#000099;}
    or i can do something like this with the html being
    Code:
    <p class="mytext">text here</p>
    and then defining it in css like this
    Code:
    .mytext p {width:300px;height:200px;color:#000099;}
    only the paragraphs with class "mytext" will be formatted the way i defined them in the css, for more on css go to http://www.w3schools.com

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Selectors

    The issue at hand is all about selectors. The general format of a style rule is:
    Code:
    selector {properties}
    The selector determines to which elements the properties are applied, and can be a combination of a number of elementary selectors and combinators.

    A thorough tutorial on selectors can be found at Maxdesign: Selectutorial; start straight away with the first topic (under "Rules") to learn about the various selectors.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #4
    New Coder
    Join Date
    Jan 2005
    Posts
    31
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi

    _Aerospace_Eng_ : What i understand is that if i had set the styles on link as
    A:link {someStyle}
    A:visited {someStyle}
    This would have globally affected all links in the pages.

    While using the 'CustomLink' would affect the links selectively where ever i am using them.

    Hope my understanding is correct.

    _Aerospace_Eng_ and ronaldb66 : Thanks for the clarification and the links. I will give a look at them.

    Have a good day.

    Thanks,
    Vijay Venkataraman

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    yep thats what i was saying

  • #6
    Senior Coder chilipie's Avatar
    Join Date
    Jul 2004
    Location
    Shrewsbury, UK Age: 16
    Posts
    1,117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_
    Code:
    .mytext p {width:300px;height:200px;color:#000099;}
    Wouldn't that be:
    Code:
    p.mytext {width:300px;height:200px;color:#000099;}

  • #7
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes, it would.

    ".mytext p" would target all paragraphs within any element of the class "mytext".


  •  

    Posting Permissions

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