Multiple pages CSS - Different styles in each page for same elements

Question

I want the elements on 1 page to be styled and not affect the same elements on another page.

I have class="homepage" on each element.

Is there a better way to do it?

For simplicity, here is the DIV on that page.

h1.homepage, p.homepage, li.homepage {
  margin-left: 200px;
}
p.homepage, li.homepage {
  font-size: 20px;
}

<div>
    <h1 class="homepage">Angular 2 with TypeScript for Beginners</h1>
    <br> 
    <p class="homepage">This project teaches what single page applications (SPA) are and how to build them.</p>
    <p class="homepage">This is a real-world application. A Single Page Application with 2 pages.</p>
    <ul class="homepage">
        <li class="homepage">Page 1 - is a list of customers from a RESTful api with CRUD operations.</li>
        <li class="homepage">Page 2 - is a list of posts from a RESTful api with pagination and search opeartions as well as master/detail views</li>
    </ul>
    <br>      
    <p class="homepage">Angular 2 is the next big thing. It's one of the leading frameworks for building modern, scalable, cross-platform apps.</p>
    <p class="homepage">It’s a leading framework for building JavaScript heavy applications. Often is used in building Single Page Applications (SPA). In a standard web app, when we click on a link, the entire page is reloaded. In SPA, instead of reloading the entire page, we replace the view that is in the content area with another view. It also keeps track of history so if the user navigates using back and forward buttons, we reinsert the application in the right state. This is a fast and fluid experience. Gmail is an example of a SPA.</p>      
    <br>  
    <p class="homepage">TypeScript is a superset of JavaScript, meaning any valid JavaScript code is valid TypeScript. TypeScript brings many useful features to JavaScript that are missing in the current version of JavaScript. We get classes, modules, interfaces, properties, constructors, access modifiers (e.g. public/private), IntelliSense and compile-time checking. So, we can catch many programming errors at compile-time.
    </p>
    <p class="homepage">Angular 2 is written in TypeScript. Plus, most of their documentation is in TypeScript. And for that reason, TypeScript will be the dominant language in building Angular 2 apps.
    </p>
</div>

What about just creating a "homepage.css" file and linking it only to the homepage? Then link the "design.css" file for all the other pages. You can even have both on the homepage, just put the "homepage.css" file after the "design.css" file so it overrides the changes. — Staveven
– Staveven, Commented Apr 7, 2017 at 18:56

Jaqen H'ghar · Accepted Answer · 2017-04-07 18:24:05Z

There is a better alternative.

Surround the page with a class and use descendant selectors:

.homepage h1, .homepage p, .homepage li
{
  margin-left: 200px;
}

.homepage p, .homepage li
{
  font-size: 20px;
}

<div class="homepage">
    <h1>Angular 2 with TypeScript for Beginners</h1>
    <br> 
    <p>This project teaches what single page applications (SPA) are and how to build them.</p>
    <p>This is a real-world application. A Single Page Application with 2 pages.</p>
    <ul >
        <li>Page 1 - is a list of customers from a RESTful api with CRUD operations.</li>
        <li>Page 2 - is a list of posts from a RESTful api with pagination and search opeartions as well as master/detail views</li>
    </ul>
    <br>      
    <p>Angular 2 is the next big thing. It's one of the leading frameworks for building modern, scalable, cross-platform apps.</p>
    <p>It’s a leading framework for building JavaScript heavy applications. Often is used in building Single Page Applications (SPA). In a standard web app, when we click on a link, the entire page is reloaded. In SPA, instead of reloading the entire page, we replace the view that is in the content area with another view. It also keeps track of history so if the user navigates using back and forward buttons, we reinsert the application in the right state. This is a fast and fluid experience. Gmail is an example of a SPA.</p>      
    <br>  
    <p>TypeScript is a superset of JavaScript, meaning any valid JavaScript code is valid TypeScript. TypeScript brings many useful features to JavaScript that are missing in the current version of JavaScript. We get classes, modules, interfaces, properties, constructors, access modifiers (e.g. public/private), IntelliSense and compile-time checking. So, we can catch many programming errors at compile-time.
    </p>
    <p>Angular 2 is written in TypeScript. Plus, most of their documentation is in TypeScript. And for that reason, TypeScript will be the dominant language in building Angular 2 apps.
    </p>
</div>

Thanks..I had initially had the <div class="homepage"> and had the style as .homepage h1, p, li Which was messing things up.

jstarick · Accepted Answer · 2017-04-07 18:24:30Z

1

What keeps you from using different stylesheets (e.g. general.css for every other page and homepage.css for this particular one) in the first place? If you don't want to bother with multiple css files, you could declare the class solely to your div and still use it for the distinction in your css. Just as an example:

<style>
   span {
      background-color: red;
  }

  div.homepage span {
    background-color: blue;
  }
</style>

<div>
  <span>span in normal div</span>
</div>
<div class="homepage">
  <span>span in special div</span>
</div>

answered Apr 7, 2017 at 18:24

jstarick

1401 silver badge10 bronze badges

Collectives™ on Stack Overflow

Multiple pages CSS - Different styles in each page for same elements

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related