Aprender CSS Introducción y entorno

Módulo del curso de CSS

CSS
CSS
Módulo del curso
2 lecciones
1 ejercicios
Actualizado: 30/06/2025

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.

Lecciones de este módulo

Explora todas las lecciones disponibles en Introducción y entorno

Explora más sobre CSS

Descubre más recursos de CSS

Alan Sastre - Autor del curso

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.