Currently, I am working on a website that utilizes a global stylesheet which applies styles to specific element types. Personally, I find this approach inefficient. As I develop ASP.NET user controls for different pages, I consistently encounter issues where my internal and inline styles are overridden by the styles within the global stylesheet. This is happening while I am using Firefox as my browser.
For instance, I recently included a control containing a table. During development, I defined the style internally within the user control itself (not in the page head). However, the external global.css stylesheet contains the following declaration:
div#copy table {
width: auto;
}
In contrast, my internal declaration looks like this:
table.MMPointBalance {
border: 0 none;
border-collapse: collapse;
display: inline-block;
width: 200px;
}
The width property set to 200px is being overridden by 'auto' from the external stylesheet. Although internal and inline styles should take precedence, the selector in the inline style mentioned above is also more specific compared to the global one. So, why is it not being applied?