I'm currently working with the ReStart Bootstrap template integrated into my ASP.NET MVC application and have customized a number of CSS properties in a separate stylesheet. However, I've encountered an issue where some of these customizations are not being applied in Chrome, despite double-checking that the selectors are correct. Additionally, I've made sure to link the child stylesheet after the parent stylesheet in the HTML markup for proper loading order.
For instance, let's consider a scenario where I am changing the background color of a specific element:
The original styling defined in style.css
:
#social_media_wrapper {
background: #428bca;
}
The revised styling found in site.css
:
#social_media_wrapper {
background: #ff8000;
}
Below is the relevant HTML snippet referencing the element:
<div id="social_media_wrapper">
<a href="https://www.linkedin.com" target="_blank"><i class="fa fa-linkedin-square"></i></a>
<a href="http://stackoverflow.com"></i></a>
<a href="https://github.com" target="_blank"><i class="fa fa-github-square" target="_blank"></i></a>
</div>
I'm unsure what else might be causing the browser to ignore these custom styles from the child stylesheet, especially since no declarations marked with !important
are present in the parent styles that would prevent overriding by child styles (especially given that other child styles within the same document are successfully overriding their parent styles).