learn web technologies, the easy way

A bit of style

Now we’ll show you how to style the elements on your page. All modern browsers understand styles. Styles can change ANY aspect of your page, from positioning of page elements, to color of text or backgrounds to creating borders, margins, and or padding around elements. In order to use style correctly, it is necessary to have a complete guide with all the possibilities described. Here we will demonstrate just a few typical styles to help you get started.

Let’s say you want to have your <h1> tag in blue, instead of black. Just change the h1 tag as follows:

<h1 style=”color:blue”>

By the way, you can specify any color you want by using a different format for the color, you need to tell the browser how much red, green and blue should be included in the color. You can do this by specifying the value in hexadecimal like #FF0000 (which is red), or by using the rgb method which looks like rgb(255, 0, 0) which is also red. The hexadecimal format means the following:

the first two digits, FF mean 255 in decimal. That means 255 for red.

The second two digits, 00 mean 0 in decimal, or 0 for green.

The last two digits, 00 also mean 0 in decimal, or 0 for blue. In the links section you’ll find a link or two with a reference for many colors and their representations.

or you want it blue and with Verdana font:

<h1
  style='color:blue;
  font-family: Verdana, Arial, Helvetica, sans-serif; '>

You can also specify the size of the font by adding “font-size”

<h1
  style='color:blue;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size:12px; '>

Just to let you know the standard font possibilities, here is a list:

As you can see, each font family includes more than one font. The idea behind this is that if a particular browser can’t handle the first choice, that maybe it could handle the second or third.

Play around a bit with the different colors, fonts, and styles in general. It’s a good way to see the power behind this technology.

Time to be more strict - moving the styles to their proper home