Sprinkle magic dust over HTML with CSS

Hey hey hey!

This time we learn what to write into the CSS file to make it work. Uhh yea!

Before going a bit more into details let’s try to imagine how the linking between the 2 documents can function.

Let’s use http://corioblog.com/Mondrian.jpg as an example.

Selecting an element:

  1. Let’s look at the square with thick black border positioned from the top underneath first row of white rectangles, the big red one. This was a bit slow and we are happy for the red colour, otherwise it would have been even slower. This is one way of writing a CSS selector, based on the elements that hold it.
  2. Another way is if we put a number in each square, from the upper left corner to the upper right corner. Now we can say that we talk about the square number 5. This was way faster. This called an “id”. Each “id” must be unique, else we ruin all the speed and idea. An HTML tag can have 1 id.
  3. Let’s try to locate the element which has “square black”. It went quite as fast as the “id”, maybe a bit slower, but still way faster then the first solution. This is called a class. An html tag can have any number of classes. The more they are the slower it becomes to knowing which one we select.

Adding a style to an element:

We have seen how selecting elements work, which is the fastest and which is the slowest. Let’s imagine how paining would work if we imagine ourselves as browsers. We will ignore the first try of selection because it is plain stupid to work like that.

  1. Apply a border to the tags with id 1,2,3,4,5,6,7,8,9…19,20. This looks quite slow because you always have to go back and see if the tag with a specific “id” needs to have the border painted or not.
  2. Apply the border to all the tags with class “black”. Hm…. this looks super fast if you already have all the tags split in piles. All the ones with “black” in the “black” pile. All the “squares” in their own pile and all the “rectangles” in the “rectangles” one.

This is how the browser finds tags and paints tags. We can easily see why the “id” is faster to find and why the “class” is faster to paint.

Next time we will add some colour to our small piece of HTML from the previous lessons.

Have a good one,
Gabi

Leave a Reply

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