Home > Web Development > Web page fonts with CSS


What happened?

Select a background colour and a text colour from the lists, and click change to see how you can use Cascading Style Sheets to control your web page colours.

If there is no colour style specified, your browser is displaying text and background in its default colours. This will look different on different computers. One advantage of Cascading Style Sheets is that you can set the colours and font in which a web page is displayed, and all browsers will display the page in the colours and font you selected, if the font is installed on the visitor's computer.

You can read more about font style rules, and how to set up styles here.

You would ordinarily save the styles in a separate file so that others cannot change your styles, and styles are available for your entire site. This page is designed to show you how styles work, and the CSS used to style page background colours and text.

CSS Tutorial

Web page fonts using CSS

You can change the appearance of your web pages by styling the displayed fonts. Use this page to experiment with font face, size and weight. You can also change a font to italics or small capitals using Cascading Style Sheets font properties.

Font face

Font face from the CSS font-family property

This is a paragraph of text. Only a small one, but a paragraph nonetheless.

This is a paragraph containing an image with some explanation of the picture's content and a caption.
Light and shadow in the Carina Nebula
(From http://spaceplace.nasa.gov/en/educators/images/stars/hst_carina_L.jpg).

Here is a link to a test page. Use the back button to return to this page and see the different link colours.

This is a list of nothing in particular:

  • Home
  • |
  • Sitemap
  • |
  • Databases
  • |
  • Web development
  • |
  • Delphi development
  • |
  • Image manipulation
  • |
  • KaSaB
  • |
  • Contact