Adding colour

Hello and welcome back,

In our previous article we have discussed about how to create our HTML and CSS documents and how to make sure they are working.

In this post we found out about classes and ids. Let’s put them to work!

In the HTML our example we have this line saying “<div class=”green leaf” id=”first_leaf”>first leaf</div>”.

We know that a tag can have as many classes as we want it to have and that those classes are put into different stacks. In order to add classes to a tag we need to write the word “class” after the tag’s name. Right after we add the “=” and between double commas we can add all the class names we want. There are no standard names and it does not matter how they are being called. We name them as we want. They are all split by space. So, in our example, our div tag has 2 classes “green” and “leaf”.

We also know that an element can have only 1 id and it needs to be unique. Like the class, we have to write “id=” and then between double commas the name of the id. Same as with the classes, it does not matter the name.

This is also a good time to learn that the word “class” and “id” are named “attributes”. There are way more but those are the ones we know.

Let’s open our HTML editor and our CSS file.

Here, in order to point to a class we use the “.” sign and in order to refer to an id we use “#”.

Let’s make all our green elements truly green.

  1. Put the following text into the css file
    .green { background-color: green; }
  2. Save the file
  3. Open the HTML file in your browser or refresh the page you already had opened
  4. Be amazed!

All our div elements that had the class “green” actually became green.

The “background-color” it is called a property. and the “green” after the “:” sign is called the value of the property.

Let’s do something with the id as well.

  1. Put the following text in the css file
    #first_leaf{color:white;}
  2. Save the file
  3. Refresh the web page

Notice that the text has turned white. This is quite nice!

You can list multiple CSS properties one after each other and delimit them apart by “;”. For instance, let’s put a black border around all the tags with the green class.

  1. Add border: 1px solid black; inside the “{” “}” of the tags from the green class.
    Now it should look like
    .green {
    background-color: green;
    border: 1px solid black;
    }
  2. Save and refresh

Note how we can split the CSS properties on multiple lines and how we can add as many as we want. On border we did cheat a bit, we have added 3 values to the border property in the same time. This was done just to see that it is possible.

For WAY more information about CSS properties please use http://www.w3schools.com/css/css_intro.asp and make sure you do not click on any of the commercials they have.

Play with it, break things and try to fix them back. Learning is all about experimenting.

You can learn more about HTML tags here http://www.w3schools.com/html/ . Again, make sure you don’t click on the commercials, you do not need any certification, quiz, class etc. Just select from the left menu the tags and read about them.

Next time we learn a bit about animations.

Take care,
Gabi

Leave a Reply

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