Introducción a CSS: qué es, cómo funciona y cómo aplicar estilos a una página HTML

Aprendé CSS desde cero: qué es, cómo se conecta con HTML, selectores, colores, tipografías, márgenes, padding, bordes y primeros estilos.


Después de aprender a estructurar una página con HTML, el siguiente paso es controlar cómo se ve. Para eso utilizamos CSS.

Importante: CSS no es un lenguaje de programación. Es un lenguaje de estilos que utilizamos para definir la presentación visual de un documento HTML.

¿Qué significa CSS?

CSS significa Cascading Style Sheets, es decir, hojas de estilo en cascada.

Su función principal es definir cómo se presenta el contenido de una página:

  • colores;
  • tipografías;
  • tamaños;
  • espacios;
  • bordes;
  • fondos;
  • alineación;
  • columnas;
  • disposición de elementos;
  • diseño adaptable a distintos dispositivos.

HTML y CSS trabajan juntos

Podemos pensar la relación de esta manera:

HTML       -> estructura y contenido
CSS        -> estilos y presentación
JavaScript -> comportamiento e interacción

HTML indica qué contenido existe. CSS define cómo se ve.

Por ejemplo, HTML puede crear un título:

<h1>Club Programador</h1>

Y CSS puede definir su color y tamaño:

h1 {
    color: blue;
    font-size: 40px;
}

La sintaxis básica de CSS

Una regla CSS suele tener esta estructura:

selector {
    propiedad: valor;
}

Por ejemplo:

p {
    color: green;
    font-size: 18px;
}

En este caso:

  • p es el selector;
  • color y font-size son propiedades;
  • green y 18px son valores.

¿Qué es un selector?

El selector indica qué elementos HTML queremos modificar.

Si escribimos:

h2 {
    color: red;
}

todos los elementos h2 afectados por esa regla se mostrarán con ese color.

Tres formas de aplicar CSS

CSS puede aplicarse de tres maneras principales.

1. CSS inline

El estilo se escribe directamente dentro del elemento HTML:

<p style="color: blue;">
    Texto azul
</p>

Puede ser útil para una prueba puntual, pero no es la mejor opción para organizar un sitio completo.

2. CSS interno

Podemos escribir reglas dentro de una etiqueta style en el head:

<head>

    <style>

        p {
            color: blue;
        }

    </style>

</head>

3. CSS externo

La forma más habitual para proyectos reales es utilizar un archivo independiente.

Por ejemplo:

mi-sitio/
|
|-- index.html
|-- styles.css

Dentro de styles.css podemos escribir:

body {
    background-color: #f5f5f5;
    font-family: Arial, sans-serif;
}

Y desde HTML lo vinculamos así:

<link rel="stylesheet" href="styles.css">

¿Dónde colocar el link de CSS?

La referencia al archivo CSS se coloca normalmente dentro de head:

<!DOCTYPE html>
<html lang="es">

<head>

    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >

    <title>Mi página</title>

    <link
        rel="stylesheet"
        href="styles.css"
    >

</head>

<body>

    <h1>Hola mundo</h1>

</body>

</html>

Primer ejemplo completo

Supongamos que tenemos este archivo index.html:

<!DOCTYPE html>
<html lang="es">

<head>

    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >

    <title>Mi primera página con CSS</title>

    <link
        rel="stylesheet"
        href="styles.css"
    >

</head>

<body>

    <h1>Club Programador</h1>

    <p>
        Estoy aprendiendo CSS.
    </p>

</body>

</html>

Y este archivo styles.css:

body {
    background-color: #f4f4f4;
    font-family: Arial, sans-serif;
}
h1 {
    color: #007bff;
    font-size: 40px;
}
p {
    color: #333;
    font-size: 18px;
}

Al abrir index.html en el navegador, veremos que HTML mantiene la estructura y CSS modifica su apariencia.

Selectores de etiqueta

El selector más básico utiliza el nombre de una etiqueta HTML.

p {
    color: #333;
}

Esta regla afecta a los párrafos.

Selectores por class

Una clase permite aplicar el mismo estilo a varios elementos.

HTML:

<p class="destacado">
    Primer texto
</p>

<p class="destacado">
    Segundo texto
</p>

CSS:

.destacado {
    color: #007bff;
    font-weight: bold;
}

Las clases se escriben en CSS comenzando con un punto.

Selectores por id

También podemos seleccionar un elemento por su id.

HTML:

<h1 id="titulo-principal">
    Club Programador
</h1>

CSS:

#titulo-principal {
    color: #007bff;
}

Los identificadores se escriben en CSS comenzando con #.

¿Class o id?

Como regla inicial:

  • class: para estilos que pueden reutilizarse;
  • id: para identificar un elemento concreto.

En CSS moderno, para estilos reutilizables es habitual trabajar principalmente con clases.

