Site icon FSIBLOG

How to Use Inline CSS Styles in Django Code

Karna Sodari
How to Use Inline CSS Styles in Django Code

How to Use Inline CSS Styles in Django Code

Django is a powerful web framework that makes building web applications easier and faster. One common aspect of web development is styling HTML elements, and CSS (Cascading Style Sheets) is the primary method for doing so. In Django, you can apply inline CSS styles directly within your HTML templates. In this article, we will explore how to use inline CSS styles in Django code, along with a complete example to help you understand the process.

What is Inline CSS?

Inline CSS refers to CSS styles that are applied directly within the HTML tag, using the style attribute. Unlike external or internal CSS, which are placed in separate files or <style> blocks within the <head> section of the HTML, inline CSS is defined within the individual HTML tags.

Why Use Inline CSS in Django?

While it’s generally recommended to use external CSS files for better organization and maintainability, inline CSS can be useful in certain scenarios, such as:

In Django templates, you can use inline CSS to style elements directly in your HTML. Let’s take a closer look at how to implement this.

Basic Example of Inline CSS in Django Templates

Let’s go through a basic example where we use inline CSS in Django templates.

Set Up Your Django Project:

If you haven’t set up a Django project yet, follow these steps:

  1. Create a new Django project: django-admin startproject myproject
    cd myproject
  2. Create a Django app inside the project: python manage.py startapp myapp
  3. Add myapp to the INSTALLED_APPS in the settings.py file.
  4. Create a basic view in views.py to render a template: from django.shortcuts import renderdef home(request):
    return render(request, ‘home.html’)

Create the Template:

Inside your app, create a templates folder and a home.html file inside it.

Directory structure:

myproject/
  └── myapp/
      └── templates/
          └── home.html

In home.html, we will use inline CSS to style the HTML elements.

Write the Inline CSS in the Template:

Here’s an example of inline CSS in home.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline CSS Example in Django</title>
</head>
<body>    <h1 style="color: blue; text-align: center;">Welcome to My Django Website!</h1>    <p style="font-size: 18px; color: green;">This is an example of using inline CSS styles in Django templates.</p>    <div style="background-color: lightgray; padding: 20px; border-radius: 10px;">
        <p style="color: red;">This is a box with a background color, padding, and rounded corners.</p>
    </div>    <button style="background-color: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 5px;">
        Click Me
    </button></body>
</html>

Explanation:

Add URL Routing:

Next, add the URL pattern for the view in urls.py so that you can access this template in your browser.

In myproject/urls.py, add the following URL configuration:

from django.contrib import admin
from django.urls import path
from myapp import viewsurlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.home, name='home'),
]

Run the Django Development Server:

Now that everything is set up, run the Django development server to see your inline CSS in action:

python manage.py runserver

Open your browser and navigate to http://127.0.0.1:8000/. You should see a webpage with the styles applied using inline CSS.

Dynamic Inline CSS Using Django Variables

Django allows you to insert dynamic content into your templates using template tags. This can include dynamic CSS values, which can be helpful when you need to change styles based on some conditions or logic in your views.

Example of Dynamic Inline CSS:

Let’s say we want to change the background color of a div based on a variable passed from the view. Here’s how we can do it:

In your views.py:

from django.shortcuts import renderdef home(request):
    # Passing a color variable to the template
    color = "skyblue"
    return render(request, 'home.html', {'color': color})

Now, modify home.html to use the dynamic color:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Inline CSS Example in Django</title>
</head>
<body>    <h1 style="color: blue; text-align: center;">Welcome to My Django Website!</h1>    <p style="font-size: 18px; color: green;">This is an example of using inline CSS styles in Django templates.</p>    <!-- Using dynamic CSS value passed from the view -->
    <div style="background-color: {{ color }}; padding: 20px; border-radius: 10px;">
        <p style="color: red;">This is a box with a dynamic background color.</p>
    </div></body>
</html>

In this example, the background color of the <div> will be skyblue, based on the variable color passed from the view.

Conclusion

Using inline CSS styles in Django templates can be a convenient way to apply styles quickly to specific elements. While it’s not the most scalable solution for large projects, it is useful for testing, quick prototypes, or dynamic styling. Always remember that for larger projects, it is better to use external stylesheets for better maintainability and cleaner code.

Exit mobile version