4.2. Changing the Style of an HTML Element

There are many ways that we can change the style of what we see in the browser. In this section we will look at examples of the following:

But before we talk about these, we need to think about colors. There are three different ways to specify the color.

Using either the RGB or the HEX value gives you total control to specify any of of 16 million different colors. There is a bit of interesting computer science behind the RGB and HEX values. The rgb function lets you specify a value between 0 and 255 for each component of red, green, and blue. By mixing together a certain amount of red, green, and blue you can create \(255 \cdot 255 \cdot 255\) different colors, which is slightly more than 16.5 million. Now where does the number 255 come from? It is one less than \(2^8\). Computer scientists like powers of two because when you get deeply into the inner workings of the computer you see that everything is in binary (ones or zeros) which we call bits. With eight bits we can specify 256 different values or 0 – 255. We call eight bits one byte.

Now the HEX specification of the number is directly related to the binary as follows:

binary

hex

decimal

0000

0

0

0001

1

1

0010

2

2

0011

3

3

0100

4

4

0101

5

5

0110

6

6

0111

7

7

1000

8

8

1001

9

9

1010

a

10

1011

b

11

1100

c

12

1101

d

13

1110

e

14

1111

f

15

When specifying a color using the HEX system the first two characters are for the red, the second two for the green, and the last are for the blue. There are lots of color picking tools that you can use that will let you choose the color you want and then tell you the appropriate hex value.

4.2.1. Background

CSS has the following properties which we can use to change the background.

  • background-color

  • background-image

  • background-repeat

  • background-attachment

  • background-position

4.2.2. Text

  • text-color

  • text-align

  • text-decoration

  • text-transformation

4.2.3. Font

  • font-family

  • font-style

  • font-size

You have attempted of activities on this page