Guía CSS: Estilos y Selectores HTML

En anteriores publicaciones te he estado hablando sobre el HTML, su estructura y cómo utilizarlo, pero como te habrás podido dar cuenta, el resultado de una web generada únicamente con HTML plano, no es demasiado llamativa o bonita, aquí es donde entra la publicación de hoy.

Web hecha únicamente utilizando HTML sin estilos

Bienvenido/a a otro fascinante post donde exploraremos el mundo del CSS (Cascading Style Sheets o Hojas de Estilo en Cascada). En esta ocasión, te explicaré cómo agregar CSS a un documento HTML utilizando archivos externos, una práctica esencial para mantener nuestro código organizado. Además, aprenderemos sobre los distintos tipos de selectores en CSS, lo que nos permitirá aplicar estilos de manera precisa a nuestros elementos HTML.

¿Qué es el CSS y para qué se usa?

CSS es un lenguaje de hojas de estilo que nos permite estilizar y diseñar documentos HTML. Si bien HTML se encarga de la estructura básica de la página, el CSS se ocupa de su presentación visual, permitiendo controlar aspectos como el color, la tipografía, el espaciado, entre muchos otros. Utilizar CSS mejora significativamente la experiencia del usuario y nos brinda una amplia gama de posibilidades creativas para diseñar páginas web atractivas y funcionales.

Vincular un archivo CSS a HTML

Para mantener el CSS separado del HTML, lo más recomendable es utilizar un archivo externo. Esto no solo ayuda a que nuestro proyecto sea más fácil de mantener, sino que también permite que los navegadores almacenen en caché los estilos y los reutilicen en múltiples páginas del sitio, cosa que no se podría hacer si los estilos están metidos directamente en el HTML utilizando el atributo style.

Creando y vinculando un archivo CSS

Creación de un Archivo CSS: Abre tu editor de código, como Visual Studio Code, y crea un nuevo archivo con la extensión .css. Por ejemplo, puedes llamarlo estilos.css.
Guardando el Archivo: Asegúrate de guardar el archivo en la misma carpeta donde se encuentra tu archivo HTML.
Vinculación en HTML: En tu archivo HTML, dentro del elemento <head>, añade la siguiente línea para enlazar tu archivo CSS:
```
 <link rel="stylesheet" href="estilos.css">
```
Este elemento <link> le dice al navegador dónde encontrar la hoja de estilo y cómo interpretarla.

Selectores en CSS

Los selectores en CSS son patrones que identifican a qué elementos se aplicarán los estilos definidos dentro de las reglas CSS.

Tipos de Selectores

Selectores de Tipo: Seleccionan elementos por su nombre de etiqueta, como h1, p, div, etc.
```
  <h1>Título de ejemplo</h1>
```
```
  h1 {
    color: blue;
  }
```
Selectores de Clase: Empiezan con un punto . y seleccionan elementos basados en el atributo class. Como vimos en publicaciones anteriores, los elementos de HTML pueden tener atributos, uno de estos es el atributo class , en este podemos agregar una o varias clases separadas por un espacio para poder utilizarlas más adelante en el CSS.
```
  <p class="destacado">Texto destacado</p>
```
```
  .destacado {
    font-weight: bold;
  }
```
Selectores de ID: Comienzan con un # y seleccionan elementos basados en el atributo id. Es importante recordar que los IDs de los elementos deben ser únicos.
```
  <div id="principal">Texto principal</div>
```
```
  #principal {
    background-color: yellow;
  }
```

Selectores de Atributo: Se utilizan para seleccionar elementos con un atributo específico.

  <a href="https://example.com">Enlace de ejemplo</a>

  a[href="https://example.com"] {
    color: green;
  }

Pseudoclases y Pseudoelementos: Selectores como :hover y ::after permiten estilizar estados de un elemento o partes específicas de él.
```
  a:hover {
    color: red;
  }

  p::first-line {
    font-weight: bold;
  }
```
Combinadores: Sirven para relacionar varios selectores de forma más específica, como descendientes ( > ) o hermanos adyacentes ( + ).
```
  ul > li {
    list-style-type: none;
  }

  h1 + p {
    margin-top: 0;
  }
```

Ideas prácticas para aplicar HTML y CSS

Página de "Sobre mí": Utiliza HTML para estructurar una biografía breve y CSS para diseñar elementos como fotografías, cabeceras y listas de hobbies o logros.

🖌️ Resultado de ejemplo
Galería de imágenes responsiva: Crea una galería usando <div> para cada imagen y aplica estilos como width, padding, y box-shadow con CSS para que se ajuste elegantemente a diferentes tamaños de pantalla.

🖌️ Resultado de ejemplo
Formulario de contacto estilizado: Diseña un formulario con campos para nombre, correo electrónico y mensaje. Utiliza CSS para hacerlo atractivo y fácil de usar, ajustando elementos como border-radius, background-color, y hover .

🖌️ Resultado de ejemplo

Conclusión

Hasta aquí la introducción a cómo agregar CSS a tus documentos HTML mediante archivos externos y un recorrido por los selectores que ofrece CSS.

No te preocupes si no acabas de entender cómo funciona, es normal, el HTML y el CSS pueden llegar a ser muy complejos, pero con práctica estoy seguro de que te convertirás en un verdadero experto/a. Si quieres ver qué otros tipos de selectores hay, puedes acceder a esta tabla.

Espero que este post te inspire a experimentar con estos conceptos y a crear páginas web visualmente impresionantes y eficientes. ¡Hasta la próxima! 👋🏼

Agregando estilos al HTML: Una guía sobre CSS y sus selectores

Table of contents

¿Qué es el CSS y para qué se usa?

Vincular un archivo CSS a HTML

Creando y vinculando un archivo CSS

Selectores en CSS

Tipos de Selectores

Ideas prácticas para aplicar HTML y CSS

Conclusión

Agregando estilos al HTML: Una guía sobre CSS y sus selectores

Table of contents

¿Qué es el CSS y para qué se usa?

Vincular un archivo CSS a HTML

Creando y vinculando un archivo CSS

Selectores en CSS

Tipos de Selectores

Ideas prácticas para aplicar HTML y CSS

Conclusión

Did you find this article valuable?