How to style a link in a paragraph

Question

I searched everywhere for a solution but didn't find anything..

I have this code in an HTML5 page

<div>
    <p class="title_paragraph">
    <a id="title" href="http://www.milanochamberorchestra.com">Milano Chamber Orchestra</a>
    </p>
</div>

The CSS is

.title_paragraph {
    color: #f89938;
    text-align: center;
    text-shadow: 0 0 12px rgba(230,160,55,0.6);
    font-family: 'Buda', cursive;
    font-weight: 100;
    font-size: 46px;
    z-index: 0;
    position: relative;
}

#title:link {text-decoration:none;} 
#title:visited {text-decoration:none;} 
#title:hover {text-decoration:none;}   
#title:active {text-decoration:none;}  

Why doesn't the link appear in the right color? It must be yellow/orange, not purple as it is!

Solution

Try this

.title_paragraph a{
    color: #f89938;
    text-align: center;
    text-shadow: 0 0 12px rgba(230,160,55,0.6);
    font-family: 'Buda', cursive;
    font-weight: 100;
    font-size: 46px;
    z-index: 0;
    position: relative;
}

#title:link {text-decoration:none;} 
#title:visited {text-decoration:none;} 
#title:hover {text-decoration:none;}   
#title:active {text-decoration:none;}  

Comments

[Pete]

it should be .title_paragraph a otherwise your link won't be styled

[zzzzBov]

a { color: inherit } might be all you need, but that may have unintended consequences when you can no longer distinguish links from their surrounding text.

[Mr. Alien]

This is invalid #title:link a -1, edit your answer and I'll take back -1

[Mr. Alien]

Stil, invalid, read the question properly, you are missing something ;)

[CuriousMind]

^^^What it is that I am missing?

[Mr. Alien]

You are selecting element a which is inside #title but #title is assigned to a to it should be #title:hover and so on

[CuriousMind]

^^^didn't notice that. thanks for pointing it out. this is my Aha! moment of the day