CSS: Page Specific Styles

When developing the HTML for websites, I (and many other web workers) often run into the problem of adding page specific styles to the project. These types of styles are very useful. Say, for example, you are building a blog and have two pages which use a generic and reusable “article” container which wraps a blog post. The first page is a full article listing with many of these article containers on the page and the other is an individual post page, which only has one post. If you wanted to style these generic, reusable containers differently in each page, you’d need page specific styles.

There are three solutions to this problem:

  1. Use embedded styles
  2. Use page specific style includes
  3. Use page id or class selectors

Use embedded styles

The first solution to this problem is to embed page specific styles directly in the html elements. I present this solution first, as it is the worst of the three. Every developer reading this right now should be cringing.

Use page specific style includes

The second, more natural solution to this problem is to create separate stylesheets for each page.

Use page id or class selectors

The final, and my favorite solution, is to use a page id or class to identify the page, which can then be used in CSS selectors to style the element based on the page.