CSS en el Head
✅ Cómo aplicar CSS dentro del documento HTML usando la etiqueta <style>
Una de las formas más comunes de aplicar estilos CSS es mediante la inclusión directa en el mismo documento HTML, utilizando la etiqueta <style>. Esta etiqueta debe colocarse exclusivamente dentro del bloque <head>, que corresponde a la cabecera del documento.
Este enfoque tiene algunas ventajas cuando se trata de ejemplos educativos o documentos con estilos simples. Sin embargo, también presenta una desventaja importante: si se desea modificar un estilo aplicado en varias páginas, será necesario editar cada una de ellas manualmente, ya que los estilos no se centralizan en un archivo externo.
Este método se recomienda cuando:
-
Se necesita aplicar un pequeño conjunto de estilos.
-
Se requieren estilos personalizados para una página específica.
-
Se desea complementar los estilos generales definidos en un archivo externo.
🔷 Paso 1: Estructura básica del documento HTML
Comienza creando la estructura básica de una página HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mi Página Web</title>
</head>
<body>
</body>
</html>
🔷 Paso 2: Inserta la etiqueta <style> en la sección <head>
Dentro del <head>, incluye la etiqueta <style>. Aquí es donde definirás tus estilos CSS.
<head>
<meta charset="utf-8">
<title>Mi Página Web</title>
<style>
/* Aquí van los estilos */
</style>
</head>
🔷 Paso 3: Escribe las reglas CSS dentro de <style>
Agrega las reglas CSS que desees aplicar. Por ejemplo:
body {
background: #120832;
}
.codea {
text-align: center;
width: 1170px;
margin: 0 auto;
background: white;
padding: 50px;
}
h1 {
color: #04488C;
}
🔷 Paso 4: Aplica los estilos en el cuerpo de la página
Crea el contenido dentro del <body> usando las clases o etiquetas a las que aplicaste estilo.
<body>
<div class="codea">
<h1>Título del contenido de la página web</h1>
<p>En esta sección se colocan textos, imágenes y multimedia como videos o audios.</p>
</div>
</body>
🔷 Paso 5: Visualiza el resultado en el navegador
Guarda el archivo con extensión .html y ábrelo en tu navegador para ver los estilos aplicados.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CODEA APP | DISEÑO WEB</title>
<style>
body {
background: #120832;
}
.codea {
text-align: center; /* Centra el texto */
width: 1170px; /* Ancho del contenedor */
margin: 0 auto; /* Centrado horizontal */
background: white; /* Color de fondo */
padding: 50px; /* Espaciado interior */
}
h1 {
color: #04488C; /* Color del título */
}
</style>
</head>
<body>
<div class="codea">
<h1>Título del contenido de la página web</h1>
<p>En esta sección se colocan los textos, imágenes y elementos multimedia como videos o audios de la página web.</p>
</div>
</body>
</html>
📌 Recomendaciones
-
Usa este método solo si necesitas pocos estilos o estilos únicos por página.
-
No es recomendable para sitios grandes, ya que obliga a repetir el mismo código en múltiples archivos.
-
Para proyectos más grandes, lo ideal es usar un archivo CSS externo.
Recurso del Tutorial
GratisTutoriales Recomendados
Sigue explorando publicaciones de la misma categoría
