Introducción y entorno de CSS
CSS (Cascading Style Sheets) es el lenguaje que define la presentación visual de las páginas web. Mientras que HTML estructura el contenido, CSS se encarga de darle forma, color, espaciado y posicionamiento, transformando documentos simples en experiencias visuales atractivas y funcionales.
¿Qué es CSS?
CSS es un lenguaje de hojas de estilo que permite separar la estructura del contenido (HTML) de su presentación visual. Esta separación es fundamental en el desarrollo web moderno, ya que facilita el mantenimiento del código y permite crear diseños consistentes en múltiples páginas.
El término "Cascading" hace referencia a cómo se aplican las reglas de estilo: cuando múltiples reglas afectan al mismo elemento, CSS determina cuál tiene prioridad siguiendo un sistema de cascada específico.
/* Ejemplo básico de regla CSS */
h1 {
color: blue;
font-size: 24px;
text-align: center;
}
En este ejemplo, estamos aplicando tres propiedades al elemento h1: color azul, tamaño de fuente de 24 píxeles y alineación centrada.
Anatomía de una regla CSS
Cada regla CSS está compuesta por dos partes principales:
- Selector: indica qué elementos HTML se verán afectados
- Declaración: define qué propiedades se aplicarán y con qué valores
selector {
property: value;
property: value;
}
Las declaraciones se escriben entre llaves y cada una termina con punto y coma. Una regla puede contener múltiples declaraciones para modificar diferentes aspectos del elemento seleccionado.
Formas de aplicar CSS
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
Existen tres métodos principales para incorporar estilos CSS en una página web:
CSS inline:
<p style="color: red; font-weight: bold;">Texto con estilo inline</p>
CSS interno:
<head>
<style>
p {
color: green;
margin: 10px;
}
</style>
</head>
CSS externo:
<head>
<link rel="stylesheet" href="styles.css">
</head>
El método externo es el más recomendado para proyectos profesionales, ya que permite reutilizar los estilos en múltiples páginas y mantener el código organizado.
Selectores básicos
Los selectores son la forma de indicar a CSS qué elementos queremos estilizar. Los más fundamentales incluyen:
Selector de elemento:
p {
line-height: 1.5;
}
Selector de clase:
.highlight {
background-color: yellow;
}
Selector de ID:
#header {
width: 100%;
height: 80px;
}
Las clases se pueden aplicar a múltiples elementos, mientras que los IDs deben ser únicos en cada página. Esta distinción es crucial para mantener un código CSS bien estructurado.
Propiedades fundamentales
CSS ofrece cientos de propiedades, pero algunas son especialmente importantes para comenzar:
Propiedades de texto:
.text-style {
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
color: #333333;
}
Propiedades de fondo:
.background-example {
background-color: #f0f0f0;
background-image: url('pattern.png');
background-repeat: no-repeat;
}
Propiedades de espaciado:
.spacing-example {
margin: 20px;
padding: 15px;
border: 2px solid black;
}
El modelo de caja es fundamental en CSS: cada elemento tiene contenido, padding (relleno interno), border (borde) y margin (margen externo).
Unidades de medida
CSS utiliza diferentes unidades de medida según el contexto:
Unidades absolutas:
.absolute-units {
width: 300px;
height: 200px;
font-size: 14pt;
}
Unidades relativas:
.relative-units {
width: 50%;
font-size: 1.2em;
margin: 2rem;
}
Las unidades relativas como %, em y rem son preferibles para crear diseños responsivos que se adapten a diferentes tamaños de pantalla.
Herramientas de desarrollo
Los navegadores modernos incluyen herramientas de desarrollo que facilitan el trabajo con CSS:
- Inspector de elementos: permite ver y modificar estilos en tiempo real
- Panel de estilos: muestra todas las reglas CSS aplicadas a un elemento
- Modo responsive: simula diferentes tamaños de pantalla
Estas herramientas son esenciales para depurar problemas de CSS y experimentar con diferentes valores antes de aplicarlos al código definitivo.
Organización del código CSS
Mantener el código CSS organizado es crucial para proyectos de cualquier tamaño:
/* Reset básico */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Estilos generales */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
}
/* Componentes específicos */
.button {
display: inline-block;
padding: 10px 20px;
background-color: #007bff;
color: white;
text-decoration: none;
border-radius: 4px;
}
Los comentarios ayudan a documentar el propósito de diferentes secciones, facilitando el mantenimiento futuro del código.
Completa CSS 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