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 4 of 4
  1. #1
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Multiple Font Classes

    Just wondering... say I want to have two different styles to text on a page - I'll say for this example - bold and standard. Now the only thing I want to be different between the two types of text is the font weight... so how do I do that without specifying the other attributes again? eg.

    <style type="text/css">
    p.textstylenormal {
    text-align: center;
    font-family: verdana;
    font-size: medium;
    color: #ffffff
    }

    p.textstylebold {
    text-align: center;
    font-weight: bold;
    font-family: verdana;
    font-size: medium;
    color: #ffffff
    }
    </style>

  • #2
    New Coder
    Join Date
    Mar 2005
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You can specify attributes to a group of elements and then add/change attributes to each element individually afterwards. That way, you don't have to repeat the same attributes over and over again.

    Code:
    <style type="text/css">
    p.textstylenormal, p.textstylebold{ 
    text-align: center; 
    font-family: verdana; 
    font-size: medium; 
    color: #ffffff
    }
    
    p.textstylebold { 
    font-weight: bold
    }
    </style>

  • #3
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah thanks, yup that's what I wanted.

  • #4
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'd do this: Set your standard font rules in the body tag - then apply the class to the exceptions, as below -

    Code:
    body {
    text-align: center; 
    font-family: verdana; 
    font-size: medium; 
    color: #ffffff
    }
    
    p.textstylebold { 
    font-weight: bold;
    }
    Kind Regards,

    Gary


  •  

    Posting Permissions

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