www.webdeveloper.com
Results 1 to 8 of 8

Thread: separate styles

  1. #1
    Join Date
    Feb 2003
    Location
    Somerset, UK
    Posts
    17

    separate styles

    Hiya

    I was just wondering how I would create and link to 2 different style sheets which have got different 'hover' link characteristics (i.e. one may have 4pt font and the other may have 2 pt font)?

    Hope this makes sense and thanks for your help in advance

    regards

    Jamie

  2. #2
    Join Date
    Nov 2002
    Location
    Essex / Kent, UK
    Posts
    89
    Hi,

    Firstly, you only need one style sheet. You can do it by giving the different links different classes i.e.:

    <code>
    <style type="text/css">
    a.link1:hover {
    font-weight:900
    }
    a.link2:hover {
    text-decoration: none
    }
    </style>
    ...
    ..
    .
    <a class="link1" href="link.htm">Link Text</a>
    <a class="link2" href="link.htm">Link Text</a>
    </code>


  3. #3
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571
    Just a note of caution: 4pt and 2pt fonts will be too small.

  4. #4
    Join Date
    Feb 2003
    Location
    Somerset, UK
    Posts
    17
    Thanks a million for both your speedy replies - they are great (and re. the 2 v 4 pt font sizes, that was merely to illustrate that I was trying to achieve a different hover characteristic for each)

    Cheers again

    Jamie

  5. #5
    Join Date
    Feb 2003
    Location
    Somerset, UK
    Posts
    17

    further to my first question.....

    I was just wondering if I can take it one stage further and, for example, use the following as part of a linked sheet so that I can change sitewide rather than individual pages.

    I have tried to do it myself but am getting a bit exasperated!

    The styles are:

    a.one:link {color: #993300; font-family: Georgia, Palatino, Times New Roman; font-size: 20px; text-decoration: none; font-weight: bold}
    a.one:visited{color: #993300; font-family: Georgia, Palatino, Times New Roman; font-size: 20px; text-decoration: none; font-weight: bold}
    a.one:hover {color: #5565BA; font-family: Georgia, Palatino, Times New Roman; font-size: 20px; text-decoration: none; font-weight: bold}

    a.two:link {color: #993300; font-family: Georgia, Palatino, Times New Roman; font-size: 12px; text-decoration: none; font-weight: bold}
    a.two:visited{color: #993300; font-family: Georgia, Palatino, Times New Roman; font-size: 12px; text-decoration: none; font-weight: bold}
    a.two:hover {color: #5565BA; font-family: Georgia, Palatino, Times New Roman; font-size: 12px; text-decoration: none; font-weight: bold}

    a.three:link {color: #0000ff; font-family: Georgia, Palatino, Times New Roman; font-size: 10px; text-decoration: none; font-weight: bold}
    a.three:visited{color: #0000ff; font-family: Georgia, Palatino, Times New Roman; font-size: 10px; text-decoration: none; font-weight: bold}
    a.three:hover {color: #0000ff; font-family: Georgia, Palatino, Times New Roman; font-size: 10px; text-decoration: none; font-weight: bold}

    So really I guess I am wondering how to incorporate it into a style sheet and then link to it for different links?

    Thanks in advance (again!!!)

    Jamie

  6. #6
    Join Date
    Mar 2003
    Location
    in a reinforced cardboard box floating over the ocean
    Posts
    25

    Thumbs up Re: further to my first question.....

    Originally posted by Jamie
    I was just wondering if I can take it one stage further and, for example, use the following as part of a linked sheet so that I can change sitewide rather than individual pages.

    I have tried to do it myself but am getting a bit exasperated!

    The styles are:

    a.one:link {color: #993300; font-family: Georgia, Palatino, Times New Roman; font-size: 20px; text-decoration: none; font-weight: bold}
    a.one:visited{color: #993300; font-family: Georgia, Palatino, Times New Roman; font-size: 20px; text-decoration: none; font-weight: bold}
    a.one:hover {color: #5565BA; font-family: Georgia, Palatino, Times New Roman; font-size: 20px; text-decoration: none; font-weight: bold}

    a.two:link {color: #993300; font-family: Georgia, Palatino, Times New Roman; font-size: 12px; text-decoration: none; font-weight: bold}
    a.two:visited{color: #993300; font-family: Georgia, Palatino, Times New Roman; font-size: 12px; text-decoration: none; font-weight: bold}
    a.two:hover {color: #5565BA; font-family: Georgia, Palatino, Times New Roman; font-size: 12px; text-decoration: none; font-weight: bold}

    a.three:link {color: #0000ff; font-family: Georgia, Palatino, Times New Roman; font-size: 10px; text-decoration: none; font-weight: bold}
    a.three:visited{color: #0000ff; font-family: Georgia, Palatino, Times New Roman; font-size: 10px; text-decoration: none; font-weight: bold}
    a.three:hover {color: #0000ff; font-family: Georgia, Palatino, Times New Roman; font-size: 10px; text-decoration: none; font-weight: bold}

    So really I guess I am wondering how to incorporate it into a style sheet and then link to it for different links?

    Thanks in advance (again!!!)

    Jamie
    try copying that whole thing into a txt document, then saveing it as a txt file or css (doesnt matter)

    then adding <link rel=stylesheet type=text/css href=URL> to each page you want it to be in.
    "meep?"
    'Every year, 7300 people die from meeping, please do not meep.'
    "MEEP MEEP MEEP MEEP MEEP MEEP MEEP MEEP MEEP MEEP MEE----- *dies*"

  7. #7
    Join Date
    Nov 2002
    Location
    XYZZY - UK
    Posts
    1,760
    Out of interest within CSS Times New Roman should be written:

    Code:
    "Times New Roman"
    Because it has white space within the font name.

  8. #8
    Join Date
    Feb 2003
    Location
    Somerset, UK
    Posts
    17
    Thank you very much - it all makes so much more sense now!

    Jamie

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles