For my example I'm going to use a CSS class called .item
.item{
width:100%;
}
So how do I change this property on some specific pages?
For example, in the index page qro width 100%, in the page contact qro 90%, in the location I want 20%.
How to do this without having to create one for each?
You just put a class in the body of the page you want to be different, eg you put class="diferente" , there in CSS would look like this:
.item{
width:100%;
}
.diferente .item{
width:20%;
}
You can do it in some ways:
Add a style sheet for each page. Ex: index.css / contact.css / localization.css and call each one in head matching.
Or you can do with javascript ...
You can also ignore your current class using! important on your page.
.item{
width:100% !important;
}