Trying to use CSS in Django Hello World

Question

Right now I'm trying to use some basic CSS in my Django Hello World program. I can get "Hello World" to display, but the CSS effect isn't work. Currently this is what I have in my main URL:

from django.conf.urls import url, include
from django.contrib import admin
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'',include('firstapp.urls')),
]

And this is what I have in my app URL.

from django.conf.urls import url
from . import views

urlpatterns = [
    url(r'^$', views.index, name='index'),
]

This is my views file.

from django.shortcuts import render
from django.http import HttpResponse

def index(request):
    context = {"variable":"Hello World"}
    return render(request, "base.html", context)

My base.html file

{% load staticfiles %}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<link rel='stylesheet' href='{% static "css/base.css" %}'/>
</head>
<html>
<p>{{ variable }}</p>
<script src="{% static "base.js'" %}"></script>
</body>
</html>

And my base.css file.

h1 {
    color: 00FFFF;
}

Lastly, I added this piece of code on the bottom of my settings file.

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
]

STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), "static_cdn")

Ideally the page should show up with "Hello World" in a cyan color...unfortunately it just shows "Hello World" in normal black text. Does anyone know why this is?

itodd · Accepted Answer · 2017-09-15 03:27:51Z

2

You need to target the correct element in your CSS. Currently you are only styling h1 while in your HTML you have a p. Also you need a valid hex code (starts with a hash: #)

Update your CSS to:

p {
    color: #00FFFF;
}

answered Sep 15, 2017 at 3:27

itodd

2,4031 gold badge15 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Trying to use CSS in Django Hello World

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related