CSS Problem link(a) attribute controlling text color [closed]_问答_开发者

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center. Closed 9 years ago.

I have a problem with my CSS. Here it is:

The CSS for Div main: .main {background: #E6E6E6; padding: 2em; heigh:100%;} The CSS for links: a { color: #8D0D19; }

The HTML for main: <div class="main"> <h3>Welcome</h3><br /> ...More Content Here.... <h3><a href="new.php">New</a></h3>

The color for the link is burgundy. When a link is present on the page, the whole text on the page becomes burgundy.

I also added color attribute to .main but it didn't work. Also I tried making a, .main a but that also didn't work.

So what should i do to keep my text black and only the links burgundy?

BTW I dont know CSS very well. If you can reccomend me some website, training or book for beginning CSS, that would be great.

Thanks.

Update: Heres the whole CSS code:

* {    margin: 0; }

html { height: 100%; width: 100%; }

body {    height: 100%;    width: 100%;    margin: 0;    padding: 0;    border: 0;    background: #E6E6E6;    font: 13px/15px Verdana,Arial,Helvetica,sans-serif;  }

.wrapper {    min-height: 100%;    height: auto !important;    height: 100%;    margin: 0 auto -42px; }

.header { height: 70px;   text-align: left; background: #1A446C; colo开发者_C百科r: #D4E6F4; }

.header h1 { padding: 1em; margin: 0;} .header a {position: absolute; right:0; top: 0px; text-align: right; padding: 1.25em; margin: 0; color: >#D4E6F4; text-decoration:none;}

.main {color: #000000; background: #E6E6E6; padding: 2em; heigh:100%;} .main a {color: #8D0D19;}

.footer {    height:10px; text-align: center; padding: 7px;    background: #1A446C; color: #D4E6F4;    position:absolute; bottom:0; right:0; left:0; }

img { border: none; }

table, tr, td, tr {    border-collapse: collapse;    vertical-align: top;    text-align: left;    font: 13px/15px Verdana,Arial,Helvetica,sans-serif; }

table.bordered tr th, table.bordered tr td { border: 1px solid #000000; }

And Here's the HTML Code:

<html>    <head>
    <link href="style.css" rel="stylesheet" type="text/css" />    </head>    <body>
       <div class="wrapper">
        <div class="header">
            <h1>Header</h1><h2><a href="login.php?logout=1">Logout<a/></h2>
                </div>
          <div class="main"><h3>HTML Text Here....</h3><br /><br /> <h3><a href="new.php" >New</a></h3> </div> </div>    <div class="footer">
           <p>Copyright &copy; 2011</p>
       </div>    </body> </html>

Update: Test it here: http://jsfiddle.net/hhgGE/

Update:

The bug was caused by a typo in the .header <a/> closing tag - should have been </a>.

Here is a live link: http://jsfiddle.net/RF9cC/1/

Previous:

Sounds like the color is being inherited from somewhere else or your not closing the </a> tag properly? You could do something like:

.main{
color:#000;
}

.main a:link{
color:#8D0D19;
}

That should style all the text in the DIV .main as black but any link as the burgundy.

A good (and in-depth) reference to building websites is this e-book by Robert Schifreen: http://www.the-web-book.com/browse/index.html

It has detailed information on pretty much all there is to know regarding web design.

From what little you've posted, I cant see anything that could be wrong with the css. I'd double check the html to make sure you're properly closing your tags.
EDIT : looking at your update, there's a closing a tag in there that looks like <a/> (line 5, the logout link). it should be </a>. This fixes the problem.

As for learning CSS, I can't go past W3 Schools. Basically tells you everything every CSS element does, what attributes they have, what browsers it works with, etc. And some nice tutorials, too.