Use Normal Use Dark Use "Aargh"

Showing what CSS Can Do

This page demonstrates most of the many things that CSS can do. All three of the stylesheets you can use here were generated using the Editor.

Can Your Browser Cope?

The important first step is testing that your browser actually supports CSS. That test is here: if this next sentence appears different, your CSS is working:

This paragraph should look different.

The Importance Of Styles

Most of the time you will be setting a set of CSS properties on a particular HTML style. This means that the properties will affect all elements of that style. There are a few special cases, for which setting the properties has a wider-reaching effect than just one element:

Class properties

This paragraph is defined with <p class=ar>, which means it inherits properties not only from the P element but from the .AR class. That means that this paragraph looks different from normal paragraphs, which only inherit properties through the P element. Similarly, this table shows the effect of the TD.EM element/class pairing:

RegionRevenueProfit
Earth27.23.1
Mars6.40.6
Io19.110.4

Various things you can do

Here is a list of other things that CSS and the Editor will do for you:

  1. Change the appearance of lists
  2. Change the colours of anything