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

Introducción a CSS

Siguiente ►
►

CSS, o Cascading Style Sheets (Hojas de Estilo en Cascada), es un lenguaje de diseño que se utiliza para describir la presentación de un documento escrito en HTML o XML. CSS es fundamental para el diseño web, ya que permite separar el contenido de la presentación visual, facilitando la creación de sitios web atractivos y responsivos.

Conceptos Clave de CSS

  1. Selectores: Los selectores son patrones utilizados para seleccionar los elementos HTML que deseas estilizar. Existen varios tipos de selectores, como selectores de tipo, de clase, de ID, y más.

  2. Propiedades y Valores: CSS se compone de propiedades y valores. Las propiedades son aspectos del estilo que deseas cambiar (como color, font-size, margin, etc.), y los valores son las especificaciones de esas propiedades (como red, 16px, 10px, etc.).

  3. Reglas CSS: Una regla CSS está compuesta por un selector y un bloque de declaración. El bloque de declaración contiene una o más declaraciones separadas por punto y coma.

    p {
    color: blue;
    font-size: 14px;
}

    En este ejemplo, p es el selector, y el bloque de declaración contiene dos declaraciones: color: blue; y font-size: 14px;.

  4. Cascada y Especificidad: CSS sigue un modelo de cascada, lo que significa que las reglas se aplican en un orden específico. La especificidad determina qué reglas se aplican cuando hay conflictos.

  5. Herencia: Algunas propiedades CSS se heredan de los elementos padre a los hijos, como font-family y color.

Ejemplo Práctico

Vamos a crear un simple archivo HTML y aplicarle estilos CSS básicos.

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Bienvenido a CSS</h1>
    <p>Este es un párrafo de ejemplo para mostrar cómo funciona CSS.</p>
</body>
</html>

CSS (styles.css)

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

h1 {
    color: #333;
    text-align: center;
    margin-top: 20px;
}

p {
    color: #666;
    font-size: 16px;
    line-height: 1.5;
    margin: 20px;
}

Explicación del Código

  • body: Establecemos una fuente general para el documento y un color de fondo. También eliminamos los márgenes y el relleno predeterminados para un control total del diseño.
  • h1: Cambiamos el color del texto, centramos el encabezado y ajustamos el margen superior.
  • p: Ajustamos el color del texto, el tamaño de la fuente, la altura de línea para mejorar la legibilidad, y el margen para separar el texto de otros elementos.

Ejercicio Práctico

Tarea: Crea un archivo HTML con una lista de tus películas favoritas y aplica estilos CSS para personalizar la apariencia de la lista.

Solución

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mis Películas Favoritas</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Mis Películas Favoritas</h1>
    <ul>
        <li>El Padrino</li>
        <li>El Señor de los Anillos</li>
        <li>Inception</li>
        <li>Matrix</li>
    </ul>
</body>
</html>

CSS (styles.css)

body {
    font-family: 'Georgia', serif;
    background-color: #e0f7fa;
    margin: 0;
    padding: 0;
}

h1 {
    color: #00796b;
    text-align: center;
    margin-top: 20px;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    color: #004d40;
    font-size: 18px;
    margin: 10px 0;
    text-align: center;
}

Retroalimentación

  • Error Común: Olvidar vincular el archivo CSS al HTML. Asegúrate de que la etiqueta <link> esté correctamente configurada en el <head> del documento HTML.
  • Consejo: Experimenta con diferentes propiedades CSS para ver cómo afectan el diseño. Cambia colores, fuentes y tamaños para personalizar tu página.

Conclusión

En esta lección, hemos aprendido los conceptos básicos de CSS, cómo aplicar estilos a un documento HTML y cómo CSS nos permite controlar la presentación visual de nuestras páginas web. En el próximo módulo, profundizaremos en el modelo de caja de CSS, un concepto fundamental para entender cómo se distribuyen los elementos en una página.

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