Is it good idea to make separate CSS file for each HTML page?
It's a good practice. As you said that
In fact, each page has pretty much the same layout, only the contents and their style looks different. And my website isnt that advance.
So keep just one CSS file. Reasons:
- It's easy for browsers to keep the cache
- It's better for maintenance, as you have all your design rules in just one place.
- As your project is small, the CSS file is not so big at all.
If you want to separate the files for organizational reasons, I will suggest you to read about CSS Preprocessors like Less or Sass. With them you can set your styles in separated files and join all of them before the releasing.
Your example shows you using one design.css file for your entire website.
Generally, it is better to have one single .css file containing data for all pages for 2 reasons:
- You will allow browsers to cache .css files thus resulting in faster loading times;
- It will ease the maintenance process.
I would advise you, if you really want to divide .css in separate blocks to use CSS' @import to divide blocks of code f.e form styles and so on.
There's not universal best practice for doing it. Generally for large projects, it is recommended to separate css among multiple files for debugging and maintenance during development. As your personal website doesn't seem too complicated, it doesn't seem reasonable to separate them out. This type of question has already been answered.
Single huge .css file vs. multiple smaller specific .css files?
One Stylesheet Per Page!
Just have 1 css file for something so small. When you get into building larger sites you can split your style sheets up into modules.
Have a read through the Scalable and Modular Architecture for CSS approach as it's a solid way of thinking before you get to a level where you can build out your own css architecture.