General Styling

There are a few styling properties which work on most elements.

color

The color property sets the colour of text and text decorations. You can use any CSS colour

nav {
  color: white;
}
h1 {
  color: rgb(255, 0, 0);
}
h2 {
  color: #51f0e0;
}

background-color

An easy way to set a solid background colour:

nav {
  background-color: black;
}

background

A (potentially) more complicated way of setting the background is using background property, which also gives you the ability to set a background image, and control how it appears.

nav {
  background: url(texture.png);
  background-repeat: repeat;
}

Read more on backgrounds from CSS Reference or CSS Tricks.

z-index

If you find yourself wanting to control the 'vertical' layering of elements, ie, how things stack above or below each other, try setting the z-index. Using a negative z-index pushes items towards the back, and higher z-indexes appear at the 'top':

.overlay {
  z-index: 500;
}
.watermark {
  z-index: -1;
}

opacity

You can fade something out and make it translucent with opacity:

nav {
  opacity: 0.5;
}

1.0 is the default, completely opaque, and 0.0 is completely transparent, so 0.5 corresponds to 50% transparent.

border

The border and related properties display a border around an element. In its basic form, you can use it like this:

nav {
  border: 3px solid red;
}

Which would set a 3-pixel solid line red border.

The border style in this case is solid, but it can also be dotted, dashed, double, groove, ridge, inset or outset. Border style can also be set using the border-style property.

As you would expect the thickness and colour of the border is set using standard CSS units.

Different borders on the different edges of an element are possible:

nav {
  border-left: 3px solid red;
  border-right: 3px dotted blue;
}

A border radius rounds its corners:

nav {
  border: 3px solid red;
  border-radius: 3px;
}