Color

Without a CSS stylesheet your web page will just be black text on a white background. But why are all my heading tags dark red? That's because in you did create a CSS file called style.css in the previous session and there specified the color of all h1, h2, h3, h4, h5, h6 tags.

Now we are going to change the color of all of our paragraphs to green. Open style.css in Notepad++ and add the following lines to the end of the file:

p {
  color: green;
}

Here we have chosen to use name of the color, but we can be much more precise by using a color code. Color codes are hexadecimal numbers that represent the amount of red, green and blue in the color. The best way to choose colors is to use a HTML Color Picker.

More styling

Let’s try experimenting with a few more paragraph options. Update the CSS definition of the paragraph <p> tag then refresh your browser to see the changes.

p {
  color: #8B0000;
  background-color: DeepSkyBlue;
  font-family: 'Verdana';
  font-weight: bold;
  font-size: 2em;
  text-align: center;
  margin: 40px;
  padding: 20px;
  border: 6px solid DarkOrange;
  border-radius: 20px;
}

Background image

To add a background image to our page, add the following to the body section of your style.css file. Obviously you will want to substitute the image URL with with something more appealing from Google Images.

body {
  background-color: #fff100;
  background-image: url('http://images2.alphacoders.com/242/2420.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

Google Fonts

A great way to enhance your web page is to use Google Fonts. Let's change all our header tags to use a fancy font from Google...

@import url(http://fonts.googleapis.com/css?family=Rock+Salt);

h2, h3, h4, h5 {
  font-family: 'Rock Salt', cursive;
  color: #006400;
  text-shadow: 3px 3px 4px #AAA;
}