CodeDragon circular icon

CodeDragon might not work properly for you...

CodeDragon is designed to work with Google Chrome and Firefox, and a few features of CodeDragon have been found not to work properly with other web browsers. To make sure you get the best experience when using CodeDragon, please download the latest version of Google Chrome or Firefox and try again. You can install Google Chrome for free here, and Firefox here.

Or, you can continue anyway.

CSS: Making text prettier

CSS/1

Your default paragraph and heading fonts are quite boring. It's finally time to make them more exciting!

Written by Pal Kerecsenyi

CSS: Making text prettier

Ad Ethical + impactful advertising with tiny prices  Advertise on CodeDragon 
Ad Ethical + impactful advertising with tiny prices  Advertise on CodeDragon 

Fonts

One of the most important things to do with text is the font you're using. You may have seen the word 'font' used in other bits of your computer, such as Microsoft Word. As you probably know, the font is what the text looks like (other than colour and size).

By default, your web browser uses the following font:

Default font

On Windows, this default font is Times New Roman.

Making fonts simpler

Windows has about 120 fonts built-in. However, we'll simplify that to just a few fonts:

These are called generic fonts. We'll use these instead of actual fonts to make your life a little easier.

Using fonts in CSS

It's quite simple to apply one of the generic fonts above:

Easy peasy lemon squeazy. Now give it a go:

  1. Drag the big blue basic structure block into the workspace. Change the title to anything you want.
  2. Drag the yellow header block into the body, and type anything you want into it.
  3. Drag the style attribute block onto the side of the header block.
  4. Drag the font family block inside the pink style block.
  5. Set the font-family to either: serifsans-serifcursivefantasy or monospace

End of tutorial