Cómo insertar estilos css en html

actualizado: 28 / 01 / 2023

Existen tres formas de poner css en html, por css externo, interno o escribiendo código css directamente en las etiquetas html.

A continuación te explicaremos las tres formar de agregar la hoja css a tu página web.

1. Agregar css a html con una hoja de estillos externa

Con una hoja css externa, puedes cambiar el aspecto de toda una página web completa solo agregando un archivo con extensión .css

En cada documento html que tenga nuestro sitio, debe estar incluido el archivo css dentro de la etiqueta head esto agregara todas las reglas definidas en la hoja de estilos.

html<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body></body>
</html>

Esta es la manera más común de poner el css denlas páginas web y la que más se recomienda.

2. Css dentro de html con la etiqueta style

Podemos agregar los estilos de una página html dentro del mismo documento. Recomendamos esta opción cuando esos estilos se necesitan solo en ese html y no en el resto de la página, Para agregar estilos internos podemos hacerlo dentro de la etiqueta style en el head del documento. Mira el siguiente ejemplo en el que cambiamos el color del body dentro de nuestro html.

html<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: violet;
      }

      h1 {
        color: gray;
        margin-left: 20px;
      }
    </style>
  </head>
  <body>
    <h1>Logo</h1>
    <p>Contenido</p>
  </body>
</html>

3. Incluir css en html con estilos en línea (inline styles)

También podemos incluir código css dentro del código de las etiquetas html, estos se conocen como los estilos inline para agregar estilos solo a una etiqueta html.

Para usar estilos inline agregas un atributo style="" a la etiqueta a la cual deseas cambiarle el los estilos. Mira el siguiente ejemplo en el que añadimos estilos directamente dentro de las etiquetas h1 y p

html<!DOCTYPE html>
<html>
  <body>
    <h1 style="color:red;text-align:center;">Logo</h1>
    <p style="color:green;">Contenido</p>
  </body>
</html>