Changing hyperlink color without overriding font - html

Question

I'm currently using this ccs:
/* A Free Design by Bryant Smith (bryantsmith.com) */
html, body {
text-align: center;
}
p {text-align: left;}
body {
margin: 0;
padding: 0;
background: #333333 url(images/img01.gif) repeat-x;
text-align: justify;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #666666;
background-color:#252F33;
}
*
{
margin: 0 auto 0 auto;
text-align:left;}
#header {
position:relative;
width: 680px;
height:99px;
margin-left:29px;
margin-right:21px;
background: url(header.png) no-repeat;
}
#page
{
margin: 0 auto 0 auto;
display: table;
height: 100%;
position: relative;
overflow: hidden;
background: #252F33 url(background.png) repeat-y;
width: 730px;
}
.title
{
position:relative;
left:30px;
top:22px;
text-align:left;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:32px;
font-weight:normal;
color:#252F33;
}
.subText
{
position:relative;
left:62px;
top:26px;
text-align:left;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
font-weight:bold;
color:#CEEAEE;
}
.articleTitle
{
text-align:left;
padding-left:25px;
padding-top:10px;
padding-bottom:10px;
color: #2C4969;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:24px;
font-weight:bold;
}
.articleContent
{
width:auto;
position:relative;
padding-left:50px;
padding-right:75px;
color:#101214;
text-align:left;
font-family:Arial, Helvetica, sans-serif;
line-height:18px;
}
.rightLinks
{
width: 102px;
font-size:11px;
font-weight:bold;
line-height:21px;
height:auto;
margin-right:-3px;
background-image:url(links_branch.png);
background-repeat:no-repeat;
text-align:right;
float:right;
}
.rightLinks a:hover
{
color:#667765;
}
.rightLinks .linkTitle
{
font-size:13px;
font-weight:bold;
margin-top:27px;
margin-bottom:32px;
margin-right:5px;
}
#bar
{
position:relative;
width: 680px;
height:57px;
margin-left:29px;
margin-right:21px;
background: url(bar.png) no-repeat;
}
.menuLink
{
height:36px;
width: 120px;
text-align:center;
float:left;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
color:#252F33;
padding-top:19px;
}
.menuLink:hover
{
background: url(bar2.png) repeat-x;
}
a
{
text-decoration:none;
color:#252F33;
}
#pageContent
{
width: 680px;
height:500px;
}
#footer {
width: 730px;
height:60px;
background: url(footer.png) no-repeat;
text-align:center;
font-size:10px;
color:#667765;
padding-top:34px;
}
#footer a
{
font-size:10px;
color:#667765;
}
html, body {
text-align: center;
}
p {text-align: left;}
and I want to change the hyperlink color. I tried the advice here: http://www.ssi-developer.net/css/link-colours.shtml of including this code:
<style type="text/css">
<!--
a:link {color: #000000; text-decoration: underline; }
a:active {color: #0000ff; text-decoration: underline; }
a:visited {color: #008000; text-decoration: underline; }
a:hover {color: #ff0000; text-decoration: none; }
-->
</style>
but including the code changed both the font and the margins. How can I alter the css that I'm using so as to alter the hyperlink color without altering the font or margins?

Answer 1

The best I can offer you is a sort-of answer, as there is nothing in the provided material that would affect your text in the manner described. I can however provide some cleaned up CSS.
/*BASIC STRUCTURE*/
* {
margin: 0 auto;
position:relative;
padding: 0;
}
html, body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
text-align:left;
color: #666;
}
body {
margin: 0;
background: #333 url(images/img01.gif) repeat-x;
background-color:#252F33;
}
/*TYPOGRAPHY*/
a {
outline: none;
color: #000;
}
a:active {
color: #0000ff;
}
a:visited {
color: #008000;
}
a:hover {
color: #ff0000;
}
/*SECTIONS*/
#header {
width: 680px;
height:99px;
margin: 0 21px 0 29px;
background: url(header.png) no-repeat;
}
... etc
There are a few things to note about the CSS above, which I'll go through as I assume you are at a beginner-level (excuse me if not!).
First of all, note that I have absorbed your second snippet into the original CSS file, which is where pretty much any and all of your CSS should be. The snippet you provided for styling your links looked like something placed in the <head>section of your HTML. While this does work, it is not ideal for working on your project in the future - keep all the CSS rules in one place, and in the order of specificity required.
Next, note how the text-alignrule is now only mentioned once, as part of the html, body rule. Again, this comes down to specificity but basically once I have declared that everything in my HTML and page body should be text-align: left, then there is no need to repeat that in any other rule unless I wish to change it (text-align: right). This applies to all CSS, it's where the 'Cascading' part comes from. If a rule is there simply to repeat an already defined style (eg. your p rule), then you can get rid of it.
Default stylings need not be mentioned - links default to text-decoration: underline on most browsers, so no real need to specify it unless you are changing it.
The Universal Selector (the * rule) is a powerful beast, and should be handled with care. Basically, any rule you put here will try to apply itself to every element on the screen. Use it to declare default styles or rules only. I have included position: relative as an example. Using it to delcare everything be centered within its parent element (margin: 0 auto;) may be unwise.
You might also look into placing a browser reset at the top of your code. This removes any styling applied to elements by various browsers and gives you 100% control over how your page looks. One of the most popular is the reset by Eric Meyer.
Lastly, see how I have broken up even this small amount of CSS into chunks? This gives your CSS much more structure and hence is much easier to read and code. I commonly use chunks like Basic Structure, Typography, Header, Elements, Footer, and use #import for my reset. I also use CSS shorthand where possible, also aiding readability.
As for your exact problem, clean up your CSS file, put all your CSS in one place, remove duplicated rules, understand and decide exactly what each text- or font- or margin rule is supposed to be doing, and you will probably arrive at the solution.
And read up on specificity.