'Different styled pages of a website using one CSS file
I understand that when making a simple website it is better to only use one CSS file but I was wondering how do I do that if I want the layout of each page of my website to look slightly different?
For example, if you go a website such as nhl.com the home page has a different layout than the stats or standings page (other than the nav bar at the top).
Solution 1:[1]
There is no right or wrong here.
However, one way is to have some over-arching indication of what page is being shown.
In the case of nhl.com which you cite, in the body tag they have an id which indicates the current page.
For example:
<body id="homepage_index" class="lang-en_US league-nhl" data-app-ads="false">
<body id="scores_index" class="lang-en_US league-nhl" data-app-ads="false">
and so on.
Then for styling that is specific to a page you can add the id at the front of the selector.
For styling that is common to all the pages like the navbar in your case you don't put the id.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | A Haworth |