Question

I’ve a CSS question. I’m using Rails 3.0 and trying to design a site of mine. I found this anoying problem previously also but now is the time to find a solution.

The situation: I set up a CSS like this:

*               {margin: 0;padding: 0;}
body            {background-color: #1d1122; font:12px/18px Arial, Tahoma, Verdana, sans-serif #fff; width: 100%;}
a               {color: blue; outline: none; text-decoration: underline;}
a:hover         {text-decoration: none;}
p               {margin: 0 0 18px}
img             {border: none;}
input           {vertical-align: middle;}
#wrapper        {width: 955px; margin: 0 auto;}

/* Header
-----------------------------------------------------------------------------*/
#header         {background: transparent url(../images/header.jpg) no-repeat; height: 413px;}
#navigation     {background: transparent url(../images/menu_bg.jpg) no-repeat; height:36px;}

/* Middle
-----------------------------------------------------------------------------*/
#middle         {width: 100%; height: 1%; position: relative;}
#middle:after   {content: '.'; display: block; clear: both; visibility: hidden; height: 0;}
#container      {background: transparent url(../images/main_bg.jpg) no-repeat; width: 100%; float: left; overflow: hidden;}
#content        {padding: 0 270px 0 0;}

/* Sidebar Right
-----------------------------------------------------------------------------*/
#sideRight      {float: left; margin-right: -3px; width: 313px; margin-left: -313px; position: relative;}

/* Footer
-----------------------------------------------------------------------------*/
#footer         {background: transparent url(../images/footer.jpg) no-repeat; height: 63px;}

/*Content
-----------------------------------------------------------------------------*/
#prediction_box {width:290px; height:200px; position:relative; background-color:#392b3f; border: 1px solid #000; margin: 25px 25px 40px 40px;}

When I start to write something on my index page, this wont be 12px Arial as I set in the body tag. The wierness starts if I wan’t to have the text in white.

body            {font-color:#fff; background-color: #1d1122; font:12px/18px Arial, Tahoma, Verdana, sans-serif #fff; width: 100%;}

If I use the font-color:#fff; than nothing happens. However if I use font: #fff 12px/18px etc… than suddenly the texts will be Arial 12px but still in black!

Can you explain how is this possible?

Looking forward your answears,

Kael

Answer 1

CSS does not define a font-color property. You’ll need to use the color property as so: color: #fff; in order for the foreground colour (font colour) to become white.