More than you need to know about style

Background images

The rhubarb example used an image in the background of the header. The property is the background-image property, with the value set to be the location of the image, as in this example:

background-image: url(/images/notgrapes.jpg);

Rounded corners

You probably noticed that our rhubarb example used the property border-radius. The value for this property is specified as a size, which indicates how curved a corner should be. Technically, this corresponds to the size of the radius of a circle, part of which becomes the curve in the corner of the border.

As was shown earlier for the other border properties, you can specify values for each border, one value for all borders, and some options in between. There are also separate properties available for the four borders, like for width, style, and colour.

Transparent colours

Some browsers also support colours with transparency (e.g. rgba(0, 10, 0, .5)) where the fourth entry is a value between 0.0 and 1.0 indicating the opacity, from most to least transparent. It is good practice to provide another declaration for the same selector before the declaration using rgba as a fallback to be used by older browsers.

Much more

Now it is time for you to consult the Help page to explore the wide world of resources available to you - may the journey be a fun one!