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
Guarda tu progreso
Inicia sesión para no perder tu progreso y accede a miles de tutoriales, ejercicios prácticos y nuestro asistente de IA.
Más de 25.000 desarrolladores ya confían en CertiDevs
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.
Completa HTML y certifícate
Únete a nuestra plataforma y accede a miles de tutoriales, ejercicios prácticos, proyectos reales y nuestro asistente de IA personalizado para acelerar tu aprendizaje.
Asistente IA
Resuelve dudas al instante
Ejercicios
Practica con proyectos reales
Certificados
Valida tus conocimientos
Más de 25.000 desarrolladores ya se han certificado con CertiDevs