El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Estilizando Elementos HTML

Siguiente ►
►

En este tema, aprenderás cómo aplicar estilos a los elementos HTML utilizando CSS. Veremos cómo seleccionar elementos y aplicarles diferentes propiedades de estilo para mejorar la apariencia de tu página web.

Contenido

  1. Introducción a la Estilización
  2. Propiedades de Estilo Comunes
  3. Aplicando Colores
  4. Estilizando Texto
  5. Estilizando Bordes
  6. Estilizando Fondos
  7. Ejercicios Prácticos
  8. Conclusión

Introducción a la Estilización

CSS (Cascading Style Sheets) es el lenguaje utilizado para describir la presentación de un documento HTML. Con CSS, puedes controlar el diseño y el estilo de múltiples páginas web a la vez.

Ejemplo Básico de CSS

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo de Estilo</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        h1 {
            color: blue;
        }
        p {
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1>Hola Mundo</h1>
    <p>Este es un párrafo de ejemplo.</p>
</body>
</html>

En este ejemplo, hemos definido estilos directamente en la sección <style> del documento HTML. Esto se conoce como CSS interno.

Propiedades de Estilo Comunes

A continuación, se presentan algunas propiedades de estilo comunes que puedes usar para estilizar elementos HTML:

  • color: Define el color del texto.
  • background-color: Define el color de fondo de un elemento.
  • font-size: Define el tamaño de la fuente.
  • font-family: Define la familia de fuentes.
  • border: Define el borde de un elemento.
  • margin: Define el espacio exterior alrededor de un elemento.
  • padding: Define el espacio interior dentro de un elemento.

Aplicando Colores

Puedes aplicar colores a diferentes elementos utilizando las propiedades color y background-color.

Ejemplo de Colores

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colores en CSS</title>
    <style>
        h1 {
            color: #FF5733; /* Color hexadecimal */
        }
        p {
            background-color: rgb(173, 216, 230); /* Color RGB */
        }
    </style>
</head>
<body>
    <h1>Título en Color</h1>
    <p>Párrafo con fondo de color.</p>
</body>
</html>

Estilizando Texto

Puedes cambiar la apariencia del texto utilizando varias propiedades de CSS.

Ejemplo de Estilización de Texto

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Estilizando Texto</title>
    <style>
        h1 {
            font-family: 'Courier New', Courier, monospace;
            font-size: 24px;
            font-weight: bold;
            text-align: center;
        }
        p {
            font-style: italic;
            line-height: 1.5;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <h1>Título Estilizado</h1>
    <p>Este es un párrafo con estilo de texto.</p>
</body>
</html>

Estilizando Bordes

Los bordes pueden ser estilizados utilizando la propiedad border y sus subpropiedades.

Ejemplo de Bordes

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Estilizando Bordes</title>
    <style>
        div {
            border: 2px solid black;
            border-radius: 10px;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div>Este es un div con borde estilizado.</div>
</body>
</html>

Estilizando Fondos

Puedes aplicar imágenes de fondo y colores de fondo a los elementos.

Ejemplo de Fondos

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Estilizando Fondos</title>
    <style>
        body {
            background-color: #f0f0f0;
        }
        div {
            background-image: url('https://via.placeholder.com/150');
            background-size: cover;
            height: 200px;
            width: 200px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Ejercicios Prácticos

Ejercicio 1: Estilizando un Título y un Párrafo

Crea un documento HTML con un título y un párrafo. Aplica los siguientes estilos:

  • El título debe tener un color de texto azul y estar centrado.
  • El párrafo debe tener un tamaño de fuente de 18px y un color de fondo gris claro.

Solución

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejercicio de Estilo</title>
    <style>
        h1 {
            color: blue;
            text-align: center;
        }
        p {
            font-size: 18px;
            background-color: #d3d3d3;
        }
    </style>
</head>
<body>
    <h1>Título Azul</h1>
    <p>Este es un párrafo con fondo gris claro.</p>
</body>
</html>

Ejercicio 2: Estilizando un Div con Bordes y Fondo

Crea un documento HTML con un div. Aplica los siguientes estilos:

  • El div debe tener un borde de 3px sólido y redondeado.
  • El div debe tener un color de fondo amarillo y un padding de 20px.

Solución

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejercicio de Bordes y Fondo</title>
    <style>
        div {
            border: 3px solid black;
            border-radius: 15px;
            background-color: yellow;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div>Div con borde y fondo estilizado.</div>
</body>
</html>

Conclusión

En esta lección, has aprendido cómo aplicar estilos a los elementos HTML utilizando CSS. Ahora sabes cómo cambiar colores, estilizar texto, aplicar bordes y fondos. Estos conocimientos te permitirán mejorar significativamente la apariencia de tus páginas web.

En la siguiente lección, profundizaremos en el diseño web responsivo, donde aprenderás a hacer que tus páginas web se vean bien en diferentes dispositivos y tamaños de pantalla.

◄ Anterior
◄
Siguiente ►
►

Curso de HTML

Módulo 1: Introducción a HTML

Módulo 2: Formateo de Texto en HTML

Módulo 3: Enlaces y Medios en HTML

Módulo 4: Tablas en HTML

Módulo 5: Formularios en HTML

Módulo 6: Elementos Semánticos de HTML5

Módulo 7: Técnicas Avanzadas de HTML

Módulo 8: Integración de HTML y CSS

Módulo 9: Diseño Web Responsivo

Módulo 10: Mejores Prácticas y Accesibilidad

Módulo 11: Proyecto: Construyendo un Sitio Web Completo

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados