CSS (Hojas de Estilo en Cascada) es un lenguaje utilizado para definir la presentación visual de documentos estructurados como HTML. Los archivos CSS utilizan la extensión .css y permiten controlar aspectos como colores, fuentes, espaciado y diseño.

Métodos para incluir CSS en HTML

Existen tres formas principales de aplicar estilos CSS a documentos HTML:

Estilos en línea

Se aplican directamente a elementos HTML usando el atributo style:

<div style="background-color: lightblue;">
<h3 style="color: darkred;">Encabezado con estilo</h3>
<p style="font-size: 16px;">Párrafo estilizado.</p>
</div>

Hoja de estilos interna

Se define dentro de la sección <head> del documento HTML:

<head>
<style>
body { background-color: #f0f8ff; }
h3 { color: navy; }
p { font-family: Arial, sans-serif; }
</style>
</head>

Archivo CSS externo

Método recomendado que utiliza un archivo CSS separado:

<head>
<link rel="stylesheet" type="text/css" href="estilos.css">
</head>

Contenido de estilos.css:

body {
    background-color: #e6f2ff;
}
h1 {
    color: #0066cc;
    text-align: center;
}
p {
    font-family: "Georgia", serif;
    font-size: 18px;
}
/* Esto es un comentario en CSS */

Selectores por ID y Clase

Selector por ID

Aplica estilos a un elemento específico identificado por su ID único:

<style>
#texto-principal {
    text-align: center;
    color: #ff4500;
}
</style>
<p id="texto-principal">Texto centrado en naranja</p>
<p>Este párrafo no se ve afectado por el estilo.</p>

Selector por clase

Aplica estilos a múltiples elementos que comparten la misma clase:

<style>
.alinear-centro {
    text-align: center;
}
</style>
<h2 class="alinear-centro">Encabezado centrado</h2>
<p class="alinear-centro">Párrafo centrado.</p>

Selector específico por elemento y clase

Combina un elemento específico con una clase:

<style>
p.destacado {
    text-align: center;
    font-weight: bold;
}
</style>
<div class="destacado">Este div no se centra.</div>
<p class="destacado">Este párrafo sí se centra y está en negrita.</p>

Múltiples clases

Un elemento puede tener varias clases aplicadas simultáneamente:

<style>
.centrado { text-align: center; }
.resaltado { color: #dc143c; }
</style>
<div class="centrado resaltado">Texto centrado y rojo</div>

Propiedades CSS comunes

• Color de fondo: background-color: #add8e6;
• Imagen de fondo: background-image: url('fondo.jpg');
• Fondo simplificado: background: #add8e6 url('fondo.jpg') no-repeat top right;
• Color de texto: color: #228b22;
• Alineación de texto: text-align: center;
• Familia tipográfica: font-family: "Arial", Helvetica, sans-serif;
• Tamaño de fuente: font-size: 24px;

Estilos para enlaces

a:link { color: #000080; } /* Enlaces no visitados */
a:visited { color: #800080; } /* Enlaces visitados */
a:hover { color: #ff1493; } /* Al pasar el cursor */
a:active { color: #ff0000; } /* Al hacer clic */

Selectores anidados

• p { }: Aplica estilos a todos los elementos <p>
• .marcado { }: Aplica estilos a elementos con class="marcado"
• .marcado p { }: Aplica estilos a elementos <p> dentro de elementos con class="marcado"
• p.marcado { }: Aplica estilos a elementos <p> con class="marcado"

Esta introducción cubre los conceptos fundamentales de CSS necesarios para comenzar a trabajar con estilos web. La práctica continua es esencial para dominar completamente el lenguaje.