CSS Stylesheets

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:

The <body> tag: this sets 'global' properties which affect every paragraph in the document ... except the Background Colour property which gives the background colour of the document itself.
<Table> and <tr> tags: these set cell properties for the whole table and the whole row, respectively. <Td> properties override <tr> properties, which in turn override <table> properties.

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:

Region	Revenue	Profit
Earth	27.2	3.1
Mars	6.4	0.6
Io	19.1	10.4

Various things you can do

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

Change the appearance of lists
- Numbering system
- Shape of bullets
Change the colours of anything