Forum Moderators: phranque
I would ike to get advice on formatting the pages on the site to make the reading easier to the eyes and more enjoyable. Right now, I do not indent the start of each paragraph and the background is white (with text being black).
I want to experiment with changing the background and text color and maybe indent the beginning of each paragraph(?). Can anyone suggest a good background color/text combination for a site with loads of educational material (i.e., I do not want yellow or fluorescent text like in a video game website). Is CSS the best way to do this, and if so, where is the best place online to get such CSS code.
Any other ways I can get visitors (and myself!) to enjoy the visual layout of the page to make reading easier to the eyes?
If all you have is text, the simpler the layout the better.
That said, you MAY (ideally, at least) have to modify a large volume of pages once. If you have embedded formatting in your pages - remove it!
A basic page format can be done without any special markup in the text. Stick the the very basics of HTML - paragraphs, headings, lists, etc. Don't format for appearance - format by function. Format your pages like it 1995 and/or your reader is using Lynx (text-only HTML browser) to view them.
In fact, Lynx is a good way to test such a site, and is available for Windows. (There are other solutions to this, as well. I think there is a "text mode" in Opera?) If it looks good in Lynx (which ignores the style sheet) you are on the right track.
DON'T use font size tags, non-breaking spaces, etc. Don't do anything to format your text. Use only those tags that say "what it is", not those that say "how to display it".
You can then write a CSS style sheet specifying "here's how a paragraph should look, here's how an H1 should look, here's how a list should look, etc.
You can gain a major amount of flexibility by developing a set of ID and/or CLASS tags related to your site, that you can use to tag paragraphs and spans of characters. For example (pun intended), let's say your site has a lot of examples. Tag them with <P class='example'>. By specifying this tag in your CSS template, you can alter the appearance of all of your examples across your entire site.
It does take some work up front, but when adding new material it adds almost nothing to the level of effort to include the tags as you are writing.
Not sure exactly what you are referring-to when you ask for sources of "CSS codes". I think what you need is to learn the basics (and, really, for this, JUST the basics) of CSS. I prefer book learning myself, and there certainly are plenty of good books out on CSS. I imagine there are also many good websites that cover the same material.
I do think it's important, though, to learn the underlying concepts, rather than trying to find a few code snippets to drop-in.
You really only need to scratch the surface of CSS to do a bang-up job with your site. Much of the material on CSS that you will find is on using it to do some pretty "fancy" stuff that you probably don't have much of an interest in (such as expanding menus, etc.) and stretching CSS to do some things that it may not have really been intended to do. So, search for some BASIC tutorials and start plinking around. I think you will find that you get a lot of advantage from a small amount of effort if you stick to the basics.
use different sized text for important paragraphs, emphasise keywords by making them bold or another colour.
make use of headings and lists to break the page up
I have no idea what lynx is, or what ID, CLASS and so on are since I am still an amateur at this and who knows if that will ever change:-(
I never specified any font size (just used the default). I use ordered and unordered lists, headings, bold typeface etc...
jtara advises not to use font size tags, which I also thought was best.
Is the default font size okay to use and generally the most common on other sites like this?
For starting out with css, I assume its best to have an external file if all pages are largely identical?
Thanks.
I have no idea what lynx is
It's a text-only browser. It was originally written for use on Unix/Linux systems on a simple terminal or in a terminal window. As such, it is ideal for testing web pages intended to be used with CSS, as well as testing sites for accessibility by the disabled, as well as testing for accessibility by crawlers (Google, etc.) If it looks good in Lynx, most likely you are good to go on all of the above!
or what ID, CLASS and so on are
Probably about the only new HTML you need to know to convert your site to CSS.
I never specified any font size (just used the default). I use ordered and unordered lists, headings, bold typeface etc...
Perfect! You've done something very rare: you've followed the original intent of HTML. The key to CSS is seperating presentation from content. You've already done half the job, by leaving out the presentation. You will only need to add the ID and CLASS tags. And you can get started without even doing that. Just write a style sheet, and link it into your pages. You can do an awful lot without the ID and CLASS tags.
Most sites would have a big editing job to remove HTML formatting to work best with CSS.
Is the default font size okay to use and generally the most common on other sites like this?
That's a judgement call on your part. But you'll be specifying fonts in the style sheet, and so can easily experiment with variations by changing only the style sheet.
For starting out with css, I assume its best to have an external file if all pages are largely identical?
Yes. You will have to add a couple of lines to link-in the style sheet at the start of every file. Variations between pages/paragraphs is handled with the ID and CLASS HTML attributes.
ID lets you name a specific division, paragraph, etc. so that it can be referred-to in the style sheet. CLASS let's you name a class of divisions, paragraphs, etc.
Some examples of good class names might be:
EXAMPLE
PRICE
PRODUCT_DESCRIPTION
DISCLAIMER
If, for example, you have a site that is about products, each product probably has a price and a description (among other things). If you tag the prices and descriptions in the HTML, you can then write some code in the CSS style sheet to format prices and descriptions. Don't like what you see, or changed your mind? Change the style sheet, and - bam! - the formatting of ALL of the prices or ALL of the descriptions on your site change!
Again, CSS makes it a snap to change the background color for your entire site by changing one line of code.
----
BTW, here's a little non-CSS hint that can help you implement CSS, but has a host of other uses as well. Add a Server Side Include to the beginning and end of every file. Anything that you want to add to the beginning or end of every file can be put in the include file. This could include META tags, copyright notices (displayed or non-displayed - e.g. as a comment), disclaimers, etc.
OK, it's not QUITE so simple. You might want a couple of different includes near the top of each file. For example, say one at the beginning of the <HEAD> and one at the beginning of the <BODY>.
There are also some Apache modules that can be used to modify every page on your site without having to even edit them. Take a look at, for example, look at mod_publisher.
