Estilos CSS en HTML
La presentación visual de una página web es tan importante como su contenido. Mientras que HTML define la estructura y el contenido de nuestras páginas, CSS (Cascading Style Sheets) se encarga de controlar cómo se ve ese contenido: colores, fuentes, espaciado, posicionamiento y mucho más.
CSS permite separar el contenido de la presentación, lo que significa que podemos mantener nuestro HTML limpio y semántico mientras aplicamos estilos sofisticados. Esta separación de responsabilidades es fundamental en el desarrollo web moderno.
Formas de aplicar CSS
Existen tres métodos principales para incorporar estilos CSS en nuestros documentos HTML, cada uno con sus propias ventajas y casos de uso específicos.
CSS inline
Los estilos inline se aplican directamente en el elemento HTML usando el atributo style. Son útiles para estilos específicos y únicos:
<p style="color: blue; font-size: 18px;">
This text is blue and larger than normal.
</p>
CSS interno
Los estilos internos se definen dentro del elemento <style> en la sección <head> del documento. Permiten aplicar estilos a múltiples elementos:
<head>
<style>
h1 {
color: red;
text-align: center;
}
p {
font-family: Arial, sans-serif;
line-height: 1.5;
}
</style>
</head>
CSS externo
Los estilos externos se almacenan en archivos .css separados y se vinculan al HTML mediante el elemento <link>. Esta es la práctica más recomendada:
<head>
<link rel="stylesheet" href="styles.css">
</head>
Selectores básicos
Los selectores CSS determinan qué elementos HTML recibirán los estilos. Comprender los selectores fundamentales es esencial para aplicar estilos de manera efectiva.
Selector de elemento
Selecciona todos los elementos de un tipo específico:
h2 {
color: green;
margin-bottom: 10px;
}
Selector de clase
Las clases CSS permiten aplicar estilos a elementos específicos usando el atributo class:
<div class="highlight">
<p>This content has special styling.</p>
</div>
.highlight {
background-color: yellow;
padding: 15px;
border-radius: 5px;
}
Selector de ID
Los identificadores únicos se utilizan para elementos específicos mediante el atributo id:
<header id="main-header">
<h1>Welcome to our website</h1>
</header>
#main-header {
background-color: navy;
color: white;
padding: 20px;
}
Propiedades CSS fundamentales
Tipografía y texto
El control de la tipografía es crucial para la legibilidad y el diseño:
.content {
font-family: 'Helvetica', Arial, sans-serif;
font-size: 16px;
font-weight: bold;
text-align: justify;
line-height: 1.6;
}
Colores y fondos
CSS ofrece múltiples formas de definir colores y fondos:
.card {
color: #333333;
background-color: #f8f9fa;
background-image: url('pattern.png');
background-repeat: no-repeat;
background-position: center;
}
Espaciado y dimensiones
El modelo de caja controla el espaciado y las dimensiones de los elementos:
.box {
width: 300px;
height: 200px;
margin: 20px auto;
padding: 15px;
border: 2px solid #ddd;
}
Cascada y especificidad
La cascada en CSS determina qué estilos se aplican cuando hay conflictos. Los estilos se aplican según su especificidad y orden de aparición:
- Los estilos inline tienen la mayor especificidad
- Los IDs tienen más peso que las clases
- Las clases tienen más peso que los elementos
- Los estilos posteriores sobrescriben a los anteriores con igual especificidad
/* Menor especificidad */
p { color: black; }
/* Mayor especificidad */
.important { color: blue; }
/* Aún mayor especificidad */
#special { color: red; }
Esta comprensión de los estilos CSS y su integración con HTML proporciona la base necesaria para crear páginas web visualmente atractivas y bien estructuradas.
Lecciones de este módulo
Explora todas las lecciones disponibles en Estilos CSS en HTML
Explora más sobre HTML
Descubre más recursos de HTML
Alan Sastre
Ingeniero de Software y formador, CEO en CertiDevs
Ingeniero de software especializado en Full Stack y en Inteligencia Artificial. Como CEO de CertiDevs, HTML es una de sus áreas de expertise. Con más de 15 años programando, 6K seguidores en LinkedIn y experiencia como formador, Alan se dedica a crear contenido educativo de calidad para desarrolladores de todos los niveles.