How to use css for any specific elements on the page

[chknabeel]

Hi Everyone,I have a question. I have a html page, lets say index.html. I have one css attached to it named as style.css. Now I have added an email form to this page that i have fetched some where from internet and this email form has its own css say main.css. Now when I add this main.css to index.html. It conflicts or overlaps classes and ids used in style.css. So the whole page looks messy now. What I want to do here is that to just some how restrict the main.css to email form and its elements but it should not be effecting rest of the elements on the page i.e email form would be using main.css and rest of the page should be using style.css. Is there any way to do this? Remember I do not want to change the name of classes and ids in any of the css files. I m not sure whether it is possible or not. But that would help a lot if it can be done. ThanksNabeel

[jeffman]

One way would be to assign the email form element (or a div element that encloses the form controls) a unique ID. Then every selector in the email stylesheet should begin with the form container's id. Say the id of the form is "myform". Where the original form has selectors that look like this:

.myclass input[type="text"].myotherclasslabel

the modified CSS would look like this:

#myform .myclass input[type="text"]#myform .myotherclass#myform label

This should eliminate most collisions.

[ShadowMage]

This should eliminate most collisions.

...and any collisions that remain could be tracked down and those rules could have !important appended to them to force those styles.EDIT: Though if there are still too many collisions, you may need to seek other solutions. It probably isn't a good idea to add the !important rule to too many declarations.

[chknabeel]

Thank you for replying.Yes of course we can remove overlapping by using this ids technique and by using !important. But I have a big stylesheet and I would take lot of time to edit the stylesheets. Therefore I m looking for shortcut by which we can assign main.css to email form only. If it is possible that would fantastic.ThanksNabeel

[thescientist]

Thank you for replying.Yes of course we can remove overlapping by using this ids technique and by using !important. But I have a big stylesheet and I would take lot of time to edit the stylesheets. Therefore I m looking for shortcut by which we can assign main.css to email form only. If it is possible that would fantastic.ThanksNabeel

well, DD gave you probably the simplest solution. If you're that deterred from merging stylesheets, then just give the email form its own page and style around it.