Two styles for H1 text etc..

Discussion in 'CSS' started by ian_ok, Mar 12, 2006.

0
  1. #1
    I've been trying to get two styles for my H1 text with the following in my style sheet:

    h1.two
    {
    font-family: Tahoma;
    font-size: 12px;
    display: inline;
    }
    h1
    {
    font-family: Tahoma;
    font-size: 14px;
    color: #33CC33;
    text-align: center;
    display: inline;
    }


    Yet when I try this:
    <h1 class="two">blah blah blah </h1> I still get the H1 style, can I do this?

    Ian
     
    ian_ok, Mar 12, 2006 IP
  2. Arizona Web Design

    Arizona Web Design Guest

    Messages:
    134
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    0
    #2
    try switching it to this

    h1
    {
    font-family: Tahoma;
    font-size: 14px;
    color: #33CC33;
    text-align: center;
    display: inline;
    }
    h1.two{
    font-family: Tahoma;
    font-size: 12px;
    display: inline;
    }

    I personally always put my universal CSS on the top of the file, because CS will automatically class all H1 elements like that first, then you can specificy classes for exceptions to the rule.
     
    Arizona Web Design, Mar 12, 2006 IP
  3. ian_ok

    ian_ok Peon

    Messages:
    551
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #3
    No it still shows as H1 - What you are saying is put the style in the html file and that with over take the style in the sheet.
     
    ian_ok, Mar 12, 2006 IP
  4. ian_ok

    ian_ok Peon

    Messages:
    551
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Have done this and it works fine....Thanks.

    <LINK href="../css2.css" type="text/css" rel="stylesheet">
    <style type="text/css">
    H1 {font-family: Tahoma; font-size: 12; text-align: left; display: inline; color: black;}
    </style>
     
    ian_ok, Mar 12, 2006 IP
  5. iamben

    iamben Active Member

    Messages:
    116
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    73
    #5
    Hey - I'm no css expert, so I did test this for you! If you just wanted to use the external style sheet, change your code to this:

    h1{
    font-family: Tahoma;
    font-size: 14px;
    color: #33CC33;
    text-align: center;
    display: inline;
    }

    h1.two{
    font-size: 12px !important;
    }

    'two' will inherit all the properties from the main class, but the '!important' will mean the size is changed accordingly.

    ben
     
    iamben, Mar 12, 2006 IP
  6. Corey Bryant

    Corey Bryant Texan at Heart

    Messages:
    1,126
    Likes Received:
    51
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Or give them each a class 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
h1
{
font-family: Tahoma;
display: inline;
}
h1.one
{
font-size: 14px;
color: #33CC33;
text-align: center;
}
h1.two{
font-size: 12px;
}
</style>
</head>

<body>
<h1 class="one">Testing</h1>
<h1 class="two">Testing</h1>
</body>

</html>
    Code (markup):
     
    Corey Bryant, Mar 12, 2006 IP
  7. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #7
    It's not necessary to use the !important. The only thing changing is the font-size. Are you sure you're not getting the change? I can't not get different sizes. Look carefully for typos and syntax errors in and around the problem children.
    
h1 {
    display: inline;
    font-size: 1.5em;
    }

h1.two {
    font-size: 1em;
    }
========
<h1>hi there</h1>
<h1 class="two">hi there</h1>
    Code (markup):
    cheers,

    gary
     
    kk5st, Mar 12, 2006 IP
  8. Arizona Web Design

    Arizona Web Design Guest

    Messages:
    134
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    0
    #8
    odd, when I checked my code in a browser is worked for me :(
     
    Arizona Web Design, Mar 12, 2006 IP
  9. ian_ok

    ian_ok Peon

    Messages:
    551
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Thanks for all your tips......

    As mentioned before I've got it to work so I'm happy with doing it that way.

    Ian
     
    ian_ok, Mar 13, 2006 IP