Drawing for the first time

Yo reader, how are you today?

Two lessons ago we have discussed how we can include our CSS file in the HTML tree. Last lesson we have discussed how the browser knows which colours and distances to apply to which element. Also we found out how to ease his job by knowing when to use a class and when to use and id.

Today we will re-use the example from HTML Tree and tags . We will create a few leaves for our HTML tree and colour them a bit.

<!DOCTYPE html>
<link rel=“stylesheet” type=“text/css” href=“mystyle.css”>
<title>The title of our tableau</title>
<div class=”green leaf” id=”first_leaf”>first leaf</div>
<div class=”red leaf” id=”second_leaf”>second leaf</div>
<div class=”green flower”>very very small flower</div>

Before actually writing some CSS I will take some time and explain all those “div” branches of our tree.
Let’s do this exercise:

  1. Take a piece of paper.
  2. Cut it in 3. Do it!.
  3. Take a second piece of paper.
  4. Put the 3 parts on top of it.

The “div”-s for HTML are exactly as the papers are for you. They are transparent, one with the background but they exist there to hold information for you.

Let’s do the following exercise:

  1. Take the first small piece of paper and write class=”green leaf” id=”first_leaf” on it
  2. Take the second small piece of paper and write class=”red leaf” id=”second_leaf” on it
  3. Take the third small piece of paper and write class=”green flower” on it
  4. Flip the first piece of paper and write on it first leaf
  5. Flip the second piece of paper and write on it second leaf
  6. Flip the third piece of paper and write on it very very small flower
  7. Put them back on the big piece of paper with the text upwards. Not the “class” and “id” non-sense, but with the nice human readable text.

Great job! This is what your browser sees.

Now we are ready to write our CSS file. Let’s play again:

  1. Open your program with which you write text. If you are unsure what I mean please go to http://www.sublimetext.com , download, install and start this program. From now on this is our HTML editor.
  2. Write into the HTML editor all HTML code from above.
  3. Save the file into a directory/folder that you want and name the file “html_file.html”
  4. Get back to sublime and go to File, New file
  5. Save this new empty file into the same directory/folder as the “html_file.html” file and name it “mystyle.css”

That was all! Now you have your very own website. Yes, it takes some more work to make it visible to other people but you can see it locally by:

  1. Go to the directory/folder you have used previously to save the html and css file
  2. Double click on “html_file” or drag it on top of your browser

That’s all, if all went fine you should be able to see the text of your leaves in there. They should have the same text as your small pieces of paper. You see the resemblance now. The browser does no magic tricks. He just reads everything and splits the information is 2 piles. Information for him and information for you. Same as you pieces of paper. Information for the viewer, the nice text, and information for the programmer, the classes and ids from the back of the pieces of paper.

Next time we will write some CSS code to make things pretty.

Take care,



Leave a Reply

Your email address will not be published. Required fields are marked *