Uso de CSS
Hay 3 formas de agregar estilos CSS al documento HTML.
- Estilo en línea: asignar un atributo
stylea los HTML elements - Estilo interno: usar el elemento
<style>en la sección<head> - Estilo externo: crear un archivo CSS externo
Estilo en línea
Para definir reglas de estilo, puedes usar el atributo style de cualquier elemento HTML. Puedes aplicar estas reglas únicamente a ese elemento. El atributo style puede contener cualquier propiedad CSS.
Ejemplo de creación de un estilo en línea para un documento HTML:
Ejemplo de estilo en línea CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2 style="color:#1c87c9">Some heading</h2>
<p style="color:#8ebf42; font-size:15px">Some paragraph</p>
</body>
</html>Resultado
Ahora expliquemos el ejemplo anterior donde usamos el estilo en línea. Dentro de la etiqueta <h2> escribimos style="color: #1c87c9", lo que significa que nuestro título (encabezado) debe ser de color #1c87c9.
Lo mismo hicimos con la etiqueta <p>. Escribimos color: #8ebf42; font-size: 15px dentro de nuestra etiqueta, lo que significa que la información entre la etiqueta de apertura <p> y la de cierre </p> será de color #8ebf42, y el tamaño del texto será de 15px.
Estilo interno
Con el estilo interno, cada archivo HTML contiene el código CSS necesario para dar estilo a una página. Simplemente coloca el código CSS dentro de las etiquetas <head> y </head> de cada archivo HTML que desees estilizar. El siguiente ejemplo lo ilustra.
Los cambios que realices afectarán solo a una página. Si necesitas dar estilo a más páginas, deberás realizar los cambios una por una.
El siguiente ejemplo muestra que el párrafo será blanco y la página será de color #1c87c9.
Ejemplo de creación de un estilo interno para un documento HTML:
Ejemplo de estilo interno CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #1c87c9;
}
p {
color: white;
}
</style>
</head>
<body>
<p>Some information</p>
</body>
</html>Estilo externo
El estilo externo se utiliza ampliamente para aplicar estilos generales a todo el sitio web. Se refiere a crear un archivo CSS externo que incluya toda la información de estilo. Puedes crear este tipo de archivos con cualquier editor de texto o editor HTML como "Bloc de notas" o "Sublime Text".
Un archivo CSS contiene solo código CSS y simplemente lo guardas con la extensión .css. Para vincular una hoja de estilos externa a una página web, debes usar la etiqueta <link> dentro de la sección <head> del documento HTML. Cada página web debe estar vinculada a la hoja de estilos.
Al utilizar una hoja de estilos externa, todos los archivos HTML se vinculan a un solo archivo CSS, lo que resulta en una apariencia y sensación consistentes. Si deseas modificar el estilo de las páginas web, solo necesitas realizar los cambios correspondientes en un único archivo .css.
Ejemplo de creación de un estilo externo para un documento HTML:
Ejemplo de estilo externo CSS
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>Práctica
¿Cuáles son las formas de incluir CSS en HTML?