💅CSS ¿Cómo hacer 🌠 magia?

Quizás en tu camino⚔️ Jedi aprendiendo sobre el mundo 🌍 de las páginas web, has tratado de encontrar la solución a como centrar una etiqueta div, si ese es tu caso, este artículo es para ti 🌈 …

Primero tenemos que tener en cuenta que CSS (Cascading Style Sheets — Hojas de Estilo cascada para nosotros los mortales), es el lenguaje de estilos utilizado para describir la presentación de documentos HTML o XML (Incluye también lenguajes basados en XML como SVG o XHTML), o dicho en términos más simples lo usamos para darle estilos de manera selectiva a elementos o documentos HTML.

Veamos la anatomía de una regla CSS

👀 Recuerda que tenemos varios tipos de selectores:

• Selector de elementos CSS: Selecciona elementos de HTML en función del nombre del elemento.

• Selector de ID de CSS: Usa el atributo de id de un elemento HTML para seleccionar un elemento especifico (Especifícalo con un carácter hash #).

• Selector de clases CSS: Selecciona elementos HTML con un atributo de clase especifico (Especifícalo con un carácter de punto (.)).

• Selector universal de CSS: Selecciona todos los elementos HTML de la página (Especifícalo con un asterisco *).

• Selector de agrupación: Selecciona los elementos HTML con las mismas definiciones de estilo, imagina que tienes h1 y p con exactamente los mismos estilos, en este cao, será mejor agrupar los selectores para minimizar el código.

Esta sección puedo llamarla, ejemplos con dibujitos feos:

Para esto tendremos dos archivos principales index.html y styles.css:

index: Tendrá nuestro template de HTML.

Styles: Tendrá toda la magia de css.

Nuestro HTML quedaría de esta forma, en donde cómo podemos observar, con la etiqueta link le decimos que obtendrá los estilos de styles.css:

Y todo el trabajo sucio, quedaría en el archivo que mandamos a llamar, el cual quedaría maso menos así:

EL resultado, sería el siguiente:

Como podemos observar, el implementar estilos en una pagina web, es algo muy sencillo.

Pero recordemos para que era este artículo, si observamos, nuestros rectángulos no están centrados, entonces, agregamos la propiedad de margin: auto; en nuestro contenedor principaly PUM, magia 🤯…

Y esto no es más que una embarrada de todo lo que podemos hacer, podemos realizar incluso animaciones, pero esa es historia para otro capítulo.🤓