CODEWITHSUNDEEP
htmlcss
Dhivahar M
Dhivahar M

Reputation: 33

How to call css styles in specific page in HTML?

I have creating webpage in angular. i have three stylesheets. these three files are called in all pages. Now, I want to execute specific CSS block for my home page. I tried less file for this process.

HTML:

// This code for home page

<div class="homePage">
<div class="content">

</div>
</div>

//This code for inner page

<div class="content">

</div>

CSS:

.homePage
{
    .content
    {
        background-color: #F00;
        color: #FFF;
    }
}
.content
{
    background-color: #000;
    color: #FFF;
}

But its not working. please help me.

Upvotes: 2

Views: 1027

Answers (1)

Lucas K
Lucas K

Reputation: 82

You can have a global style for .content div

.content {
    background-color: #000;
    color: #FFF;
}

Whenever you want to override the .content div style or add page specific style, simply just wrap .content div into a parent div

HTML

<div class="home-page">
   <div class="content"></div>
</div>

CSS

.home-page .content {
    background-color: #F00;
}

Upvotes: 3

Related Questions