Formas de agregar estilos

css

Tiempo de lectura:

Publicado:

Actualizado:

Ver en YouTube

Estilos en línea

Hasta este punto la única forma que conocemos de utilizar estilos es por medio del atributo style en la etiqueta de apertura de algún elemento.

<p style="color:tomato;">Contenido</p>

A este método se le conoce como estilos en línea.

Pero existen otros dos métodos que nos pueden ayudar a separar mejor los estilos del contenido para mejorar la legibilidad del código y su mantenimiento.

Para poder utilizarlos, debemos aprender un concepto al que llamamos selectores.

Sobre selectores

Nos ayudan a seleccionar los elementos que serán afectados por las reglas CSS que escribimos. Tienen la siguiente forma:

selector {
  propiedad: valor:
}

Por ahora veremos los selectores más sencillos…

Etiquetas

Estos selectores por medio del nombre de alguna etiqueta, lo que afectará a todas las etiquetas de ese tipo:

Por ejemplo:

<p>Contenido A</p>
<p>Contenido B</p>
<p>Contenido C</p>
<p>Contenido D</p>
p {
  color: tomato;
  background-color: silver;
  padding: 4px;
  border-radius: 4px;
}

ID

Cuando sólo queremos estilizar un elemento específico, podemos utilizar el atributo id con un valor arbitrario.

En este caso, uno de los párrafos tiene el identificador un-identificador, el cual podemos usar para seleccionarlo con CSS.

<p>Contenido A</p>
<p id="un-identificador">Contenido B</p>
<p>Contenido C</p>
<p>Contenido D</p>

Para seleccionar un ID, debemos utilizar el símbolo #, seguido del nombre del identificador.

#un-identificador {
  color: forestgreen;
}

Class

Es un atributo que nos permite agregar una lista de identificadores al elemento. Similar a id, pero podemos tener múltiples clases y cada clase puede estar en múltiples elementos.

<p>Contenido A</p>
<p id="un-identificador">Contenido B</p>
<p class="una-clase">Contenido C</p>
<p class="una-clase otra-clase">Contenido D</p>

Para seleccionar por medio de clases, tenemos que utilizar el punto ., seguido del nombre del identificador.

.una-clase {
  color: slateblue;
}
.otra-clase {
  background-color: gold;
}

Estilos internos

La segunda forma de agregar estilos es por medio de la etiqueta <style>. Esta debe de ir dentro de la cabeza del documento.

Aquí podemos agregar los selectores y reglas que necesitemos.

<html>
  <head>
    <style>
      p {
        color: tomato;
        background-color: silver;
        padding: 4px;
        border-radius: 4px;
      }
      #un-identificador {
        color: forestgreen;
      }
      .una-clase {
        color: slateblue;
      }
      .otra-clase {
        background-color: gold;
      }
    </style>
  </head>
  <body>
    <p>Contenido A</p>
    <p id="un-identificador">Contenido B</p>
    <p class="una-clase">Contenido C</p>
    <p class="una-clase otra-clase">Contenido D</p>
  </body>
</html>

De esta forma es más fácil diferenciar el contenido de los estilos.

Estilos externos

Para este método debemos crear un nuevo archivo con la extensión .css.

p {
  color: tomato;
  background-color: silver;
  padding: 4px;
  border-radius: 4px;
}
#un-identificador {
  color: forestgreen;
}
.una-clase {
  color: slateblue;
}
.otra-clase {
  background-color: gold;
}

Dentro del documento HTML debemos utilizar una etiqueta link con relación stylesheet y haciendo referencia al nombre del archivo CSS.

<html>
  <head>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <p>Contenido A</p>
    <p id="un-identificador">Contenido B</p>
    <p class="una-clase">Contenido C</p>
    <p class="una-clase otra-clase">Contenido D</p>
  </body>
</html>

Comentarios