Dividing a pair of CSS stylesheets on a single HTML page

Question

Dividing a pair of CSS stylesheets on a single HTML page

Currently, I am working on a HTML page that includes multiple javascripts and css files in the header section.

<link href="@Url.Content("~/Content/css/main.css")" rel="stylesheet" type="text/css" />

In order to make the website mobile-friendly, I searched for online resources. However, when I added another css file "app.css," it started causing conflicts with the original main.css file. Since both files are large, I am looking for a way to reference only one of them using a single block of code.

For instance:

I want this section of HTML

<div>
<nav id="topMenu" role="navigation">
        <ul id="nav" class="nav-bar">
            <li><a href="@Url.Action("Index", "Home")">Pending Entries</a></li>
            <li><a href="@Url.Action("MyStores", "Home")">My Stores</a></li>
            <li><a href="@Url.Action("Upload", "Home")">Create New Entry</a></li>
            <li><a href="@Url.Action("MyEntries", "Home")">My Entries</a></li>
            <li><a href="@Url.Action("Index", "ImageGallery")">Gallery</a></li>
            <li><a href="@Url.Action("Logout", "Home")">Logout</a></li>
        </ul>
    </nav>
</div>

to be styled using only this css file

<link href="@Url.Content("~/Content/css/app.css")" rel="stylesheet" type="text/css" />

while ignoring the main.css file, but keeping it applied to the rest of my HTML content.

javascript jquery html css

Answer 1

Answer №1

If you want to ensure that apps.css only applies to your code block, you can assign a specific class to your HTML block, create a "CSS reset" rule for that class, and prefix all rules in apps.css with the same class. Make sure to include both css files, but make sure that apps.css is placed after main.css.

By following this method, you will only need to modify apps.css while keeping main.css intact. It's crucial to have apps.css loaded after main.css so it can override the styles defined in main.css within elements with the .apps class.

In this scenario, you can assign the class "apps" to your div element.

<div class="apps">
<nav id="topMenu" role="navigation">
        <ul id="nav" class="nav-bar">
            <li><a href="@Url.Action("Index", "Home")">Pending Entries</a></li>
            <li><a href="@Url.Action("MyStores", "Home")">My Stores</a></li>
            <li><a href="@Url.Action("Upload", "Home")">Create New Entry</a></li>
            <li><a href="@Url.Action("MyEntries", "Home")">My Entries</a></li>
            <li><a href="@Url.Action("Index", "ImageGallery")">Gallery</a></li>
            <li><a href="@Url.Action("Logout", "Home")">Logout</a></li>
        </ul>
    </nav>
</div>

In apps.css, remember to prefix every rule with ".apps ". Additionally, add a "CSS Reset" style rule at the beginning of apps.css to nullify any effects from main.css.

.apps *
{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

.apps table {
    border-collapse: collapse;
    border-spacing: 0;
}

Answer 2

If you want to ensure that apps.css only applies to your code block, you can assign a specific class to your HTML block, create a "CSS reset" rule for that class, and prefix all rules in apps.css with the same class. Make sure to include both css files, but make sure that apps.css is placed after main.css.

By following this method, you will only need to modify apps.css while keeping main.css intact. It's crucial to have apps.css loaded after main.css so it can override the styles defined in main.css within elements with the .apps class.

In this scenario, you can assign the class "apps" to your div element.

<div class="apps">
<nav id="topMenu" role="navigation">
        <ul id="nav" class="nav-bar">
            <li><a href="@Url.Action("Index", "Home")">Pending Entries</a></li>
            <li><a href="@Url.Action("MyStores", "Home")">My Stores</a></li>
            <li><a href="@Url.Action("Upload", "Home")">Create New Entry</a></li>
            <li><a href="@Url.Action("MyEntries", "Home")">My Entries</a></li>
            <li><a href="@Url.Action("Index", "ImageGallery")">Gallery</a></li>
            <li><a href="@Url.Action("Logout", "Home")">Logout</a></li>
        </ul>
    </nav>
</div>

In apps.css, remember to prefix every rule with ".apps ". Additionally, add a "CSS Reset" style rule at the beginning of apps.css to nullify any effects from main.css.

.apps *
{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

.apps table {
    border-collapse: collapse;
    border-spacing: 0;
}

Answer 3

Answer №2

Instead of relying solely on media queries, it may be more beneficial to revisit the basics of CSS and address any underlying issues there. The size of both files being large is a concerning issue as well. Rather than loading the entire file for just list styling, consider only including the necessary code.

To ensure that only #topMenu utilizes apps.css, you could prefix each statement in that file with #topMenu.

Answer 4

Instead of relying solely on media queries, it may be more beneficial to revisit the basics of CSS and address any underlying issues there. The size of both files being large is a concerning issue as well. Rather than loading the entire file for just list styling, consider only including the necessary code.

To ensure that only #topMenu utilizes apps.css, you could prefix each statement in that file with #topMenu.

Answer 5

Answer №3

Like I mentioned before, Isherwood, it's impossible to conceal a CSS. However, you can customize a specific section of the document by applying that CSS when necessary.

Answer 6

Like I mentioned before, Isherwood, it's impossible to conceal a CSS. However, you can customize a specific section of the document by applying that CSS when necessary.

Dividing a pair of CSS stylesheets on a single HTML page

Answer №1

Answer №2

Answer №3

Similar questions

How can I change the displayed value of a 'select' element programmatically in Internet Explorer?

Tips on incorporating a dynamic variable value as a class name within a span tag

Highlighting table rows using jQuery on click and restoring them on change by toggling between alternating

What exactly is the purpose of utilizing node js and can someone explain to me what constitutes a

Do I need to utilize getStaticProps along with JSON imports in Next.js?

Unusual issue in IE causing rendering problems in reporting services

What is the best method for determining the ID or class of a div element dynamically?

The state update does not seem to be affecting the DOM

Error: webpack is failing to load the style and CSS loaders

Adding additional validations to your Marketo form is a great way to ensure the accuracy

Animate a jumping figure using jQuery

Transfer the textbox value from page-1 to page-2 seamlessly with the help of AngularJS UI-routing

Leveraging properties in computed Vue.js

"I'm encountering an issue with the discord.js module when I try to launch my bot using node. Any ideas on how

Transferring multiple parameters between components using Navigate and ParamMap

An unexpected 'undefined' occasionally tacked onto 1% of the URLs visitors requested on my website starting from June 12, 2012

Ensure that the method is passed a negative number -1 instead of the literal number 1 from an HTML error

Guide to making a sliding animation appear when hovering over a menu using jQuery

Encounter an issue during npm installation of electron: "Error verifying the initial certificate."

What is the best way to encode data for transmission from jQuery to a PHP file?