CSS en el Head

Autor: J. Luis

#CSS

Otra forma de integrar estilos CSS en una página web es usando la etiqueta style dentro del head de una página web HTML, un ejemplo <style>estilos</style>

Suscríbete a nuestro canal en Youtube

✅ 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.

Leido 13966 veces | 1 usuarios

Descarga del código fuente HTML + CSS de CSS en el Head

Accede al código fuente esencial de nuestra aplicación en formato ZIP ó TXT. Ideal para desarrolladores que desean personalizar o integrar nuestra solución.