Styling


Colors

So far you have used colours such as But if you look at other homepages, you have seen other colours than that like these:
#000011 #000033 #000055 #000077 #000099 #0000bb #0000dd #0000ff
#001100 #003300 #005500 #007700 #009900 #00bb00 #00dd00 #00ff00
#110000 #330000 #550000 #770000 #990000 #bb0000 #dd0000 #ff0000
Or even more combinations like:
#555555 #48ab83 #895347 #b8d9e3 #3a9d4f

So how does this work?
Look at the colour names I have used: #94f3a1
This is a special way to desribe colours. We call it the RGB system. RGB stands for Red-Green-Blue.
So let's have a look at the colour name. The # has many names. It can be called the hash or octothorpe or sometimes also pound or mesh. Now, we will call it hash. The hash tells the HTML document that you are using a colour name. It is like the start of every colour name.
Then after the hash we see six different letters. These six letters define the colour.

#94f3a1

The first and second letters are for the red colour. The third and fourth letters are for the green colour and the fifth and the sixth letter are for the blue colour.
So every colour has two letters to define the colour. These two letters can be any number or the letters a, b, c, d, e, f. You can think of a=10, b=11, c=12, d=13, e=14, f=15.
The value 00 is the smallest, the value ff is the highest. This gives the possibility to choose from 16*16=256 different shades for every colour.
Here is a list of the numbers startign from the lowest up to the highest:

00 01 02 03 04 05 06 07 08 09 0a 0b 0c 0d 0e 0f
10 11 12 13 14 15 16 17 18 19 1a 1b 1c 1d 1e 1f
20 21 22 23 24 25 26 27 28 29 2a 2b 2c 2d 2e 2f
...
90 91 92 93 94 95 96 97 98 99 9a 9b 9c 9d 9e 9f
a0 a1 a2 a3 a4 a5 a6 a7 a8 a9 aa ab ac ad ae af
b0 b1 b2 b3 b4 b5 b6 b7 b8 b9 ba bb bc bd be bf
...
f0 f1 f2 f3 f4 f5 f6 f7 f8 f9 fa fb fc fd fe ff

Here I will show you the effect of these numbers. The blue and green colour are now fixed to a constant value, only the red colour changes. The numbers you see are the values I use for the two letters of the colour red. The letters for the colours green and blue are both set to 00:

00 01 02 03 04 05 06 07 08 09 0a 0b 0c 0d 0e 0f
10 11 12 13 14 15 16 17 18 19 1a 1b 1c 1d 1e 1f
20 21 22 23 24 25 26 27 28 29 2a 2b 2c 2d 2e 2f
30 31 32 33 34 35 36 37 38 39 3a 3b 3c 3d 3e 3f
40 41 42 43 44 45 46 47 48 49 4a 4b 4c 4d 4e 4f
50 51 52 53 54 55 56 57 58 59 5a 5b 5c 5d 5e 5f
60 61 62 63 64 65 66 67 68 69 6a 6b 6c 6d 6e 6f
70 71 72 73 74 75 76 77 78 79 7a 7b 7c 7d 7e 7f
80 81 82 83 84 85 86 87 88 89 8a 8b 8c 8d 8e 8f
90 91 92 93 94 95 96 97 98 99 9a 9b 9c 9d 9e 9f
a0 a1 a2 a3 a4 a5 a6 a7 a8 a9 aa ab ac ad ae af
b0 b1 b2 b3 b4 b5 b6 b7 b8 b9 ba bb bc bd be bf
c0 c1 c2 c3 c4 c5 c6 c7 c8 c9 ca cb cc cd ce cf
d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 da db dc dd de df
e0 e1 e2 e3 e4 e5 e6 e7 e8 e9 ea eb ec ed ee ef
f0 f1 f2 f3 f4 f5 f6 f7 f8 f9 fa fb fc fd fe ff
So to create any of the colours you see here in the list, I use the colour name #XX0000 where the XX stands for the two letters you can see in this list.

Exercise

You have now learned how to use the RGB colour scheme. This is widely used in webprogramming. The RGB colours give you more colours to choose from. To be precise, it gives you 256*256*256 = 16`777`216 different colours to work with.
So this should be enough to choose from, right?


Colour schemes

If you look at modern webpages, they choose the colours carefully. If you have internet, have a look at this webpage and this webpage.
On these two webpages, you can find colour schemes that other webprogrammers have used.
If we don't have internet, have a look here.
They only use few colours, but try to use them as good as possible. It is the job of a graphic designer to choose good colour schemes which the visitors to webpages will like. But it will be your job, to use these colour schemes.

