Footer connecting to portion of HTML/CSS code

I am having a problem where some of my HTML/CSS code is being connected to my footer, when in fact they're supposed to be separate/independent of each other. The footer is supposed to remain gray (#383838) and not turn into a link. With the code being how it currently is (shown below) the footer is becoming my YouTube icon's link and the footer is white and when I hover over it, it highlights green and links to my YouTube account.\[code\]<!DOCTYPE html><html><head><style>body {background-color: #000000;}h1 {color: #FFFFFF;}p {color: #FFFFFF;}.links {color: #383838;}footer {color:#383838;font-size:12px;font-family:Arial;}a{text-decoration:none}a:link {color: #FFFFFF}a:active {color: #383838}a:visited {color: #FFFFFF}a:hover {color: #383838}</style></head><body> <p> <iframe allowtransparency="true" scrolling="no" frameborder="no" src="https://w.soundcloud.com/icon/?url=http%3A%2F%2Fsoundcloud.com%2F&color=orange_white&size=32" style="width: 32px; height: 32px;"></iframe> <a href="https://www.facebook.com/"target="_blank"> <img src="https://smartbalance.com/sites/all/themes/smartbalance/images/megaMenu/icon_social_media_facebook.png"/></a> <a href="https://twitter.com/"target="_blank"><img src="https://www.gov.mb.ca/templates/en/template_images/twitter.png"/></a> <a href="http://youtube.com/"target="_blank"><img src="http://www.baa.org/Images/CommonImages/social_icon-youtube.png"/> </a> </p> <p style="line-height: 15px"> <footer> ? 2013 </footer> </p></body></html>\[/code\]If you could please help me figure out why my footer is now being linked to my YouTube account.Thank you!
 
Back
Top