Cómo Llamar a Una Clase CSS desde HTML

3 minuto(s)

Luego de crear una clase CSS, necesitamos llamarla en nuestro código HTML.

Para hacer esto necesitas realizar ciertos pasos que te mostraré a continuación.

En este tutorial aprenderás a Cómo Llamar a Una Clase CSS desde HTML, vamos con ello.

Código CSS usado en una página HTML — Puedes llamar a varias clases CSS desde código HTML

Llamando a la Clase de CSS desde HTML

Te compartiré 2 formas de hacerlo:

Desde el mismo código HTML

En esta forma colocaremos tanto el código CSS como el código HTML en la misma página.

Tengo la siguiente clase de CSS llamada .bordenaranja

Esta clase CSS le da un borde de color naranja a una imagen:

.bordenaranja {
  border: 5px solid orange;
}

1 2 3 4 5	.bordenaranja { border: 5px solid orange; }

Esta es la imagen que usaré para este tutorial, es el logo de Nube Colectiva:

Imagen a la cual le aplicaremos la clase de CSS — Puedes usar otro elemento HTML para aplicarle una clase de CSS

La imagen anterior se vería así en el código HTML.

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Cómo Llamar a Una Clase CSS desde HTML</title>    

  </head>
  <body>   

    <main>

        <div class="micontenedor">

          <!-- Imagen -->
          <h1>Cómo Llamar a Una Clase CSS desde HTML</h1>
          <img src="img/logo.png">

        </div>

    </main>

  </body>
</html>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26	<!doctype html> <html lang="es"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Cómo Llamar a Una Clase CSS desde HTML</title> </head> <body> <main> <div class="micontenedor"> <!-- Imagen --> <h1>Cómo Llamar a Una Clase CSS desde HTML</h1> <img src="img/logo.png"> </div> </main> </body> </html>

Para llamar a la clase de CSS en el código HTML de la imagen.

Solo agregamos el atributo class=”bordenaranja”, sin el punto del inicio del nombre de la clase:

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Cómo Llamar a Una Clase CSS desde HTML</title>    

    <!-- Clase CSS -->
    <style>
      .bordenaranja {
        border: 1px solid orange;
      }
    </style>

  </head>
  <body>   

    <main>

        <div class="micontenedor">

          <!-- Imagen -->
          <h1>Cómo Llamar a Una Clase CSS desde HTML</h1>
          <img src="img/logo.png" class="bordenaranja"> <!-- Clase CSS -->

        </div>

    </main>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

  </body>
</html>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35	<!doctype html> <html lang="es"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Cómo Llamar a Una Clase CSS desde HTML</title> <!-- Clase CSS --> <style> .bordenaranja { border: 1px solid orange; } </style> </head> <body> <main> <div class="micontenedor"> <!-- Imagen --> <h1>Cómo Llamar a Una Clase CSS desde HTML</h1> <img src="img/logo.png" class="bordenaranja"> <!-- Clase CSS --> </div> </main> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> </body> </html>

Entonces si vamos al navegador y actualizamos la página.

Podemos ver que le estamos aplicando la clase CSS al elemento HTML, en este caso a la imagen:

Imagen a la cual le aplicamos una clase de CSS — Internamente estamos llamando la clase CSS en el código HTML de la imagen

El método de Archivos Separados es la mejor manera y recomendada de llamar a una clase de CSS en HTML. Esta práctica es altamente recomendada por la comunidad de diseñadores web del mundo.

En Archivos Separados

Crea una carpeta llamada css para mantener el orden.

Dentro de la carpeta css crea un archivo llamado estilos.css:

/miweb
  ├── /css
      ├── /estilos.css // Crea este archivo 
  ├── /img
  ├── index.html

1 2 3 4 5 6 7	/miweb ├── /css ├── /estilos.css // Crea este archivo ├── /img ├── index.html

Abre el archivo estilos.css y agrégale lo siguiente:

.bordenaranja {
    border: 5px solid orange;
}

1 2 3 4 5	.bordenaranja { border: 5px solid orange; }

En el código HTML borramos el código CSS que teníamos anteriormente.

Y en su lugar llamamos al archivo estilos.css:

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Cómo Llamar a Una Clase CSS desde HTML</title>    

    <!-- Llamamos al archivo 'estilos.css' que contiene nuestra clase CSS -->
    <link href="css/estilos.css" rel="stylesheet">

  </head>
  <body>   

    <main>

        <div class="micontenedor">

          <!-- Imagen -->
          <h1>Cómo Llamar a Una Clase CSS desde HTML</h1>
          <img src="img/logo.jpg" class="bordenaranja"> <!-- Clase CSS -->

        </div>

    </main>

  </body>
</html>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29	<!doctype html> <html lang="es"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Cómo Llamar a Una Clase CSS desde HTML</title> <!-- Llamamos al archivo 'estilos.css' que contiene nuestra clase CSS --> <link href="css/estilos.css" rel="stylesheet"> </head> <body> <main> <div class="micontenedor"> <!-- Imagen --> <h1>Cómo Llamar a Una Clase CSS desde HTML</h1> <img src="img/logo.jpg" class="bordenaranja"> <!-- Clase CSS --> </div> </main> </body> </html>