Colores

CSS permite definir colores de distintas formas.

Por nombre

h1 {
    color: blue;
}

Hexadecimal

h1 {
    color: #007bff;
}

RGB

h1 {
    color: rgb(0, 123, 255);
}

Color de fondo

body {
    background-color: #f5f5f5;
}

Tipografías

Podemos elegir una familia tipográfica:

body {
    font-family: Arial, Helvetica, sans-serif;
}

Tamaño del texto

p {
    font-size: 18px;
}

px significa píxeles, aunque más adelante veremos otras unidades como rem, em, %, vw y vh.

Negrita

h1 {
    font-weight: bold;
}

Alineación del texto

h1 {
    text-align: center;
}

Bordes

.tarjeta {
    border: 1px solid #cccccc;
}

Border radius

Podemos redondear las esquinas:

.tarjeta {
    border-radius: 10px;
}

Margin y padding

Dos propiedades fundamentales son margin y padding.

.tarjeta {
    margin: 20px;
    padding: 20px;
}

Podemos pensarlo así:

margin
    espacio exterior

border
    borde

padding
    espacio interior

contenido

Más adelante veremos esto con detalle cuando estudiemos el modelo de caja.

Transformemos una sección HTML

Supongamos que tenemos:

<section class="presentacion">

    <h1>Juan Pérez</h1>

    <p>
        Estudiante de programación
    </p>

</section>

Podemos aplicar:

.presentacion {
    background-color: #0b1220;
    color: white;
    padding: 40px;
    text-align: center;
    border-radius: 12px;
}

Con unas pocas propiedades, una estructura HTML muy simple empieza a transformarse visualmente.

CSS no cambia el significado del HTML

CSS puede hacer que un elemento se vea completamente diferente, pero su significado semántico sigue estando definido por HTML.

Por ejemplo, un h1 sigue siendo el encabezado principal aunque CSS cambie su tamaño, color o tipografía.

Por eso conviene construir primero un HTML correcto y después aplicar estilos.

¿Qué significa “en cascada”?

La palabra Cascading hace referencia a que pueden existir varias reglas que intenten aplicar estilos al mismo elemento.

El navegador debe decidir cuál prevalece teniendo en cuenta factores como:

  • el origen de la regla;
  • la especificidad del selector;
  • el orden en que aparecen las reglas;
  • algunas reglas especiales que veremos más adelante.

No hace falta dominarlo todavía. Lo importante es entender que CSS tiene un sistema para resolver conflictos entre estilos.

Errores comunes al comenzar con CSS

  • olvidar el punto y coma al separar declaraciones;
  • olvidar los dos puntos entre propiedad y valor;
  • escribir incorrectamente el selector;
  • olvidar enlazar styles.css desde HTML;
  • usar una ruta incorrecta en href;
  • confundir class con id;
  • intentar resolver la estructura del contenido únicamente con CSS;
  • abusar de estilos inline cuando el proyecto empieza a crecer.

Qué aprendimos

En esta primera guía de CSS vimos:

  • qué es CSS;
  • por qué no es un lenguaje de programación;
  • cómo se relaciona con HTML;
  • la sintaxis selector-propiedad-valor;
  • CSS inline, interno y externo;
  • cómo crear styles.css;
  • cómo enlazarlo con HTML;
  • selectores de etiqueta, clase e id;
  • colores;
  • tipografías;
  • tamaños;
  • fondos;
  • bordes;
  • margin y padding.

De HTML a CSS

Si venís siguiendo la ruta de desarrollo web, el paso anterior fue:

Proyecto final HTML: crear una página web completa desde cero

El siguiente paso es profundizar en los selectores CSS para aprender a elegir con precisión qué elementos queremos modificar:

Selectores CSS: etiquetas, clases, ID, descendientes y combinadores →

Después continuaremos con modelo de caja, tipografías, Flexbox, Grid y diseño responsive.

¿Te sirvió esta guía? ☕

Si este contenido te ayudó a aprender desarrollo web, podés apoyar a Club Programador. Cada aporte ayuda a mantener el sitio online y a seguir publicando material gratuito.

🇦🇷 Apoyar desde Argentina

☕ Invitame un café con Mercado Pago

🌎 Apoyar desde otro país

☕ Apoyar con PayPal

Descubre más desde Club Programador

Suscríbete y recibe las últimas entradas en tu correo electrónico.

2 opiniones en “Introducción a CSS: qué es, cómo funciona y cómo aplicar estilos a una página HTML”

  1. Pingback: Proyecto final HTML: crear una página web completa
  2. Pingback: Selectores CSS: clases, ID, descendientes y combinadores

Deja un comentario

Descubre más desde Club Programador

Suscríbete ahora para seguir leyendo y obtener acceso al archivo completo.

Seguir leyendo