What is the best way to apply CSS to my HTML code?

I have the files stored within my Django project.

My directory structure for templates looks like this:

|base.html
|
|rules
   | 
   |style_base.css

In my base.html file, I link to the stylesheet like this:

<link type="text/css" href="/rules/style_base.css" rel="stylesheet" />

However, when checking with Firebug, I cannot see the CSS being applied.

Firebug displays a message saying 'There are no rules. You can create a rule.'

It also suggests an optional selection at 127.0.0.1:8000/rules/style_base.css.

I prefer not to reference it via URLs but rather use my local directory.

So, how should I properly cite style_base.css?

Answer №1

Eliminate the initial slash to search from the current location.

Using the slash will start searching from the root directory, which may differ from the current location.

Answer №2

To modify your config.ini file, update the following variables:

LOG_LEVEL = 'DEBUG'
DATABASE_NAME = 'my_db'

Then include them in your code:

<script type="text/javascript" src="{{STATIC_URL}}script_main.js"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are some solutions for adjusting this sidebar for mobile devices?

My mobile version sidebar is not functioning properly on my website. To see the issue, you can visit Zinexium. As I am new to HTML, I don't know how to fix it. Here is a link to the code. Thank you! <!DOCTYPE html> // Code snip ...

Click on the div to automatically insert its text into the textarea

I am looking for a way to enable users to edit their posts easily. My idea is to have them click on a link, which will then hide the original div containing their post and reveal a new div with the old text inside a textarea for editing. Despite searching ...

Avoiding the application of a border-right to the final child of a div in CSS

Check out this custom HTML code: <div class="main"> <div class="parent"> <div class="child"> <span></span> <label></label> </div> <div class="child2"> // some html content </div> ...

A guide to disabling daily checkboxes and retrieving the chosen values using Angular.js

Within a single table, I have incorporated a dynamic drop-down list that spans over 7 days. Additionally, I have implemented a "+" button that allows for the creation of additional rows dynamically for each day. Each row within the table features a checkb ...

Two pictures, one adjusting in size and one staying the same size

I am working on a design with an 800px wide div that contains side-by-side images - one photo and one map. The challenge I am facing is that the map, which is 300px in width and has intricate details, becomes unusable when resized for smaller screens. I wa ...

jQuery, trigger a function when the document has finished loading

I have created the following code in an attempt to display a message to only Internet Explorer users visiting the page: <script src="jquery.reject.js"></script> <script> $(document).ready(function() { $.reject({ reject: { a ...

Is it not feasible to place a well within a column using Bootstrap?

Would like to place a .well div (or a button, whichever works best) within the designated green area shown in this image: here Here is the code I currently have: <div class="container-fluid"> <div class="row row1" style=&q ...

Tips for dividing HTML code on a page into individual nodes

I am looking to extract the HTML content from a website and then parse it into nodes. I attempted the following code: function load() { $(document).ready(function () { $.get("https://example.com/index.html", function (data) { const loadpage ...

Changing the value of a user object's variable in Django

I have been working on implementing a feature that allows users to edit their personal information in a Django project using Django forms. However, after entering new values in the form and hitting enter, the user is redirected back to the main profile pag ...

Using jQuery to locate a JavaScript variable is a common practice in web development

I recently created a JSFiddle with buttons. As part of my journey to learn jQuery, I have been converting old JavaScript fiddles into jQuery implementations. However, I seem to be facing a challenge when it comes to converting the way JavaScript fetches an ...

Issue with Arabic characters displaying incorrectly in Outlook 2007

I have encountered an issue with my newsletter application where the newsletters are in Arabic. When viewed in the browser, everything looks fine. However, when opened in Outlook 2007, strange text appears instead. Interestingly, if the email is marked as ...

Production environment experiencing issues with jQuery tabs functionality

Currently, I have implemented jQuery tabs on a simple HTML page. The tabs are functioning correctly and smoothly transitioning between different content sections. However, upon integrating this setup into my actual project environment, I encountered an is ...

Ways to customize the appearance of a specific column in a k-grid td

While working with a kendo grid, I encountered an issue with setting a tooltip for one of the columns. After some experimentation, I discovered that in order for the tooltip to display correctly, I needed to override the overflow property on the k-grid td ...

Start fresh with your list styling in Sass/CSS

I'm attempting to revert ul and li elements to their default styles using a specific class, but I'm encountering difficulties in doing so. I've experimented with the inherit and initial values, but they haven't proven effective. This i ...

Guide for Displaying Three Cards Side by Side using Bootstrap Grid System

I am facing an issue while attempting to display 3 cards in a row using the Bootstrap grid system. The problem arises when I use a Django loop, as each card is being displayed in a separate row instead of side by side as intended. I have tried implementing ...

Having trouble with tabs in jQuery?

I'm having trouble setting up tabs in a reservation form with 3 tabs that include text boxes for user input. I can't seem to get it working properly and I'm not sure where I've gone wrong. Could it be due to the placement of the content ...

Is there a way to use jQuery to make a div fade in and toggle over another

I have created a test page and I am looking to achieve a specific effect when the page loads. I want everything on the page to be hidden initially. When I click on the "About" text, I want it to fade in using fadeToggle(); however, when I click on "My work ...

Learn how to transform a raw readme file into an HTML formatted document using AngularJS, after retrieving it from GitHub

Can someone help me figure out how to format each line of the README.MD raw file into an HTML document using the controller below? angular.module('ExampleApp', []) .controller('ExampleController', function($scope, Slim,$sce) { ...

How can the parent div be made transparent without affecting the child div's visibility?

When applying opacity to a parent div, I noticed that it also affects the child div. My intention is to only apply opacity to the parent div. I have set up separate divs for this purpose. <div id="container" style={{backgroundImage:"url('/images ...

I wish to substitute a form field with a different one once the value of another field matches a specific condition

The issue I'm facing is that the field disappears once "US" is chosen and does not revert back to the options when another choice is made. teacher_signup.html {% block content %} <h2>Sign Up As Teacher</h2> <form method="post> ...