Módulo: Introducción y entorno
Este módulo forma parte del curso de CSS. Incluye 2 lecciones y 1 ejercicios de programación .
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
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.
Ejercicios de programación
Otros módulos de este curso
Lecciones de este módulo
Explora todas las lecciones disponibles en Introducción y entorno
Todos los módulos del curso
Navega entre los módulos de CSS
Explora más sobre CSS
Descubre más recursos de CSS
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, CSS 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.