Cómo agregar CSS a HTML: comprensión de CSS en línea, interno y externo

Si está creando un sitio web, entonces comenzará con HTML. Con este lenguaje de marcado, puede agregar encabezados, párrafos, imágenes, tablas, formularios, listas y mucho más. Pero no puede controlar cómo se presentan o distribuyen estos elementos en la página.

Ahí es donde entra CSS.

CSS describe cómo debe verse una página para el navegador, que la representa en consecuencia. CSS se puede usar para una amplia variedad de propósitos estilísticos, que incluyen cambiar el texto y el color de fondo en una página, eliminar el subrayado de los enlaces y animar imágenes, texto y otros elementos HTML.

Si desea un mayor control sobre la apariencia de su sitio, entonces necesita saber cómo agregar CSS a su sitio. Empecemos.

Cómo agregar CSS a HTML

Hay tres formas de agregar CSS a HTML. Puede agregar CSS en línea en un atributo de estilo para diseñar un solo elemento HTML en la página. Puede incrustar una hoja de estilo interna agregando CSS a la sección principal de su documento HTML. O puede vincular a una hoja de estilo externa que contendrá todo su CSS separado de su HTML.

Aquí hay otra forma de resumir las tres formas en que puede agregar CSS a HTML:

CSS en línea: Requiere el atributo de estilo colocado dentro de un elemento HTML.
CSS interno: Requiere el elemento
y se encuentra en la sección de encabezado del archivo HTML.
```
 
<!DOCTYPE html>
<html>
<head>
<style>
selector {
CSS property: value;
}
</style>
</head>
```
Usar CSS interno se considera una mejor práctica que usar CSS en línea.
El CSS interno le permite diseñar grupos de elementos a la vez, en lugar de tener que agregar los mismos atributos de estilo a los elementos una y otra vez.
Además, dado que separa el CSS y HTML en diferentes secciones pero lo mantiene en el mismo documento, el CSS interno es ideal para sitios web de una página. Si tiene un sitio de varias páginas y desea realizar cambios en su sitio, deberá abrir cada archivo HTML que represente esas páginas y agregar o cambiar el CSS interno en cada sección principal. (O tu puedes usar CSS externo).
Ejemplo de CSS interno
Supongamos que desea cambiar el color del texto de cada elemento de párrafo en una página web a un color azul marino. En ese caso, establecería la propiedad de color en el código de color hexadecimal para un tono azul marino (# 33475B), colóquelo dentro de una regla CSS establecida con el selector de tipo pagsy colóquelo todo dentro de la sección principal de la página web.
Así es como se vería el archivo HTML:
```
 
 
   <!DOCTYPE html>
<html>
<head>
<style>
p {
  color: #33475B;
}
</style>
</head>
<body>
<h2>Internal CSS Example</h2>
<p>The default text color for the page is black. However I can change the color of every paragraph element on the page using internal CSS.</p>
<p>Using internal CSS, I only need to write one rule set to change the color of every paragraph elemnet.</p>
<p>With inline CSS, I'd have to add a style attribute to every single paragraph in my HTML.</p>
</body>
</html>
 
```
Aquí está el resultado:
ver la pluma Ejemplo de CSS interno de Christina Perricone (@hubspot) en CódigoPen.

Cómo agregar un archivo CSS externo a HTML
El CSS externo tiene el mismo formato que el CSS interno, pero no está envuelto en etiquetas

Cómo agregar CSS a HTML

Ejemplo de CSS interno

Cómo agregar un archivo CSS externo a HTML