How to include several w3-css selectors into one class? Is this possible?

[hikingwithu2]

I'm building a site in which all the pages will have 4 - 6 sections, each section will have a different background and border colors, so the basic code looks like this:

 

<div class="w3-container w3-twothird w3-red w3-leftbar w3-border-pink"><

 

Since I'm re-using this same code on many pages I would like to create a class that contains that list of selectors, so the classes might be called div.container1, div.container 2, etc with each container being the same except the w3-*color* and w3-border-*color* selectors.

 

This way we can easily change the colors in the stylesheet at any time without editing every single page (there will be hundreds of them).

 

In the website there is an external link to the online w3-css stylesheet. The site also uses a local stylesheet for other parts of the site.

 

At this time there are about 50 pages already completed, I don't like the prospect of going back and editing every one of them if we decide to change the colors of some of the sections. Especially in the not-too-dstant future when we have many more pages completed.

 

This might be simpler than I think, or it might not be possible. I hope it's possible.

 

*hmmm, just thinking about this now - I suppose it would be possible to open the w3-css stylesheet, pull out the w3-container, w3-twothird, etc relevant selectors, and paste them into my own local stylesheet, creating classes called container1, container2, etc, thereby creating custom classes. Problem is that the w3-css stylesheet is subject to updates/changes, right?

[Ingolme]

This is specifically the reason why CSS frameworks are a bad idea. It litters the HTML with presentation markup.

 

If you can't remove the dependency from W3.CSS then I recommend just copying the rules you need into your own stylesheet which overrides the other one.

[hikingwithu2]

Yeah, I had a feeling that might be the case, thanks for the reply.