SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Oct 2004
    Location
    NYC
    Posts
    306
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Styling Links...HELP PLZ

    Hello,

    I have a paragraph class, and I would like this class to style the URL Links. Here is my class:

    PHP Code:

    .paragraph
        
    {
        
    font-familyArialHelveticasans-serif;
        
    font-size12px;
        
    font-style:normal;
        
    font-variantnormal;
        
    color#000000;
        

    I don't know how to declare the links within this class so when I apply this class, I would have options to assing color and font size for the links.

    Appreciate all the help.

    Thanks.

  2. #2
    SitePoint Enthusiast pixelita's Avatar
    Join Date
    May 2007
    Location
    Houston, Texas USA
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First of all make the name shorter, .para!

    When modifying the link pseudo-classes, be careful when doing things like changing font size or font weight. The effect can be jarring. You'd set them up like this:

    a.para, a.para:link {
    [your style elements here]
    }

    a.para:visited {
    [your style elements here]
    }

    a.para:active {
    [your style elements here]
    }

    a.para:hover {
    [your style elements here]
    }


    Read more about it here:
    http://www.w3.org/TR/CSS21/selector....seudo-elements

    HTH.
    Visit our web design site at http://www.pixelita.com
    Visit Serbia's biggest and best internet forum at
    http://www.burek.co.yu

  3. #3
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
     .paragraph
        {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-style:normal;
        font-variant: normal;
        color: #000000;
        }
    This code will colour anything with class="paragraph" assigned to it.

    Usually though I'd declare most of those on the body so that it formats all the document and then adjust things accordingly.

    Code:
    body {
      font-family: arial, helvetica, sans-serif;
      font-size: 85%;
      color: #000;
    }
    You don't need to declare font-style or font-variant as normal unless you're applying it to an element that doesn't have that as default.

    Now for the links. I'll usually start off by declaring a default colour for links for the entire site

    Code:
    a, a:link {
      color: #009;
    }
    a:hover {
      color: #C00;
    }
    This will set all links in your page to blue with a red hover. If you then have an instance of a link which you want to be different then you can change that accordingly, usually using an id or class on it's parent.

    For example, say you have the following HTML

    Code:
    <div id="footer">
    <p>Designed by <a href="#">Dave Woods</a></p>
    </div>
    You could then change the style of this link by using

    Code:
    #footer a, #footer a:link {
      color: #000;
    }
    This will change anylinks inside the div with an id of footer to black but leave the hover as red.

    You could also change the colour of the hover by using

    Code:
    #footer a:hover {
      color: #00C;
    }
    This would change the hover in the footer to blue. Obviously you're not just limited to colours but for the purpose of this example it should demonstrate enough to get you started.

    Hope that helps?

  4. #4
    SitePoint Addict
    Join Date
    Oct 2004
    Location
    NYC
    Posts
    306
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Pixelita,

    for you help. Can you please clear this first line that you published :

    a.para, a.para:link {
    [your style elements here]
    }

    I don't follow a.para, a.para

    Thanks.

  5. #5
    .* draziW tnioPetiS *. bronze trophy
    Join Date
    Jun 2004
    Location
    "Then I figure the most good good guy will win."
    Posts
    1,666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In reference to pixelita's first post, a.para is for applying a class to the href...

    Based on my understanding of your question, if you do this:

    Code HTML4Strict:
    <p class="paragraph">blah<a href="#">ddd</a>blah</p>

    ...then I would suggest you do this:

    Code CSS:
    /*
    ** Remember, links have to be in this order in your stylesheet:
    ** 		a:link
    ** 		a:visited
    ** 		a:visited:hover
    ** 		a:focus
    ** 		a:hover
    ** 		a:active
    */
    p.paragraph a,
    p.paragraph a:link {
    	color: red;
    	text-decoration: none;
    }
    p.paragraph a:visited { color: blue; }
    p.paragraph a:visited:hover,
    p.paragraph a:hover { color: green; }
    p.paragraph a:active { color: yellow; }
    Last edited by mhulse; Sep 6, 2007 at 08:49.

  6. #6
    .* draziW tnioPetiS *. bronze trophy
    Join Date
    Jun 2004
    Location
    "Then I figure the most good good guy will win."
    Posts
    1,666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is a working example... only tested via Firefox 2.x on XP.


Bookmarks

Posting Permissions

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