A crash course in the absolute basics of CSS-based design.

View this page's html file and css file

Work that text.

We will start off with some simple changes to the default text used on your page. The text is often the first thing a person decides to modify on a page. This is because so much can be said, dimply in the letters themselves. A font can cast an air of comedy, and air of seriousness, and even an air of horror, size can denote emphasis, and color can highlight, and hide. We will look at setting your font, your color, the size of your text, and it's basic style.

font - color - size - style

Getting your font on.

Now we will modify the global text settings for your site. To do this we will first tell the browser that we want to address the BODY element, which encompasses the entire page (thus we will define the "global" font characteristics), by typing the following lines in Notepad.

body {

}

Now we will change the default "font-family" to Arial, Helvetica and sans-serif. We will do this by pulling the characteristic "font-family", defining it as "Arial, Helvetica, sans-serif", and closing the line with ";".

body {
font-family: Arial, Helvetica, sans-serif;
}

Adding this line tells the browser to (if available) use the Arial typeface as your page's default font, and if it is not available to move down the list, etc. It is possible to create your own "font-family" simply by listing the fonts you would like to be used (usually similar is style for best results), or you can pick from the popular lists of:

Arial, Helvetica, sans-serif
"Times New Roman", Times, serif
"Courier New", Courier, mono
Georgia, "Times New Roman", Times, serif
Verdana, Arial, Helvetica, sans-serif
Geneva, Arial, Helvetica, sans-serif

However, remember that what fonts are available on your system may not always be available on your viewer's system, which is why it is best to stick to one of these lists, each of which covers 99.9% of systems browsing today. Also note how multi-word font names must be enclosed in quotes, if not, you will break your CSS.

top

Give your words some color.

Next we will change the font color. Here you can state any number of simple colors (red, yellow, green, black) or be more specific and use the number ("#" sign included) below your desired color here. First pull the characteristic "color" and then define it as either a color word, or as one of the numbers (including the "#"). Making our text blue would look like this.

body {
font-family: Arial, Helvetica, sans-serif;
color: #000066;
}

top

Set your stature.

Font size is important, setting it too big will make your page huge, while setting it too small will make it harder to read. Also, it is not true that all fonts are the same size at the same "font-size", so you should change your font's size to fit accordingly. Thankfully, this is as easy as pulling the "font-size" characteristic and defining a number (followed by "px"). To set our font to 12 (pixels, not points, so guess and check until you get the hang of it) we will pull and define as such.

body {
font-family: Arial, Helvetica, sans-serif;
color: #000066;
font-size: 12px;
}

top

Add a little style.

Perhaps you want all the font on your site to be italics. If you do, do it here. By pulling the "font-style" characteristic you can set your font to either "inherit" (it takes the state of it's parent), "italics", "oblique" (the same as italics for all intents and purposes) or "none" (just if you want to be sure it is normal). We are going to leave this alone since the default is"inherit" (which is the same as "normal" at this point) and we don't need the extra line of code. But if you wanted to make all your text "italics" (which we do not), you would type this.

body {
font-family: Arial, Helvetica, sans-serif;
color: #000066;
font-size: 12px;
font-style: italic;
}

top