June 6, 201511 yr So, this is probably a really basic thing, but I'm new to this so..... In my style sheet I set all footer text color to one colour, but when I made some of it into links it automatically became blue - how can I make sure it stays yellow i.e. overide whatever's setting the colour?I've read around a bit online & I think maybe something like....... a.link {color:#E5B81B; text-decoration:none; font-weight:normal;} a.visited {color:#000; text-decoration:none; font-weight:normal;} a.hover {color:#6A2E88; text-decoration:underline; font-weight:normal;} I only really want those colours to apply to the links in the footer but I'm not sure where to put it in the css.& what exactly would I need to put in the HTML? If it's useful here's my css so far: body { text-align: center; color: #08076D; font-style: italic; font-family: Arial, Helvetica, sans-serif; background-image: url("../images/code.jpg"); } .container { width: 960px; margin: 0 auto; min-height: 750px; text-align: left; box-shadow: 5px 5px 15px 0px #2D2D2D; } .header { width: 960px; float: left; margin: 0px; height: 200px; text-align: center; } /* .navigation { width: 960px; margin: 0px; (background-color: #F2F2F2;) height: 50px; text-align: center; } */ .mainContent { width: 954px; float: right; margin: 0px; min-height: 594px; padding: 3px; font-family: Arial, Helvetica, sans-serif; font-size: 15pt; color: #08076D; } .MainFooter { width: 100%; font-size: 16pt; } .MainFooter-col { display: inline-block; width: 33.3%; margin-right: -0.5em; color: #E5B81B; height: 40px; font-size: 16pt; background: #07076E; } .u-alignLeft { text-align: left; padding-left: 2px; } .u-alignCenter { text-align: center; } .u-alignRight { text-align: right; padding-right: 7px; } TIA Edited June 6, 201511 yr by Jeffsk
June 6, 201511 yr Author OK, so I figured out that it doesn't matter where in the style sheet I put this: a.link { color:#FFF; text-decoration:none; font-weight:normal; } a.visited { color:#6A2E88; text-decoration:none; font-weight:normal; } a.hover { color: #000; text-decoration:underline; font-weight:normal; } & after more reading around I thought that I should be able to apply more than one class to a div, like this: <footer class="MainFooter"> <div class="MainFooter-col u-alignLeft"> Jeff, 2015 </div> <div class="MainFooter-col u-alignCenter a.link a.visited a.hover"> <a href="#">Top</a> </div> <div class="MainFooter-col u-alignRight a.link a.visited a.hover"> <a href="contact form">Contact Us</a> </div> </footer> but it doesn't seem to do anything! Any idea where I'm going wrong anyone? Edited June 6, 201511 yr by Jeffsk
June 7, 201511 yr use this style a:link { color:#FFF; text-decoration:none; font-weight:normal; } a:visited { color:#6A2E88; text-decoration:none; font-weight:normal; } a:hover { color: #000; text-decoration:underline; font-weight:normal; } instead of this a.link { color:#FFF; text-decoration:none; font-weight:normal; } a.visited { color:#6A2E88; text-decoration:none; font-weight:normal; } a.hover { color: #000; text-decoration:underline; font-weight:normal; } and in ur html use this <footer class="MainFooter"> <div class="MainFooter-col u-alignLeft"> Jeff, 2015 </div> <div class="MainFooter-col u-alignCenter"> <a href="#">Top</a> </div> <div class="MainFooter-col u-alignRight"> <a href="contact form">Contact Us</a> </div> </footer> the styel i mentioned will style all links in the website if you want to style specific links under each div do this <div class="MainFooter-col"> <a href="home.php">Home</a> <a href="home.php">List</a> <a href="home.php">Download</a> <a href="home.php">Files Used</a> <a href="home.php">Documentation</a> </div> <div class="client-header"> <h1><a href="home.php">CRUD Application</a></h1> </div> .MainFooter-col a:link, .MainFooter-col a:visited { color:red; }
June 7, 201511 yr Author @sash_oo7 thanks for your response but..... you wrote use this style & then gave me an exact copy of my css you then wrote and in ur html use this & again gave an exact copy of my html.....I'm a bit confused here Also, I don't understand what the all the php stuff is about
June 7, 201511 yr a:link { color:#FFF; text-decoration:none; font-weight:normal; } a:visited { color:#6A2E88; text-decoration:none; font-weight:normal; } a:hover { color: #000; text-decoration:underline; font-weight:normal; } this is not exact copy of your css .. look carefully .. u used a.link .. i used a:link and html also is not same you added a.link in class ..which is not the right thing to do so i removed those <footer class="MainFooter"> <div class="MainFooter-col u-alignLeft"> Jeff, 2015 </div> <div class="MainFooter-col u-alignCenter"> <a href="#">Top</a> </div> <div class="MainFooter-col u-alignRight"> <a href="contact form">Contact Us</a> </div> </footer> the php one is just a snippet of code i copied from somewhere to give u example <div class="MainFooter-col"> <a href="#">Home</a> <a href="#">List</a> <a href="#">Download</a> <a href="#">Files Used</a> <a href="#">Documentation</a> </div> <div class="client-header"> <h1><a href="#">CRUD Application</a></h1> </div> .MainFooter-col a:link, .MainFooter-col a:visited { color:red; }
June 7, 201511 yr Author ok, I see what you mean about a.link & a:link, tho i'm not sure what the difference means....the 1st is a class & the 2nd is.....?whatever the difference is, it worked. hmmm, a lesson for me there.....pay attention Jeff!!Thanks for your help
June 8, 201511 yr To clarify, :hover is a CSS selector. Where as .hover is merely a class name. Edited June 8, 201511 yr by jakdothtml
June 8, 201511 yr To clarify, :hover is a CSS selector. Where as .hover is merely a class name. To be pendantic they are both selectors, '.' is a class selector ':' is a psuedo class selector. MDN article on selectors: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors Edited June 8, 201511 yr by rbrtsmith
Create an account or sign in to comment