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

  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