Question

Here i have some code from my website I’m making. I’m having trouble styling the links within css. I’m not sure why they won’t change. Also the reason I’ve used class is because i have this code repeated 4 times (don’t worry about why :P) Btw I’ve also tried putting the ‘a’ infront of .profileLinks that didnt work either 🙁

Here is the external CSS style sheet

#trends .profileLinks a:link{
    color:#0000FF;
    text-decoration:none;
    background: transparent;
}

#trends .profileLinks a:visited {
    text-decoration: none; 
    color: #0000FF; 
    background: transparent;
}

And here is the Html Code

<div id="trends">
    <h1> Trends... </h1>
    <a href="#" title="Profile Image"><img src="logo.png" alt="Profile Image" height="59" width="68"> </a>
    <a class="profileLinks" href="#" title="User's Profile Name"> Mark Fonacier </a>
    <a class= "commentLinks" onClick ="javascript:ShowHide('HiddenDiv')" href="javascript:;" ><i>Comment</i></a>
    <br/>
    <p>
        PostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPost
    </p>
    <a onClick ="javascript:ShowHide('HiddenDiv')" href="javascript:;" ><i>Comment</i></a>
    <div class="mid" id="HiddenDiv" style="DISPLAY: none" >
        <form method="post" action="">
            <textarea name="comments" cols="60" rows="2" placeholder="Enter your comments here..." maxlength="1000"> 
                </textarea>
            <input type="submit" value="Submit" />
        </form>
    </div>
    <br/>

Answer 1

This selector,

#trends .profileLinks a:link

will only work for child <a> tags of elements with a class of profileLinks, whereas your <a> are the elements with the class applied to it. Change it like so:

#trends a.profileLinks:link

Same goes for the other rule.