Help! :( I've run my coding through w3c validators and nothing pops up, it says it's all fine. I'm trying to use classes to apply different styles to different sections of elements. I'm trying to group elements e.g., links and lists into one class together to make my code neater. Trying to work out why my navigation class won't increase the font size. i also want it kerned slightly closer together, with a small amount of leading to increase the sizing between each line. Now, I've tried this a million ways already and whether I specify an element to a class or not it doesn't work. The only way it worked is when my coding was incorrect (I had grouped a number of elements into one class to specify them, but it was causing elements that I didn't give a class to to inherit the styling anyway - very annoying). Please help!!! It's driving me batty!!

my link as an example is here: http://wordpress.sorayafrench.com/wordpress/hmm/

CSS: /* generated by csscreator.com */
html, body{
margin:0;
padding:0;
background-color:#ff8f40;
}

#pagewidth{
min-width:100%;
}

#header{
position:relative;
height:100px;
background-color:#ff8f40;
width:100%;
}

#leftcol{
width:25%;
float:left;
position:relative;
background-color:#ff8f40;
}

#twocols{
width:75%;
float:right;
position:relative;
background-color:#ff8f40;
}

#rightcol{
width:10%;
float:right;
position:relative;
background-color:#ff8f40;
}

#maincol{
background-color: #FFFFFF;
float: left;
display:inline;
position: relative;
width:90%;
height:70%;
padding:20px;
}


.header{
font-family: arial,sans-serif;
font-size: 175%;
text-align: right;
color:#fb3f51;
}

.headeremail{
font-family: arial,sans-serif;
font-size: 100%;
text-align: right;
color:#fb3f51;
}

.navigation {
font-family: arial,sans-serif;
font-size:32px;
color:#fb3f51;
letter-spacing:-0.05em;
text-align: left;
text-decoration: none;
list-style:none;
}

a:link, a:visited, a:active, a:hover {
font-family: arial,sans-serif;
font-size:12px;
color:#fb3f51;
text-decoration:none;
}

.cv {
font-family: arial,sans-serif;
font-size: 12px;
text-align: left;
color:#000;
list-style:circle;
text-decoration: none;
}

.cvplace {
font-family: arial,sans-serif;
font-size: 12px;
text-align: left;
color:#000;
}

img {
border:none;
}

h2
{font-family: arial,sans-serif;
font-size: 20px;
text-align: center;
color:#fb3f51;
}

h3
{font-family: arial,sans-serif;
font-size: 18px;
text-align: center;
color:#fb3f51;
}

h4
{font-family: arial,sans-serif;
font-size: 14px;
text-align: left;
color:#fb3f51;
}




/* *** Float containers fix:
http://www.csscreator.com/attributes/containedfloat.php *** */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix{display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */



/*printer styles*/
@media print{
/*hide the left column when printing*/
#leftcol{display:none;}

/*hide the right column when printing*/
#rightcol{display:none;}
#twocols, #maincol{width:100%; float:none;}
}

Have you tried moving your .navigation definition below your definition of the normal link styles? CSS styles are read top to bottom, and applied in the same order.

Also, this is what your site looked liked to me, in case you are having browser or operating system issues: http://imgur.com/wZrIY

Have you tried moving your .navigation definition below your definition of the normal link styles? CSS styles are read top to bottom, and applied in the same order.

Also, this is what your site looked liked to me, in case you are having browser or operating system issues: http://imgur.com/wZrIY

I've tried it both ways with the same results. For some reason the font size seems to apply itself to the space between the words instead of the words themselves. I've tried setting the font size to EM instead, and also as a %. All with the same result...