Blog de David P.

3. HTML: Estilos en HTML

David Poma Luque's photo
David Poma Luque
·

2 min read

Primero, para los que no les funcionó el VSCode(Visual Studio Code) la razón puede ser porque su computadora es de 32 bits y el VSCode solo funciona en 64 bits. En ese caso, instalen el Notepad++ con este link:

https://notepad-plus-plus.org/downloads/v8.7.4/

Estilos en HTML

Hicimos nuestra primera página web en el anterior artículo, pero, no era llamativo o hermoso, le faltaba unos colores, también fondos y muchas cosas para que sea llamativa, para eso sirven los estilos en HTML que anda en el <head> al último. Se escribe la etiqueta <style> y ahí van mucho más comandos.

Código para el <style>

Utilizaremos unos 6 comandos, 1 que siempre es necesario (el primero) y los otros 5 no mucho. Los comandos son:

  • body {…} .- Esto siempre será útil en los estilos ya que se escribe primero el nombre de la etiqueta a la que le vamos a querer aplicar los colores, etc. Y los colores, etc, se pondrán dentro de las llaves .

  • backgraund-color: yellow; .- Va dentro de las llaves mencionado anteriormente, y sirve para poner la etiqueta, en donde queremos que cambie, un fondo del color elegido (en este caso amarillo, en inglés “yellow“).

  • color: white; .- Va igual dentro de las llaves, y sirve para poner las letras en un color elegido (en este caso blanco, en inglés “white“).

  • text-align: center; .- Anda en las llaves, sirve para poner la etiqueta en el centro.

  • font-size: 20px; .- Anda en las llaves y define el tamaño de la letra.

  • font-weight: bold; .- Anda en las llaves y define el grosor de la letra (en este caso grueso, en inglés “bold“).

Los últimos 5 comandos solo modificará a la etiqueta con las llaves (donde en las llaves está el comando).

Para entender mejor todo lo aprendido crearemos una nueva página con esos estílos:

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Kids Code - Aprende Programación</title>
        <style>
            body {
                background-color: #cde8ff;
                color: #333333;
                text-align: center;
            }
            h1 {
                color: #ff6347;
                font-size: 50px;
            }
            p {
                font-weight: bold;
                font-size: 25px;
            }
        </style>
    </head>
    <body>
        <h1>
            ¡Bienvenidos a Kids Code! 🎉
        </h1>
        <p>
            Un espacio de aprendizaje, programación y diversión. 
            ¡Explora el mundo de la tecnología y descubre tus habilidades😎😎😎!
            Precio: 150000 $$$
        </p>
        <img src="document.jpg" alt="Niños programando">
        <p>
            Precio demasiado ofertable🤑🤑🤑!!!
        </p>
    </body>
</html>

Donde si cargamos el archivo en una página web se verá así:

HTML5HTMLProgramación