Red Dragon's CSS Workshop Part one: Fonts

Welcome to my CSS workshop! This is part 1, and discusses fonts. Changing their colours, size, faces etc.

Integrating CSS in HTML

To integrate CSS in html, you use CSS information is given. It is recommended you put the CSS info within the HEAD tags.

Basics of CSS

CSS is quite simple. It is quite English-like and easy to learn. CSS can do a lot of things, and most professional web designs use CSS.

The format of CSS is:

tag.class {

property: value(s);

}

class is optional, and is quite advanced. There are also IDs, but that's also quite advanced.

Anyways, using this format, you can format any html tag you wish (as long as it is a valid, not made up html tag). For now, we'll be formatting the body. Therefore tag will be body. CSS is not case sensitive.

body {

}

Fonts

Now finally onto the fonts. OK, so, within the tag we would put the properties concerning fonts and their values.

Changing Colour

To change the colour of a font, the property is: color: ; The value can either be a colours name (that is supported by the browser), or a "hex" colour ( #rrggbb ). I will put a colour name and hex chart on here soon. So if we wanted red, we could say: color: red; or color: #ff0000;

So far..

So here's what we have so far (entire html)

Hello!

Changing the face

The face of the font is the font's image. e.g. Arial, Comic Sans etc. Please note that it is best to use common fonts, like Arial rather than rarer fonts, like Architext. The value can have different fonts, seperated by commas. This works like this: "If I cant find the first font, ill use the second, etc". You can also use font styles. These are: sans-serif, serif, monospace, cursive and fantasy. These are also known as "generic fonts". So, if we wanted a monospace font we could use Courier New and Monospace. The property for this is: font-family: ; So: font-family: "Courier New", Monospace; Please note that CSS values that have spaces, must be surround by quotes " or ".

Font Size

The size is simple. The property is: font-size: ; size can be measured in different units. The main one is: pt, for point. This is the one you would use in most office programs. This text is 12pt. You don"t have to put the measurement at the end, but it may vary the size depending on the browser's default unit. For 15 pt text: font-size: 15pt; Simple.

The final example...

Ok, so here it is, all you have learnt from this tutorial, I hope you understood it! Please post any comments in the "Social Forum".

HELLO!

The next tutorial will discuss more font styles, including bold, italic and underline.