CSS is a file with text in it. This text will help us give shape and colour to the HTML tags.
Remember how in the article about what is HTML we have said that:
This infinite piece of paper is the HTML. It has no specific colour, shape, size, nothing but it can have everything if we make it have.
- Let’s imagine that you need to document your painting so that it can be reproduced by anyone who has no skill. In the end we do know that our browsers have no understanding or knowledge of anything.
Look at that. It is quite ugly and hard to understand because of all the text. Mona Lisa would look quite terrible.
- When you are trying to copy a drawing imagine how long it would take if I read all that information for you. Try to read the following lines 1 by 1 and imagine the shape. I bet it will take over 1 second:border width: 10 points
border colour: black
width: 135 points
height: 70 points
left corner: 59×77 points
right corner: 209×159 points
transparent filling. Now you know everything there is to know for the first shape and you can draw it! Took us a while but it was not impossible, just slower.
- The order of the information matters. If in the previous example I had given you the left corner on the 3rd position, you could have put the pencil in that point and wait for more information. You knew already that the border is black and that it is 10 points thick. You could have had the 10 points black pencil in your hand waiting for the starting point.
To conclude our lesson:
1) What is CSS?
It is a document where we store all the information related to the layout of our HTML tags.
2) Why is it better to put this information in a separate file?
The browser will receive this file in the same time as our HTML file. This makes everything faster and will be able to arrange the information in the desired order because it knows that inside the CSS file there will be only information related to styles.
Next time we will learn how we can tell the html page to take the css with it when it leaves towards the user’s browser.
Have a good evening,