Class for hyperlink styling in css not working

Question

I have general hyperlink styling in my css and trying to create a new class to modify the font size. It's not working and I can't figure out what I'm doing wrong.

 a:hover, a:link, a:visited, a:active { font-size: 16px; color: black; font-family: 'Open Sans'; text-decoration: underline; } a.audio, a.audio:hover, a.audio:link, a.audio:visited, a.audio:active { font-size: 14px !important; color: black; font-family: 'Open Sans'; text-decoration: underline; }

 Audio by <a class='audio' href=linkaddress target=_blank>name</a>

Answer 1

Since your Stack Snippet works, I can't pinpoint exactly why your hyperlink styling isn't working but what I think is happening is something is probably taking dominance over what you're declaring. I think that you should try a couple of things:

1) Open your developer tools in your browser. If you are on the elements tab, you can select your class and see what styling is being applied to it. Here is an example of mine:

(what my audio class looks like)

As you can see the font-size I was getting for the audio class was 14px. However, the font-size I declared for all links was crossed out. It isn't applied because the styling for the audio class is more specific.

If you open up your developer tools, it can give you more insight on why your styling isn't being applied. Maybe something is overriding your styling.

2) Try and put your styling to the end of your CSS file and make sure that if you have other stylesheets it is the last stylesheet that is mentioned. Since CSS is cascading, things that are declared last take more dominance.

Hope this helps!! @_kcodes