I’m creating my first website and am the point that it’s functional, and now, I’d really like for it to look good.
As a newbie to the process, it’s the first time that I’m really using CSS and I think that it would be helpful to get some style advice in conjunction with CSS. In particular, on my site I’ll have different types of messages such as “Correct!”, “Explore!!!” and “Incorrect…” (it’s got lots of quizzes/school stuff).
I guess my question, then, is whether anyone has advice on a CSS type site that could give me some ideas about the best way to accomplish this, for example, graphics? combination of font-type/graphic? If the site had examples of “good” font uses, that would be even better.
You cold do it with nice background colors on the messages, maybe rounded corners and the like, so CSS itself gives quite a few options. But it would be helpful if you supplied some examples, or some graphics, of what you are thinking of. Say a page of text or something. Otherwise, the question is a bit too open ended (at least in my view).
I am going to assume that the messages would be there with or without css?
CSS cant be used to determine weather a quiz answer is correct or not.
however if your site is working to the level that the message: “Correct” is being displayed aledy CSS can give so many styling options, they are almost impossible to list here.
the key is this tho:
when themessage is output make sure it has a css class like such:
<p class="message’> I am an interesting message!!!<p>
now it becomes up to you what you DESIRE it to look like ( at this poit is not so much CSS, as art direction that is needed) once that’s settled… let say for example you designed the message with a bold, inset text and a island bg, actually lets give individual answers their own bg ( one island the other a mountain) you can place rules to create that in your css as such:
.message { color:#ccc; text-shadow: 1px 1px 1px #000; font: uppercase bold 200%/1.2 Helvetica, Arial, san-serif; width:(width of image)px}/simple rough embossed look/ #limits{background:url(images/island.jpg) center top #(some blueish color) no-repeat;} #derivatives{background:url(images/mountains.jpg) center top #(some greenish color) no-repeat;} (prepare the images so they are of equal width and fade to a corresponding color at the bottom…)
<p class=“message” id="limits>I am an interesting message about limits!!!</p>
<p class=“message” id="derivatives>I am an interesting message about derivatives!!!</p>
Thats the basic foundation. There is of course tons more you could do, especially progressive enhancement using cs3 but that part is really up to the taste of the designer.
Look at csszengarden for a alage example of how the same HTML code was embellished in different ways by hundreds of different designers
