Using CSS properly (tutorial)

This first post is due to the events that happened last week. Last week I took part in my university bloggers' event, called "Tnklas". You can find more information about this event in it's official website.
What we will be talking about is how to use CSS properly. This post should be read by people who have a basic understanding of CSS already. If you don't know what is CSS, please, feel free to learn it at W3schools.
We all well know that CSS technology is for creating the style of an internet application. It is important to know the influence of good and bad CSS in your website because the bad usage of CSS may create a design of your website very beautiful, but very slow and irritating. So in this post I am talking about the best practices how to use CSS in order to make your website beautiful and well-working.
So, to start with, what is the proper usage of CSS?
CSS, broadly speaking, is that kind of information, which is recieved by the visitors browser only once - the first time visitor visit your page. So the proper usage of CSS is the one which would be loaded fast and only once. So how can we do it?
Basically there are 3 ways of how you can use CSS:

1. Giving a css "style" property for every element of your page;
2. Putting a css "style" property in ever page of your website in a „head“ section;
3. Loading an external style sheet.

The proper usage of CSS is the third option. Even though we all sometimes use the mixed type of CSS, the basement of CSS should be the third option. Lets take an example of how a browser acts if your website uses the first CSS option: A browser while loading your page, sees multiple "style" properties in each section or even an atribute. It means, that every paragraph, every line or „ h1“ tag has its own style. Not only it takes time to create that kind of page but it also takes lots of time to load it. If your website is built in the second way, it is much better, because the head section holds all of the style elements in one place. It gives a browser ability to load a page faster and since the „head“ section is in above of the page it ensures the CSS is loaded before the page shows up to a viewer. However, the problem is that, this CSS in „head“ section is downloaded each time by the browser when a user clicks different page on the same website. It takes time and it is useless. So, how to work like a professional?

1. Build your website. Try to create a unique style of your website but not of every page;
2. Create an external CSS document .css ( you can create it with MS Notepad);

3. Put your website and a .css document in the server in one folder.
4. Relate your websites .html pages with .css document (wondering how to do it? Go to www.w3schools.com and see the CSS tutorials ).

So here's what we got now:


We have multiple pages with the same style of a website. Now, if we want to change the color of body, we don't need to go to every page of a website and declare new changes. All we have to do is simply change the external .css file, to change one line of it! The browser is simply downloading your CSS style document only once and if a viewer wants to see the next page, it loads much faster, better and is loaded before the page shows up.