[DJANGO] Aplicar estilos CSS

¿Cómo usar CSS en DJANGO? - Máster en PYTHON #64

En este capítulo, nos vamos a dedicar a ponerle estilos CSS a este formulario de DJANGO, aunque lo aprendido, te servirá para cualquier otro proyecto con Django, no solo para formularios.

En capítulos anteriores, hemos estado trabajando con formularios de Django. Sin embargo, el resultado final no era muy agradable ni práctico solo con HTML:

Añadir estilos CSS de Django a las apps

Empecemos por la plantilla del formulario.

Plantilla formulario.html

Este es el mismo formulario que ves en la imagen superior, pero con las clases necesarias añadidas para que hagan efecto los estilos de la hoja CSS.

En la línea 9, puedes ver la carga de la hoja que está en una carpeta llamada css dentro de la carpeta static de la app.

Si tienes dudas con algo de HTML, déjamelas en los comentarios. Puesto que es un curso de Django, no voy a detenerme a explicarlo, pero te puedo ayudar en lo que necesites sin problemas.

Las etiquetas de plantilla son las siguientes:

'{% load static %}' para enlazar a la carpeta estática de la app.
'{% static 'favicon.png' %}' y {% static 'css/estilos.css' %} son para la carga de archivos estáticos (favicon y la hoja de estilos CSS).
'{% csrf_token %}' es una medida de seguridad contra ataques de este tipo.

Si te perdiste los capítulos anteriores, te recomiendo que los veas, ya que expliqué todas estas cosas con bastante detalle.

{% load static %}

<!DOCTYPE html>
<html>

<head>
   	<meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Formulario de registro</title>
    <link rel="icon" type="image/png" href="{% static 'favicon.png' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/estilos.css' %}">
</head>

<body>
    <section class="contenedor">
        <header>Formulario de registro</header>
        <form method="POST" class="formulario">
            {% csrf_token %}
            <div class="entrada">
                <label for="nombre_usuario">Nombre de usuario:</label>
                <input type="text" name="nombre_usuario" required>
            </div>

            <div class="entrada">
                <label for="nombre">Nombre:</label>
                <input type="text" name="nombre" required>
            </div>

            <div class="entrada">
                <label for="apellidos">Apellidos:</label>
                <input type="text" name="apellidos" required>
            </div>

            <div class="entrada">
                <label for="email">Email:</label>
                <input type="email" name="email" required>
            </div>

            <div class="columna">
                <div class="entrada">
                    <label for="edad">Edad:</label>
                    <input type="number" name="edad" min="1" required>
                </div>

                <div class="entrada">
                    <label for="peso">Peso:</label>
                    <input type="number" step="0.01" name="peso" min="0" max="999.99" required>
                </div>

                <div class="entrada">
                    <label for="altura">Altura:</label>
                    <input type="number" step="0.01" name="altura" min="0" max="999.99" required>
                </div>
            </div>


            <div class="entrada">
            <label for="fecha_nacimiento">Fecha de nacimiento:</label>
            <input type="date" name="fecha_nacimiento" required>
            </div>

            <div class="entrada">
                <div class="columna">
                    <div class="caja-select">
                    <select name="roles" required>
                        <option hidden>Tipo de usuario</option>
                        <option value="usuario">Usuario normal</option>
                    <option value="admin">Administrador</option>
                    </select>
                    </div>
                </div>
            </div>
            <button type="submit">Enviar</button>
        </form>
    </section>
</body>
</html>

Hoja estilos.css

Por aquí tienes la hoja de estilos CSS. Tampoco me voy a detener a explicarla, ya que se alargaría mucho el capítulo. Son simplemente unos estilos para hacer que el formulario de la plantilla se vea mucho mejor y sea más útil para el usuario.

/* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgb(0, 166, 255);
}
.contenedor {
  position: relative;
  max-width: 700px;
  width: 100%;
  background: #fff;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.235);
}
.contenedor header {
  font-size: 1.5rem;
  color: rgb(0, 166, 255);
  font-weight: 500;
  text-align: center;
}
.contenedor .formulario {
  margin-top: 30px;
}
.formulario .entrada {
  width: 100%;
  margin-top: 20px;
}
.entrada label {
  color: rgb(0, 166, 255);
}
.formulario :where(.entrada input, .caja-select) {
  position: relative;
  height: 50px;
  width: 100%;
  outline: none;
  font-size: 1rem;
  color: rgb(107, 107, 107);
  margin-top: 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 0 15px;
}

.entrada input:focus {
  box-shadow: 0 2px rgb(0, 166, 255);
}


.formulario .columna {
  display: flex;
  column-gap: 15px;
}

.caja-select select {
  height: 100%;
  width: 100%;
  outline: none;
  border: none;
  color: rgb(107, 107, 107);
  font-size: 1rem;
}

.formulario button {
  height: 55px;
  width: 100%;
  color: #fff;
  font-size: 1rem;
  font-weight: 400;
  margin-top: 30px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  background: rgb(0, 166, 255);
}
.formulario button:hover {
  background: rgb(107, 107, 107);
}

Guardamos todos los cambios y ya podemos acceder a la URL del formulario desde el navegador. Este es el resultado. En comparación, no parece ni el mismo formulario.

Ya con esto, puedes ver que no hay límites en cuanto a desarrollo web con Django, puedes aplicar todo el HTML, CSS y JS (entre otros) que sepas, y lo vas a tener funcionando dentro de tus apps de Django.

No te pierdas nada del curso Máster en Python.