Exercise


Linking Pages

If you do a large webproject, you will do more than just one page. And you will need to link all pages together. For example you want to have a page where you present your own CV and another page where you present the CV of your friend. And then you want to have a startpage, where you can choose whose CV you want to see. So these are already three different pages, all linked together. So it is extremely important to know how to link pages.

The tag to make link is symply <a>link</a>. The a stands for anchor. It is like and anchor to another page. The text between the opening and closing tag will be the link that the users can click. You have to tell the HTML document where this link will lead you. For this you use the keyword href. You can also tell the link if the new page should be opened in the same window or if you want to open a new empty window.

1
2
<a href="other_homepage_name.html" target="_blank">link</a>
<a href="http://google.com" target="_blank">link</a>

In this table you can see two ways to link another page. In line 1, another HTML page is linked. This means you can link any other page you have created and is in the same folder as this HTML document.
In line 2 an external page in the internet is linked. You can link to any other page in the internet if you know the address.

The second keyword that you can see is target. The target specifies how the page is opened. If you don't use this keyword, then the new page will be opened in the same window. This means you will be guided to a new page. Try this link here and see it for youself. If you click on this link, your page changes to the new page. To go back to this page you had to use the back button of your browser.
Now if you use the keyword target and give it the value "_blank" then the new page will be opened in a new window. Try and click on this link. You see that a new page has opened. You can now look at both pages if you switch between the windows. You don't have to click on the link again.

Exercise


Same styling for many pages

So now you know how to link many pages toghether.
Imagin you have to make a webpage for a customer. The customer owns a construction company and needs a homepage to present himself to customers. The homepage should consist of three different pages which are all linked together.

  1. A starting page that welcomes all visitors and gives a quick description of the buisness.
  2. A detailed page about all the work that he offers (building walls, making floors, painting walls) and the prices for that work.
  3. A page that lists all the contact information like phone numberm Email address and the address of his office.
You know how to create three different pages and how to link them together. But the new problem is that the customer wants a certin styling. He has chosen the colour combination 3 from this page because he likes blue and brown and thinks it would make a good page. The difficulty for you is now to make the styling on all three pages exactly the same. You can not forget anything, else the customer will be very unhappy.
There are two options:
  1. You write the styling part in every one of the three pages and make sure you copy everything in all three pages. You can not forget anything or the customer will be very unhappy!
  2. You find a way to write the styling on a sepparate page that applies to all three of your pages.
You already know the first method. This is what you have been doing so far. But the problem is, that if the customer suddenly decides that he rather prefers the colour scheme 6 you will need to change all colours on all three pages. You must be sure not to forget anything. Else it will look funny.
So to avoid this problem, there is a way to write the styling file only once and then tell the three pages that they should all follow this one styling file. Like this you will only need to change the styling at one place and it is automatically applied to all three pages.

Now this is not easy and you have to read this very carefully and do exactly as is described here!

  1. Open a new empty file in SciTE
  2. Save this file as <your name>.css. Do not write <your name> but replace this with your name. Like I would name my file Angela.css and Michel would name his file Michel.css OK?
  3. In this file write the following code:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    
    EM {
      color: blue;
      font-weight: bold;
      font-style: normal;
    }
    .new {
      color: green;
    }
    .summary {
      font-size: larger;
      border: solid 2px;
      background-color: #efefef;
    }
    .property {
      text-align: right;
      font-weight: bolder;
    }
    
    You see this looks exactly like what you have written in the styling tag before. And this is exactly what you do. From now on if you want to do any new styling, you will do it in this file!
  4. Copy all the styling tags from your HTML file and put it in this new file.
  5. Delete the styling from your HTML file.
  6. You remove the <style> opening tag and the </style> closing tag from the head of your HTML file.
  7. You add the following code in your head:
    1
    2
    3
    
    <head>
      <link rel="stylesheet" type="text/css" href="<your name>.css" />
    </head>
    
    Again you use your own name, not <your name>. Or whatever name you have given to the styling file that you have created before. So I would write:
    <link rel="stylesheet" type="text/css" href="Angela.css" />
  8. Add this code to the head of all of the pages that you want to link together.
  9. From now on, if you want to add or change some styles you do this only in the styling file. All your HTML pages that have the above code in their head will automatically use the styling from this styling file.

Exercise

Congratulation you have finished your first simple professional Homepage for a customer. Now create your own homepage with this knowledge!