Rimorsoft Online
Blog Foro

CSS para principiantes


¿Por qué hablar de CSS en Rimorsoft?

Es una gran pregunta y me da gusto responderla debido a que CSS dejó de ser un simple sistema de formato y diseño web para convertirse hoy día en una tecnología que proporciona robustez con una sintaxis fácil e intuitiva.

Si hablamos de una ruta de aprendizaje respecto al mundo de la programación web diría:

  1. Aprende HTML.
  2. Luego CSS.

De hecho es la ruta común, pero... La simplicidad que se vende en internet es muy engañosa, a medida que avanzas en CSS te das cuenta que hay demasiado contexto, herencia, caja, técnicas, tipos y adecuación. No debemos subestimar su alcance, incluso conozco a un especialista en CSS que fue a algunos países de habla hispana en America, Europa y los Estados Unidos por sus conocimientos en esta área y su curriculum solo decía CSS (obviamente cuenta con grandes contactos, dominio del inglés y además buenas habilidades de relaciones públicas pero si hablamos del nivel técnico podría decirte que es un genio en CSS, NO Python, NI PHP, NI Javascript, NI nada más).

CSS parece simple pero la realidad es otra, somos muy pocos los que nos sentiríamos orgullosos de dominarlo para buscar trabajo específicamente en dicha área.

Dominar a CSS significa entender sus conceptos, saber manejar las herramientas que proporciona el navegador para inspeccionar el código en busca de problemas y al mismo tiempo entender cómo mejorar la calidad de nuestras hojas de estilo a nivel de rendimiento, estructura y organización.

Desarrollé una serie de publicaciones para comprender su arquitectura, selectores y técnicas de desarrollo y diseño. Comencemos.

Selectores en CSS

En CSS es muy fácil crear un desastre, necesitamos desde el principio escribirlo con la intención de que este pueda escalar y acepte el respectivo mantenimiento futuro.

Usamos los selectores para hacer coincidir nuestros estilos con los elementos en HTML. Tenemos las siguientes formas básicas que quizás conoces:

  1. ID.
  2. Etiqueta.
  3. Clase.
  4. Atributo.

Ejemplo usando un ID.

En HTML

<div id="app">
    <!-- contenido -->
</div>

En CSS

#app {
    /* desarrollo */
}

Esto aplica para cualquier regla, usamos un selector para afectar lo escrito en HTML. Revisemos estos selectores sencillos hasta conocer estos conceptos en su totalidad.

Selectores básicos

Es el tipo de selectores usados con más frecuencia, se aprender con mucha facilidad porque mantienen su estructura desde el nacimiento de esta tecnología.

  1. Universal: *.
  2. Etiqueta o elemento HTML: h1, p, etc.
  3. Pseudoelemento: ::after, ::first-letter, etc.
p::first-letter {
    font-size: 28px;
}
  1. Pseudoclase: :hover, :focus, etc.
a:hover {
    color: orange;
}
  1. Atributos: [href], [title], etc.
a[title] {
    color: black;
}
  1. Clase: .post.
  2. ID: #app.

De esta pequeña lista se podría decir que los selectores más complejos son los de atributos, pseudoelementos y pseudoclases, sin embargo, después de algún tiempo trabajando con CSS conseguimos entenderlos a la perfección.

Dedicaremos otras publicaciones a ellos, de momento el enfoque está en cómo combinar dichos estilos CSS.

Combinar estilos CSS

En CSS la complejidad aumenta a medida que nos encontramos con toda la gama de combinaciones precisamente porque "combinación" referencia a la suma de reglas, formatos o estilos, veamos diferentes ejemplos:

  1. Descendencia: section p.
  2. Hijo inmediato: section > p.
  3. Hermano general: h1 ~ p.
  4. Hermano adyacente: h1 + p.

Con el tiempo sabrás hacer cualquier tipo de combinación, esta podría ser la suma de clases, etiquetas, atributos, signos de combinación y generar como resultado un selector complejo.

Los signos empleados para combinar son: Espacio en blanco, >, + y ~.

Estos signos son principalmente quienes añaden complejidad porque hablan directamente de una relación entre los elementos, en otras palabras debemos entender lo escrito en HTML para hacer una combinación sensata. Estos signos deben usarse correctamente para indicar por ejemplo que un elemento es hijo directo, descendiente, hermano en general o hermano adyacente.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <section>
            <h1>Título de ejemplo</h1>

            <p>Subrayado y amarillo, tamaño 18px</p>
            <p>Subrayado y gris, tamaño 18px</p>
            <p>Subrayado y gris, tamaño 18px</p>

            <div>
                <p>Solo le afecta el tamaño de 18px</p>
            </div>
        </section>
    </body>
</html>

¿Qué tenemos en el HTML?

  1. El elemento section tiene muchos p como descendencia.
  2. El elemento section tiene tres p como hijos directos.
  3. h1 tiene tres p como hermanos.
  4. h1 tiene un elemento p como hermano adyacente (adyacente significa pegado, inmediato o vecino).

Entendiendo a nuestro HTML podemos aplicar los siguientes estilos.

section p {
    font-size: 18px;
}
section > p {
    text-decoration: underline;
}
h1 ~ p {
    background-color: gray;
}
h1 + p {
    background-color: yellow;
}

Este es el resultado, vemos cómo afectamos a la descendencia completa, hijos directos, hermanos y adyacentes.

¿Qué logramos?

  1. section p: Afectó a todos los hijos en general.
  2. section > p: Con esto logramos afectar a los hijos directos solamente.
  3. h1 ~ p: Conseguimos aplicar estilos a todos los hermanos de h1.
  4. h1 + p: Significa hermano adyacente, con esto conseguimos aplicar estilo al hermano p, el que está directamente pegado al elemento h1.

Ampliando estas definiciones

Descendencia

El carácter empleado es un espacio en blanco. Básicamente separa al selector padre de su descendencia con un espacio, debes tomar en cuenta que su alcance es muy amplio, afectará a toda su descendencia y esto pudiera ser un problema si quisieras limitar su efecto.

section p {
    font-size: 18px;
}

Hijo inmediato

Con esto reducimos el alcance, afectamos únicamente a sus hijos inmediatos usando el carácter >. En otras palabras no afectamos a toda la descendencia, solo hijos.

section > p {
    text-decoration: underline;
}

Hermano general (todos los hermanos)

Aquí usamos el carácter ~ conocido como un tipo de virgulilla, onda o tilde de la eñe. Con este afectamos a todos los hermanos de un elemento. Esta técnica es muy usada en cualquier tipo de listas, es tan general que usarla en otros elementos podría generarnos confusión.

h1 ~ p {
    background-color: gray;
}

Hermano adyacente

Dicho de otro modo sería hermanos pegados, este se usa para afectar a hermanos inmediatamente seguidos, pegados, que sean vecinos o que compartan fronteras.

h1 + p {
    background-color: yellow;
}
Libro de TDD - Lo que debes saber
Compra el libro
TDD lo que debes saber

Newsletter

Únete a más de 4.000+ personas y no te pierdas nunca más de las nuevas clases, tips, tutoriales y más cada semana.

    No enviamos spam. Puedes darte de baja en cualquier momento.