Curso de HTML5 y CSS3: Cómo aplicar los estilos

Selectores en CSS3

Los selectores en CSS3 se utilizan para apuntar a elementos HTML y aplicarles estilos. Existen varios tipos de selectores, cada uno con su propia funcionalidad y casos de uso ideales. A continuación, te presento los principales tipos de selectores disponibles en CSS3.

Selectores de etiquetas

Los selectores de etiquetas se utilizan para seleccionar todos los elementos de un mismo tipo (etiqueta HTML). El formato es simple: basta con escribir el nombre de la etiqueta.

p {
    color: blue;
}

En este ejemplo, todos los elementos <p> de la página se mostrarán en color azul.

Selectores de clases

Los selectores de clases son más flexibles. Se utilizan para seleccionar elementos que comparten una misma clase, permitiendo que diferentes etiquetas tengan el mismo estilo. Para usar un selector de clase, se precede el nombre de la clase con un punto (.) en CSS.

.mi-clase {
    font-size: 18px;
    background-color: yellow;
}

Este código aplicará un tamaño de fuente de 18px y un fondo amarillo a todos los elementos que tengan la clase mi-clase.

Selectores de ID

Los selectores de ID son específicos para un único elemento en la página. Se utilizan cuando quieres aplicar estilos únicos a un elemento en particular. En CSS, se utiliza el símbolo de almohadilla (#) para los selectores de ID.

#mi-id {
    margin: 20px;
    border: 1px solid black;
}

En este caso, solo el elemento con el ID mi-id obtendrá un margen de 20px y un borde negro.

Combinación de selectores

CSS también permite combinar varios selectores de diversas maneras, lo que proporciona aún más control sobre los estilos que se aplican. Por ejemplo:

div.mi-clase {
    color: red;
}

Este selector aplica el color rojo únicamente a los <div> que tienen la clase mi-clase.

Descendientes y selectores de hijo

Además de los selectores básicos, podemos seleccionar elementos en función de su relación con otros elementos. Por ejemplo, un selector de descendientes selecciona todos los elementos que están dentro de un determinado elemento.

ul li {
    list-style-type: square;
}

Este selector aplicará un estilo a todos los <li> que estén dentro de un <ul>, cambiando el tipo de marcador a cuadrado.

Ejemplo práctico de uso de selectores

A continuación, presento un ejemplo completo que combina varios tipos de selectores:

<!DOCTYPE html>
<html lang="es">
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <header>
        <h1>Mi Página Web</h1>
    </header>

    <ul class="menu">
        <li><a href="#home">Inicio</a></li>
        <li><a href="#about">Acerca de</a></li>
        <li><a href="#services">Servicios</a></li>
    </ul>

    <article id="about">
        <p class="texto">¡Bienvenido a mi página!</p>
    </article>

</body>
</html>

En el archivo CSS correspondiente, podrías aplicar estilos a los diferentes selectores, por ejemplo:

h1 {
    color: green;
}

.menu li {
    display: inline;
    padding: 10px;
}

#about {
    background: lightgray;
}

Conclusión

Los selectores son una parte esencial para aplicar estilos en CSS. Comprender cómo usarlos correctamente te permitirá crear páginas web más atractivas y funcionales. A medida que desarrolles tus habilidades en HTML5 y CSS3, experimentar con diferentes selectores y combinaciones te ayudará a perfeccionar tu enfoque en la estilización de elementos.

blog.vermiip.es