The <link> element in the HTML file referring to the stylesheet {% static 'css/style.css' %} is not functioning properly

I am having trouble aligning text to the center in VS Code when linking CSS to HTML. The 'center-aliend' property doesn't seem to work for me. Can someone point out what I might be doing wrong? I am trying to position the text 'Hello Static!!' in the center of the browser.

<home.html>

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
    <title>Static Practice</title>
</head>
<body>
    <div>Hello Static!!</div>
</body>
</html>

<style.css>

body {
    text-align: center;
}

<static_ex / settings.py>



# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.1/howto/static-files/

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    BASE_DIR / 'static'
]

Answer №1

The reason for the error is that you have labeled the folder as 'css'. Please consider renaming it to something else

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 is the best way to apply a box-shadow to a specific side of an element?

How can I apply a box shadow to only the right side of a block element? Currently, I achieve this by wrapping the inner element with a box-shadow in an outer element with padding-right and overflow:hidden to hide the other three sides of the shadow. Is the ...

Ways to determine if the user is using a mobile device with CSS

Is there a way to detect mobile users using CSS? I am working on a project that requires detecting mobile users, but I am unsure how to do so. Can you provide any guidance? ...

Accordions housing Bootstrap 3 pills in a sleek design

I'm working on integrating pills and an accordion in Bootstrap 3. Everything seems to be functioning correctly, but there are a couple of issues I am encountering: When the accordion is open, clicking on another tab closes the accordion. I would li ...

When transitioning to mobile size, I aim to maintain the consistent design of my background-color circle using Bootstrap 5

I am working on creating a card design with a colored background instead of an image. However, I am facing an issue where the rounded-circle background color changes to an ellipsoid shape after passing the mobile size (sm or xs). Here is what I am aiming ...

Retrieve the href attribute from a hyperlink positioned above a different element using Selenium

My challenge in using selenium is to extract an href from a link buried within numerous tags! The only identifiable detail I can work with is the presence of the text "Test text!" in the h3 tag as shown in the example below: <a href="/li ...

The CSS styles are not being applied to the PHP code

I seem to have a tangled mess of CSS / PHP / HTML to deal with. The issue I'm facing is that something works on one PHP script but not the other. Here's a snippet of my code: <?php if ($daten->getData_DB_User($get_page_num) != fa ...

Is there a way to do HTML select-option in a reversed order?

Having an issue with my HTML select element: <select> <option>...</option> <option>...</option> <option>...</option> </select> Currently, all the options are displayed below the select field. I ...

Combining the total of numerous inputs that are multiplied by a specific value all at once

Hey, I've been working on a project with a table and an input field with costs using jQuery. You can check out This Fiddle for reference. $( ".total" ).change(function() { let i = 1; var input001 = document.getElementsByName(i)[0]; var ...

Restrict the size of the numerical input in AngularJS

<input class="span10" type="number" max="99999" ng-maxLength="5" placeholder="Enter Points" ng-change="myFunc($index)" ng-model="myVar"> This code snippet adjusts the value of form.input.$valid to false if the number entered exceeds 99999 or is long ...

Change the size of a particular div upon hovering over another element

I'm trying to figure out how to scale my div with text when a user hovers over a button, but I've tried various operators like >, ~, +, - with no success. section { background: #000; color:#fff; height: 1000px; padding: 150px 0; font-family ...

Adjustable Pop-up Modal

I am attempting to implement a resizable modal window feature by utilizing increase and decrease icons. Additionally, I aim to have the modal centered on the screen following each click of increase/decrease. Thus far, only the increase functionality is fu ...

Grow your website horizontally rather than vertically for a unique user experience

When I align divs to the right, they start stacking up and crowding on top of each other. When there are more than 4 divs, the fifth one jumps below the rest as the page expands downward. I want to prevent this from happening. Instead, I would like the h ...

Tips for preventing event propagation while clicking on a swiper.js image next/prev button within a bootstrap card

I have integrated ngx-swiper-wrapper within a bootstrap card as shown below, with a routerlink at the top. When I click anywhere on the card, it successfully routes to the designated page. However, I am facing an issue where I want to prevent routing if a ...

Error message displayed by Django-ratings: "The rating value should be a Rating instance, not '100"

I'm having trouble sorting a group of model objects by rating using the Django-ratings app. I've created an order_by function in my view that is functioning correctly, except when it comes to sorting by the rating field. In this case, I am receiv ...

The table row's background image splitting into two halves

I am working on a table row class called logo, which has specific attributes. .logo { background: url("img/logo.png") no-repeat left top !important; } Currently, I have successfully placed an image at the top left of every row. However, my goal is ...

Using CSS3 to clear floats without altering the HTML structure

Despite searching for multiple solutions to this issue, I have yet to find one that works without requiring me to modify my HTML code. Here is the current HTML in question: <div class="name">Daiel</div> <div class="amount">30€</div ...

Incorporate fresh Google sites into different web pages using iFrame integration

Wishing you a fantastic day! I am currently working on embedding a brand new Google site into another webpage. I attempted to use an iframe for this purpose, but unfortunately it did not work as expected. Here is the code snippet: <iframe width="1280 ...

The onclick event in JavaScript is unresponsive on mobile devices

Our website is powered by Opencart 1.5.6.4 and the code snippet below is used to add items to the shopping cart. <input type="button" value="<?php echo $button_cart; ?>" onclick="addToCart('<?php echo $product['product_id']; ?&g ...

Create a variety of tables populated with numerous hyperlinks within each table on a webpage

I have a website where I need to display multiple tables with different data, along with appropriate links within the table cells. Plan: Each table on the webpage represents a different school subject, showcasing performance metrics such as SAT scores, fi ...

Steadfast item securely fastened to its guardian

How can I ensure a fixed object within a relatively positioned parent is clipped to its parent's boundaries as it moves with scrolling down the page? I have been trying to find a solution for this issue, but haven't had any luck so far. ...