How to manage a css file conflict, with same element names

[jwhite68]

Hi,

I have a css file called simple.css that was originally designed to be used on the main index page only.

Now, I find that I want to use it on another page, so that I can display one of the same 'elements' (a user form) on the new page.

To make this process quicker, I added the simple.css file to the existing list of css files on this new page. However, because some of the names in the css file are the same - eg .select1 etc. I find that my new page does not get displayed properly.

Does anyone know a way of managing this without having to rename all the references in the css file?
eg. is it possible to reference the css file in html just before the user form, so that it only affects that user form?

Any advice welcome.

 

[teklectic]

It sounds like your problem could be solved using CSS inheritance. You can give container elements on each page a different class name- even the form itself, and when you specify the CSS for the inner elements, use the container class name in the style sheet.

Example- one page the CSS for .select1 could be defined like
.registration_form .select1 {font-size:14px;}
.login_form .select1 {font-size:24px;}

If you spend some time planning your CSS and classing your global styles vs. unique page styles, as well as define container names for different pages, then you can more easily override base CSS styles when needed. I Hope that helps address your problem.