Apuntes css

¿Para qué quieres herencias cuando tienes !important?

Lección 3: Selectores básicos en CSS

Los selectores son la base de CSS: permiten apuntar a elementos HTML concretos para aplicarles estilos. En esta lección veremos los selectores más comunes (etiqueta, clase e ID), la sintaxis de las reglas CSS y cómo se resuelven los conflictos entre estilos.

Sintaxis de las reglas CSS

Una regla CSS combina un selector (qué elemento estilizar) con una declaración (cómo estilizarlo). La declaración incluye propiedades (por ejemplo, color) y valores (por ejemplo, blue).

Estructura:

selector { propiedad: valor; }

Ejemplo:

h1 { color: blue; }

Esto hace que todos los <h1> sean azules.

Se pueden aplicar múltiples propiedades a un selector, separadas por ;:

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

También se pueden estilizar varios selectores a la vez:

h1, h2 {
    color: red;
    font-size: 18px;
}

Si un selector necesita una propiedad diferente, se puede escribir por separado:

h1, h2 {
    color: red;
    font-size: 18px;
}
h2 {
    font-family: Arial, sans-serif;
}

Selectores básicos

1 Selectores de elemento

Apuntan directamente a etiquetas HTML (como p, h1 o div).

p {
    color: green;
}

Este ejemplo hace que todos los <p> se vean en verde.


2 Selectores de clase

Apuntan a elementos con un atributo class. Se escribe un punto (.) seguido del nombre de la clase.

.destacado {
    background-color: yellow;
}

<p class="destacado">Este párrafo tiene fondo amarillo.</p>

3 Selectores de ID

Apuntan a un elemento con un atributo id único. Se usa una almohadilla (#) seguida del nombre del ID.

#titulo-principal {
    color: purple;
}

<h1 id=" titulo-principal">Título principal</h1>

Nota: Los IDs deben usarse con moderación, ya que no son reutilizables como las clases.

Conflictos y herencia

Cuando varias reglas CSS afectan al mismo elemento, la cascada decide cuál aplicar.

Herencia

Algunos estilos se heredan desde elementos contenedores. Por ejemplo, una fuente definida en body se aplicará a los párrafos a menos que estos tengan reglas propias.

body {
    font-family: Arial, sans-serif;
}
p {
    color: blue; /* Sobrescribe el color heredado */
}

Nota: Solo algunas propiedades, como font-family, color o line-height, se heredan automáticamente. Otras, como márgenes o bordes, no lo hacen

Especificidad

Las reglas más específicas tienen prioridad. De mayor a menor:

  • ID (#id)
  • Clase (.clase)
  • Elemento (p)
p {
    color: blue;
}
#parrafo-especial {
    color: red; /* Gana por ser más específico */
}

<p id=" parrafo-especial">Este párrafo es rojo.</p>

!important

Sirve para forzar una regla, aunque puede dificultar el mantenimiento del código.

p {
    color: blue !important;
}
p {
    color: red; /* Ignorado */
}

Orden

Cuando dos reglas tienen la misma especificidad, se aplica la última en ser leída por el navegador. También influye el tipo de hoja de estilo (inline > interna > externa).

<head>
    <style>
        p { color: blue; }
        p { color: red; } /* Gana por ser la última */
    </style>
</head>
<body>
    <p>Este párrafo es rojo.</p>
</body>

Ejemplo completo

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Selectores Básicos</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        h1 {
            color: blue;
            font-size: 24px;
        }
        .destacado {
            background-color: yellow;
        }
        #titulo-principal {
            color: purple;
        }
    </style>
</head>
<body>
    <h1 id="titulo-principal">Título principal</h1>
    <p class="destacado">Este párrafo tiene fondo amarillo.</p>
    <p>Este párrafo hereda la fuente de body.</p>
</body>
</html>

Puedes copiar este código y probarlo para ver en acción los selectores de etiqueta, clase e ID.

Buenas prácticas

  • Prefiere clases sobre IDs: Una misma clase puede aplicarse a múltiples elementos, mientras que un ID debe ser único en toda la página.
  • Evita !important: Solo úsalo como último recurso.
  • Usa minúsculas en selectores y propiedades CSS.
  • Incluye comentarios para organizar tu código: /* Esto es un comentario */
TOP