Guía de Estilo del Documento HTML

Introducción

La etiqueta HTML <style> se utiliza para agregar estilos a sus páginas web. Estos estilos pueden alterar la apariencia y la sensación de su sitio web de varias maneras. En este laboratorio, aprenderá a usar la etiqueta <style> para crear una hoja de estilos personalizada que se puede utilizar en toda su página web.

Nota: Puede practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Configurando la Estructura HTML

Primero, establezcamos la estructura HTML básica. En su archivo index.html, cree el siguiente código HTML:

<!doctype html>
<html>
  <head>
    <title>My Webpage</title>
  </head>

  <body>
    <h1>Welcome to my Webpage</h1>
    <p>This is my first paragraph.</p>
  </body>
</html>

Este código establece una estructura básica de página web con un encabezado y un párrafo.

Agregando Estilos en Línea

La primera forma de agregar estilos a su página web es agregándolos directamente al atributo style del elemento HTML. En este paso, agregaremos un estilo en línea al encabezado h1. Agregue los siguientes atributos al elemento h1:

<h1 style="color: blue; font-size: 36px;">Welcome to my Webpage</h1>

Este estilo aumentará el tamaño de la fuente y cambiará el color del encabezado a azul.

Agregando Estilos Incrustados

La etiqueta <style> se utiliza para agregar estilos incrustados a su página web. Puede agregar múltiples estilos dentro de esta etiqueta. En este paso, usaremos un estilo incrustado para agregar estilos al elemento p. Dentro de la etiqueta <head>, agregue el siguiente código:

<style>
  p {
    color: green;
    font-size: 18px;
  }
</style>

Este estilo agrega un color verde al párrafo y reduce el tamaño de la fuente a 18px.

Usando Clases CSS

Las clases CSS se utilizan para aplicar estilos a múltiples elementos a la vez. En este paso, crearemos una clase para un mensaje de advertencia genérico que se puede reutilizar en toda nuestra página web. Agregue este código a la etiqueta <style>:

<style>
  .warning {
    color: red;
    background-color: yellow;
    border: 1px solid black;
    padding: 10px;
  }
</style>

Este código crea un estilo para un mensaje de advertencia que incluye un color de fondo amarillo, un borde negro y un color de texto rojo.

A continuación, aplicaremos esta clase al encabezado h1. Modifique su elemento h1 para incluir la clase:

<h1 class="warning">Welcome to my Webpage</h1>

Este paso agrega un estilo de advertencia al encabezado.

Agregando Hojas de Estilos Externas

Las hojas de estilos externas se utilizan para separar la hoja de estilos del contenido HTML. En este paso, creará una hoja de estilos externa que se puede reutilizar en múltiples páginas web.

Cree un nuevo archivo llamado style.css. En style.css, agregue el siguiente código:

h1 {
  font-size: 48px;
}

p {
  font-size: 24px;
}

.warning {
  background-color: green;
}

Este código establece los estilos para los elementos h1 y p, y cambia la clase warning para que tenga un color de fondo verde.

Para enlazar esta hoja de estilos externa a su página index.html, agregue el siguiente código a la etiqueta <head>:

<link rel="stylesheet" type="text/css" href="style.css" />

Esta línea enlaza el archivo style.css a la página index.html.

Agregando Consultas Media

Las consultas de medios se utilizan para aplicar diferentes estilos a diferentes tamaños de dispositivos. En este paso, usaremos consultas de medios para ajustar el tamaño de la fuente de nuestros elementos. Agregue este código al archivo style.css:

@media (max-width: 600px) {
  h1 {
    font-size: 36px;
  }

  p {
    font-size: 18px;
  }
}

Este código ajusta el tamaño de la fuente h1 a 36px y el tamaño de la fuente p a 18px para tamaños de pantalla menores o iguales a 600px de ancho.

Agregando Selectores y Anidamiento

En este paso, introduciremos los selectores y el anidamiento, dos conceptos avanzados de CSS.

Crea un nuevo archivo llamado advanced.css. En advanced.css, agrega el siguiente código:

header h1 {
  color: blue;
  font-style: italic;
}

main p {
  color: red;
}

Este código selecciona el elemento h1 dentro del elemento header y le aplica un color azul y un estilo de fuente cursiva. También selecciona el elemento p dentro del elemento main y le aplica un color rojo.

Para enlazar esta hoja de estilos externa a tu página index.html, agrega el siguiente código a la etiqueta <head>:

<link rel="stylesheet" type="text/css" href="advanced.css" />

Esta línea enlaza el archivo advanced.css a la página index.html.

Resumen

En este laboratorio, aprendiste cómo usar varios métodos para agregar estilos a tu página web. Comenzaste usando estilos en línea y estilos incrustados, luego pasaste a clases CSS y hojas de estilos externas. También aprendiste sobre consultas de medios, selectores y anidamiento. Usando estos métodos, puedes crear una hoja de estilos personalizada que se puede usar en toda tu página web y crear un sitio web moderno y reactivo.