ProgramingWeb

¿Cómo agregar css a html?

Existen tres formas de insertar css en nuestro 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.

Enlazar Css externo a tu html

Con una hoja css externa, puedes cambiar el aspecto de toda una página web completa solo agregando un archivo con terminació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.

<!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.

CSS interno en tu html

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.

<!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>

Añadir css dentro de las etiquetas html inline css

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

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