Imagen destacada del artículo Cómo insertar estilos css en html

Cómo insertar estilos css en html

html svgcss svg
actualizado: 07 / 04 / 2022

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.

1. Conectar hoja de estillos externa en html

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. Estilos 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. Estilos en línea (inline styles) css dentro de cada etiqueta

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>
Artículos relacionados:
Cómo poner comentarios en javascript

Imagen destacada del artículo Cómo poner comentarios en javascript

Cómo crear un menú desplegable con html y css

Imagen destacada del artículo Cómo crear un menú desplegable con html y css

Cómo desinstalar paquetes npm

Imagen destacada del artículo Cómo desinstalar paquetes npm

Aprende a usar e insertar imágenes en html

Imagen destacada del artículo Aprende a usar e insertar imágenes en html

Cómo poner una imagen de fondo en html con css

Imagen destacada del artículo Cómo poner una imagen de fondo en html con css

Cómo crear un dropdown (menu desplegable) accesible con reactjs

Imagen destacada del artículo Cómo crear un dropdown (menu desplegable) accesible con reactjs

Cómo justificar el texto html con css

Imagen destacada del artículo Cómo justificar el texto html con css

Cómo cambiar color del texto en html con css

Imagen destacada del artículo Cómo cambiar color del texto en html con css