'<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}"> doesn't work

I link css to html on vs-code. center-aliend doesn't work here. Is there anyone who knows what part is wrong? I want to set the text 'Hello Static!!' to 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'
]

Browser output



Solution 1:[1]

import os

(include this in the settings instead of yours)

STATICFILES_DIRS = ( os.path.join(BASE_DIR, 'static'), )

Because STATICFILES_DIRS only accepts tuples or lists.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Omar Khalid