💅CSS ¿Cómo hacer 🌠 magia?
Published: 2023-05-26 01:09:38

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.

<u>**Veamos la anatomía de una regla CSS**</u>

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0udnuieiy8asxbgmc35e.png)

_👀 Recuerda que tenemos varios tipos de selectores:_

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9vo4pu4q0pncsruhwxx6.png)

- **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 #).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jjmkhyfh4o3gnfl8xpv8.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qh8q0l6mtlg2v7xc8etv.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fokd9i9susmaczitpxl2.png)

- **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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w5m3bti249csgr8xs2pr.png)

<u>**Esta sección puedo llamarla, ejemplos con dibujitos feos:**
</u>
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:

_<link rel=”stylesheet” href=”styles.css”>_

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ovxwc1z3theu05vsqqkv.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7306dlppeo0n02vdygwb.png)

EL resultado, sería el siguiente:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k7jkqdtljrrn7uf4r050.png)

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 🤯…


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ip63iivoce4hj3ejx8g4.png)

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.🤓