¿Cómo implementar CSS en nuestro HTML?

Última actualización: 01 - 11 - 2023

¿Qué significa y qué es CSS?

CSS es el acrónimo de Cascading Style Sheet u Hojas de Estilo en Cascada en español. La razón del nombre es debido a que este lenguaje (no de programación) lee la información que es escrita dentro de su etiqueta o archivo externo de arriba hacia abajo. Estas hojas de estilo se encargan de darle forma visual a un archivo HTML, es la tecnología responsable de aplicar colores, márgenes, tamaños, fuentes, posicionamiento y animaciones a los elementos que se encuentran en una página web.👨‍🔧

¿Cómo funciona CSS?

Para que nuestros estilos sean mostrados en la pantalla es necesario conocer las formas en las que se puede trabajar con CSS. Existen tres maneras de aplicar estilos con CSS:

  1. Estilos en línea

    2. Incluir CSS dentro de los elementos HTML es la menos recomendada de las opciones, aunque hay casos muy puntuales donde es requerido. Esta forma consiste en darle un atributo "style" a la etiqueta HTML que quieres modificar, por ejemplo:

    <h1 style="font-size: 20px;">Título Principal</h1>

    ¡Nota importante!

    Aplicar estilos en línea va a reemplazar la misma propiedad que hayas escrito en el archivo dedicado al CSS o a la etiqueta style que hayas colocado en el head. En el ejemplo anterior se utilizó un tamaño de fuente de 20 píxeles, si en el archivo externo o en la etiqueta usaste la misma propiedad con un tamaño diferente, la que va a tener prioridad al renderizar la página son los elementos en línea.

  2. La etiqueta style

    3. Utilizar la etiqueta style dentro del head del documento HTML es una opción si los estilos que quieres implementar son pocos. Dar estilos CSS de esta forma ahorra peso en tu página web evitando crear un archivo extra.

    Esta etiqueta debe estar al final de las demás etiquetas dentro del head, de esta forma:

    <head>
      <meta charset="UTF-8">
      <meta http-equi="X-UA-Compatible" content="width=device-width, initial-scale=1.0">
      <title>Document</title>

      <!-- Aquí va la etiqueta --> 
      <style>
      <!-- Tu código CSS -- > 
      </style>
    </head>

  3. Como archivo externo

    4. Definir el código CSS en un archivo externo es la forma más recomendable de dar estilos a un sitio web. Estos archivos son creados con la extensión .css y por lo general son nombrados como el mismo archivo del HTML (con su respectiva extensión .css), como index.css, styles.css, app.css o main.css. Aunque son estándares, el nombre no importa mucho siempre y cuando la ruta esté bien escrita en el head del HTML, para ello se utiliza la etiqueta link.

    <head>
      <meta charset="UTF-8">
      <meta http-equi="X-UA-Compatible" content="width=device-width, initial-scale=1.0">
      <title>Document</title>

      <!-- Aquí va la etiqueta, también debe ir al final del head --> 
      <link rel="stylesheet" href="direccion-de-tu-archivo.css">
    </head>

La sintaxis de CSS

Ahora que sabes las formas de agregar CSS a tu documento de HTML es momento de saber como se escriben estos estilos.

CSS se escribe a través de declaraciones donde se definen un selector una propiedad y un valor.

El selector es el elemento de HTML al que se le quiere aplicar los estilos, estos pueden ser seleccionados por el mismo nombre de la etiqueta, por clase o por un identificador único.

Las propiedades son lo que modifican las características de ese elemento, como su tamaño de fuente, el color, márgenes internos y externos, etc.

El valor indica de qué forma o cómo va a ser modificada la propiedad.

Estas declaraciones tienen que ir encerradas dentro de un bloque con llaves ( {} ) y cada propiedad con su valor debe finalizar con un punto y coma ( ; ).

selector{
  propiedad:valor;
}

/* Ejemplo modificando una etiqueta h1 */

h1{
  font-size:20px;
  color:#fff;
  text-align:center;
}

Exploraremos los selectores CSS en el siguiente capítulo de esta saga. 😁

Volver