Setting different font sizes in css sheet

Hi,

A question from a complete novice struggling with css: I have a set of keywords at the top of my page, in a very small font and the same colour as the page background, to make them invisible to page viewers, but visible to search engines.

However I obviously want the ordinary page text under it to be in a different font. How do I code that, and can I put the second piece of coding into the same css file? The stylesheet tag I have for the small text is below. Thanks for any help. John.

p {font-family: Verdana, Arial, Helvetica, Sans-Serif; color: #FFFFFF; font-size: 25%; }

You could use classes to produce the desired effect:


div.invis {
display: none;
}

p {
/* Stuff to style your normal paragraphs. */
}

.....

<div class="invis">
<p>keywords, go, here</p>
</div>

<p>This is where all of the visible text would go!</p>


display: none is a more effective way of doing what you were attempting - basically, anything between the div tags with a class of invis will not appear on your page at all.

Please note that some search engines will "blacklist" your site if they find you using hidden keywords...

Please note that some search eninges will "blacklist" your site if they find you using hidden keywords...
Not to mention the massive annoyance to screenreaders, text browsers, legacy browsers, etc... (although I guess in most cases "display: none" wouldn't show up in screen readers, right?) Just an opinion, but this just kinds of rubs against the whole standards-based-semantic-web thing...

Thanks chaps,

I think on reflection I'll leave that small font tag as it is and just use html font tags to format the visible text. That 'invisible' tag probably would be frowned on by some search engines. Cheers.