HTML

Tutorial HTML: Estilo incorporado (style)

Aprende a usar el elemento style en HTML para incorporar CSS interno, con selectores, reglas y ventajas para diseño web efectivo.

Elemento style en el head del documento

El elemento <style> es una de las formas más directas de incorporar CSS (Cascading Style Sheets) dentro de un documento HTML. Este método, conocido como CSS incorporado o CSS interno, permite definir estilos que afectarán únicamente al documento HTML donde se encuentran declarados.

Para utilizar el elemento <style>, debemos colocarlo dentro de la sección <head> del documento HTML. Esta ubicación es importante ya que permite que los estilos se carguen y apliquen antes de que el contenido de la página se renderice, evitando así el efecto de "parpadeo" donde el contenido se muestra primero sin estilos y luego cambia su apariencia.

La estructura básica para implementar estilos incorporados es la siguiente:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document with Embedded Styles</title>
    <style>
        /* Aquí van las reglas CSS */
    </style>
</head>
<body>
    <!-- Contenido de la página -->
</body>
</html>

Dentro del elemento <style> podemos escribir todas las reglas CSS que necesitemos para dar formato a nuestra página. Por ejemplo:

<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 20px;
        }
        
        h1 {
            color: #333;
            text-align: center;
        }
        
        p {
            line-height: 1.6;
            color: #666;
        }
    </style>
</head>

Atributos del elemento style

El elemento <style> puede incluir algunos atributos que modifican su comportamiento:

type: Aunque en HTML5 ya no es necesario especificar el atributo type="text/css", en versiones anteriores era obligatorio. En HTML5 se asume por defecto que el contenido es CSS.

<!-- HTML5 (no necesita type) -->
<style>
    p { color: blue; }
</style>

<!-- HTML4 (requería type) -->
<style type="text/css">
    p { color: blue; }
</style>

media: Permite especificar para qué tipo de medio o dispositivo se aplicarán los estilos. Esto es útil para crear diseños responsivos sin necesidad de archivos externos.

<style media="screen">
    /* Estilos para pantallas */
    body { font-size: 16px; }
</style>

<style media="print">
    /* Estilos para impresión */
    body { font-size: 12pt; }
    nav { display: none; }
</style>

nonce: Atributo de seguridad utilizado con Content Security Policy (CSP) para permitir estilos específicos.

<style nonce="abc123">
    p { color: blue; }
</style>

Comentarios en CSS

Dentro del elemento <style> podemos incluir comentarios para documentar nuestro código CSS. Los comentarios en CSS comienzan con /* y terminan con */:

<style>
    /* Este es un comentario en CSS */
    
    body {
        margin: 0; /* Elimina el margen predeterminado */
        padding: 0; /* Elimina el padding predeterminado */
    }
    
    /* Los comentarios pueden ocupar
       múltiples líneas */
</style>

Uso de @rules en el elemento style

Dentro del elemento <style> también podemos utilizar reglas especiales conocidas como at-rules (reglas arroba), que comienzan con el símbolo @. Algunas de las más comunes son:

@import: Permite importar reglas CSS desde otros archivos.

<style>
    @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
    
    body {
        font-family: 'Roboto', sans-serif;
    }
</style>

@media: Define reglas específicas para diferentes tipos de medios o características del dispositivo.

<style>
    /* Estilos base */
    body {
        font-size: 16px;
    }
    
    /* Estilos para pantallas pequeñas */
    @media (max-width: 600px) {
        body {
            font-size: 14px;
        }
    }
</style>

@keyframes: Define animaciones CSS.

<style>
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    .animated {
        animation: fadeIn 2s ease-in-out;
    }
</style>

Ejemplo práctico

Veamos un ejemplo completo de cómo utilizar el elemento <style> para dar formato a una página simple:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Styled Page</title>
    <style>
        /* Estilos generales */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        
        /* Estilos para encabezados */
        h1 {
            color: #0066cc;
            border-bottom: 2px solid #eaeaea;
            padding-bottom: 10px;
        }
        
        /* Estilos para párrafos */
        p {
            margin-bottom: 15px;
        }
        
        /* Estilos para enlaces */
        a {
            color: #0066cc;
            text-decoration: none;
        }
        
        a:hover {
            text-decoration: underline;
        }
        
        /* Estilos responsivos */
        @media (max-width: 600px) {
            body {
                padding: 10px;
                font-size: 14px;
            }
            
            h1 {
                font-size: 24px;
            }
        }
    </style>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph with some text. The styles for this page are defined in the head section using the style element.</p>
    <p>Visit <a href="https://example.com">this link</a> for more information.</p>
</body>
</html>

En este ejemplo, hemos definido estilos para el cuerpo del documento, los encabezados, los párrafos y los enlaces. También hemos incluido una regla @media para hacer que la página sea responsiva en pantallas más pequeñas.

El elemento <style> en el <head> del documento es una herramienta fundamental para comenzar a trabajar con CSS en HTML, permitiéndonos aplicar estilos de manera rápida y directa sin necesidad de archivos externos.

Sintaxis básica de selectores y declaraciones CSS

Una vez que hemos colocado el elemento <style> en el <head> de nuestro documento HTML, necesitamos entender cómo escribir correctamente las reglas CSS dentro de él. La sintaxis CSS sigue un patrón específico que nos permite seleccionar elementos HTML y definir cómo deben mostrarse.

Una regla CSS se compone principalmente de dos partes: el selector y la declaración. Esta estructura básica es fundamental para aplicar estilos a nuestros documentos HTML:

selector {
    propiedad: valor;
}

Selectores CSS

Los selectores son patrones que indican a qué elementos HTML se aplicarán los estilos. Existen varios tipos de selectores, cada uno con diferentes niveles de especificidad y propósitos:

Selector de elemento: Selecciona todos los elementos de un tipo específico.

p {
    color: blue;
}

Este selector aplicará el color azul a todos los párrafos (<p>) del documento.

Selector de clase: Selecciona elementos que tienen un atributo class específico. Se identifica con un punto (.) seguido del nombre de la clase.

.highlight {
    background-color: yellow;
}

Este selector aplicará un fondo amarillo a cualquier elemento con class="highlight".

Selector de ID: Selecciona un elemento con un atributo id específico. Se identifica con un numeral (#) seguido del ID.

#header {
    background-color: black;
    color: white;
}

Este selector aplicará los estilos al elemento con id="header".

Selector de atributo: Selecciona elementos basados en la presencia o valor de un atributo.

input[type="text"] {
    border: 1px solid gray;
}

Este selector aplicará un borde gris a todos los elementos <input> que tengan type="text".

Selectores combinados: Podemos combinar selectores para mayor precisión.

/* Elementos con ambas clases */
.btn.primary {
    background-color: blue;
}

/* Elementos descendientes */
article p {
    font-size: 16px;
}

/* Hijos directos */
ul > li {
    list-style-type: square;
}

Declaraciones CSS

Las declaraciones CSS consisten en propiedades y valores que definen cómo se mostrarán los elementos seleccionados. Cada declaración termina con un punto y coma (;).

h1 {
    color: #333;           /* Color del texto */
    font-size: 24px;       /* Tamaño de fuente */
    margin-bottom: 15px;   /* Margen inferior */
}

Algunas propiedades CSS fundamentales incluyen:

Propiedades de texto:

p {
    color: #444;               /* Color del texto */
    font-family: Arial, sans-serif;  /* Tipo de fuente */
    font-size: 16px;           /* Tamaño de fuente */
    font-weight: bold;         /* Peso de fuente (negrita) */
    text-align: center;        /* Alineación del texto */
    line-height: 1.5;          /* Altura de línea */
}

Propiedades de fondo:

div {
    background-color: #f0f0f0;     /* Color de fondo */
    background-image: url('bg.jpg'); /* Imagen de fondo */
    background-repeat: no-repeat;   /* Evita que la imagen se repita */
    background-position: center;    /* Posición de la imagen */
}

Propiedades de caja:

.box {
    width: 300px;           /* Ancho */
    height: 200px;          /* Alto */
    padding: 20px;          /* Espacio interno */
    margin: 10px;           /* Espacio externo */
    border: 1px solid #ccc; /* Borde */
}

Agrupación de selectores

Podemos aplicar las mismas declaraciones a múltiples selectores separándolos con comas:

h1, h2, h3 {
    font-family: 'Georgia', serif;
    color: #333;
}

Este código aplicará la misma fuente y color a todos los encabezados h1, h2 y h3.

Comentarios en CSS

Los comentarios son útiles para documentar nuestro código CSS y se escriben entre /* y */:

/* Estilos para la navegación principal */
nav {
    background-color: #333;
}

/* 
   Estos estilos se aplican solo a la 
   versión móvil del sitio 
*/

Valores y unidades comunes en CSS

Las propiedades CSS aceptan diferentes tipos de valores:

Colores: Pueden especificarse de varias formas:

p {
    color: red;                /* Nombre del color */
    color: #ff0000;            /* Hexadecimal */
    color: rgb(255, 0, 0);     /* RGB */
    color: rgba(255, 0, 0, 0.5); /* RGBA con transparencia */
}

Unidades de longitud:

div {
    width: 80%;        /* Porcentaje del contenedor */
    height: 200px;     /* Píxeles (absoluto) */
    margin: 1em;       /* Relativo al tamaño de fuente del elemento */
    padding: 1rem;     /* Relativo al tamaño de fuente del elemento raíz */
    font-size: 16pt;   /* Puntos (generalmente para impresión) */
}

Ejemplo práctico de sintaxis CSS

Veamos un ejemplo completo que muestra diferentes selectores y declaraciones:

<style>
    /* Selector de elemento */
    body {
        font-family: Arial, sans-serif;
        line-height: 1.6;
        color: #333;
        margin: 0;
        padding: 20px;
    }
    
    /* Selector de ID */
    #main-header {
        background-color: #4a90e2;
        color: white;
        padding: 10px 20px;
        border-radius: 5px;
    }
    
    /* Selector de clase */
    .card {
        background-color: white;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 15px;
        margin-bottom: 20px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    /* Selector de atributo */
    a[target="_blank"] {
        color: #e74c3c;
        text-decoration: none;
        padding-right: 20px;
        background: url('external-link.png') no-repeat right center;
    }
    
    /* Selector descendiente */
    .card h3 {
        margin-top: 0;
        color: #2c3e50;
    }
    
    /* Selector de hijo directo */
    nav > ul {
        list-style: none;
        padding: 0;
        display: flex;
    }
    
    /* Agrupación de selectores */
    h1, h2, h3, h4, h5, h6 {
        font-family: 'Georgia', serif;
    }
    
    /* Selector de pseudo-clase */
    a:hover {
        text-decoration: underline;
    }
    
    /* Selector de pseudo-elemento */
    p::first-letter {
        font-size: 150%;
        font-weight: bold;
    }
</style>

Este ejemplo muestra cómo utilizar diferentes tipos de selectores y declaraciones para crear un conjunto completo de estilos para una página web.

Cascada y especificidad

Un concepto importante en CSS es la cascada, que determina qué estilos se aplican cuando hay reglas en conflicto. La especificidad de un selector determina su prioridad:

Selectores de ID (más específicos)
Selectores de clase y atributo
Selectores de elemento (menos específicos)

/* Especificidad baja */
p {
    color: blue;
}

/* Especificidad media */
.content p {
    color: green;
}

/* Especificidad alta */
#intro p {
    color: red;
}

En este ejemplo, un párrafo dentro de un elemento con id="intro" será rojo, independientemente de las otras reglas.

Dominar la sintaxis básica de selectores y declaraciones CSS es el primer paso para crear diseños web efectivos y atractivos directamente desde el elemento <style> en nuestros documentos HTML.

Ventajas y desventajas del CSS incorporado

El CSS incorporado mediante el elemento <style> ofrece una solución directa para aplicar estilos a nuestros documentos HTML. Sin embargo, como cualquier enfoque técnico, presenta tanto beneficios como limitaciones que debemos considerar al estructurar nuestros proyectos web.

Ventajas del CSS incorporado

Rapidez de implementación: Incorporar estilos directamente en el documento HTML permite crear y modificar rápidamente el diseño sin necesidad de crear archivos adicionales. Esto resulta especialmente útil para prototipos o páginas sencillas.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body { font-family: Arial, sans-serif; }
        .highlight { background-color: yellow; }
    </style>
</head>
<body>
    <p>Texto normal y <span class="highlight">texto destacado</span> en la misma página.</p>
</body>
</html>

Reducción de solicitudes HTTP: Al no requerir la descarga de archivos CSS externos, se elimina una solicitud HTTP, lo que puede mejorar ligeramente el tiempo de carga inicial de la página, especialmente en conexiones lentas.
Independencia del documento: Cada página contiene sus propios estilos, lo que significa que puede funcionar de manera autónoma sin depender de recursos externos. Esto puede ser útil para páginas que necesitan ser visualizadas sin conexión o enviadas por correo electrónico.
Prioridad de estilos: Los estilos incorporados tienen mayor especificidad que los estilos externos con selectores equivalentes, lo que facilita sobrescribir estilos cuando sea necesario.

<head>
    <!-- El estilo incorporado tiene prioridad sobre el externo -->
    <link rel="stylesheet" href="styles.css">
    <style>
        /* Este color prevalecerá sobre el definido en styles.css */
        p { color: blue; }
    </style>
</head>

Facilidad para pruebas: Permite probar rápidamente cambios de estilo sin modificar archivos externos, ideal durante el desarrollo o depuración.
Control de carga: Los estilos se cargan y aplican antes de que el navegador renderice el contenido, evitando el efecto de "parpadeo" (FOUC - Flash of Unstyled Content) que puede ocurrir con hojas de estilo externas.

Desventajas del CSS incorporado

Mantenimiento complicado: Quizás la limitación más significativa es la dificultad para mantener el código cuando el proyecto crece. Tener estilos dispersos en múltiples archivos HTML dificulta realizar cambios globales.

<!-- Página 1 -->
<style>
    .button { background-color: blue; color: white; }
</style>

<!-- Página 2 - Si queremos cambiar el color de todos los botones, 
     debemos editar cada archivo HTML individualmente -->
<style>
    .button { background-color: blue; color: white; }
</style>

Duplicación de código: Los estilos comunes deben repetirse en cada página donde se necesiten, lo que genera redundancia y aumenta el tamaño total del proyecto.
Dificultad para colaborar: En equipos de desarrollo, tener los estilos mezclados con el HTML complica la división del trabajo entre desarrolladores front-end y diseñadores.
Caché del navegador ineficiente: Los navegadores no pueden almacenar en caché los estilos incorporados entre páginas, a diferencia de los archivos CSS externos que se descargan una vez y se reutilizan en múltiples páginas.

<!-- El navegador debe procesar estos estilos en cada página -->
<style>
    body { 
        font-family: 'Segoe UI', Tahoma, sans-serif;
        margin: 0;
        padding: 20px;
        color: #333;
    }
    /* Más estilos comunes... */
</style>

Mezcla de responsabilidades: Combinar estructura (HTML) y presentación (CSS) en un mismo archivo va contra el principio de separación de responsabilidades, uno de los fundamentos del desarrollo web moderno.
Limitaciones de reutilización: Los estilos incorporados no pueden ser compartidos fácilmente entre diferentes proyectos o aplicaciones.
Mayor tamaño de documento: Incluir todos los estilos en cada página HTML aumenta el tamaño del documento, lo que puede afectar negativamente el rendimiento, especialmente en sitios con muchas páginas.

Cuándo usar CSS incorporado

El CSS incorporado es más adecuado en ciertos escenarios específicos:

Páginas únicas o independientes: Documentos HTML que no forman parte de un sitio web más grande.
Prototipos y pruebas: Durante las fases iniciales de desarrollo cuando se están experimentando con diferentes estilos.
Correos electrónicos HTML: Donde los estilos externos generalmente no son soportados.
Estilos específicos de página: Para aplicar estilos que solo afectan a una página en particular y no se repiten en otras.

<head>
    <!-- Estilos globales compartidos -->
    <link rel="stylesheet" href="global.css">
    
    <!-- Estilos específicos solo para esta página -->
    <style>
        .featured-product {
            border: 2px solid gold;
            background: linear-gradient(to bottom, #fff9e6, #fff);
        }
    </style>
</head>

Sobrescritura de estilos: Cuando necesitamos anular temporalmente algunos estilos definidos en hojas externas.

Alternativas al CSS incorporado

Para superar las limitaciones del CSS incorporado, existen otras técnicas para incluir estilos en documentos HTML:

Hojas de estilo externas: Vinculadas mediante el elemento <link>, permiten centralizar los estilos y aprovechar el caché del navegador.

<head>
    <link rel="stylesheet" href="styles.css">
</head>

Estilos en línea: Aplicados directamente a elementos individuales mediante el atributo style.

<p style="color: blue; font-weight: bold;">Este párrafo tiene estilos en línea.</p>

Importación de CSS: Usando la regla @import dentro del elemento <style> o en hojas de estilo externas.

<style>
    @import url('typography.css');
    @import url('colors.css');
</style>

Enfoque híbrido

En la práctica, muchos desarrolladores adoptan un enfoque híbrido que combina diferentes métodos según las necesidades específicas:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Estilos globales compartidos -->
    <link rel="stylesheet" href="global.css">
    
    <!-- Estilos específicos de la sección -->
    <link rel="stylesheet" href="products.css">
    
    <!-- Estilos específicos de esta página -->
    <style>
        .limited-offer {
            border: 2px dashed red;
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.7; }
            100% { opacity: 1; }
        }
    </style>
</head>
<body>
    <!-- Elemento con estilo en línea para una personalización muy específica -->
    <div class="product limited-offer" style="background-color: #fffbcc;">
        Oferta especial
    </div>
</body>
</html>

Consideraciones de rendimiento

Desde la perspectiva del rendimiento, es importante considerar:

Para sitios pequeños (1-5 páginas): El CSS incorporado puede ser más eficiente al reducir solicitudes HTTP.
Para sitios medianos y grandes: Las hojas de estilo externas suelen ofrecer mejor rendimiento gracias al caché del navegador.
Para optimización crítica: Una técnica común es incorporar los estilos "críticos" (los necesarios para renderizar la parte visible inicialmente) directamente en el HTML, mientras se cargan los estilos no críticos de forma asíncrona.

<head>
    <!-- Estilos críticos incorporados para carga rápida -->
    <style>
        /* Estilos para el contenido visible inicialmente */
        header, .hero, .main-nav {
            /* Estilos críticos... */
        }
    </style>
    
    <!-- Estilos no críticos cargados de forma asíncrona -->
    <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="styles.css"></noscript>
</head>

El CSS incorporado mediante el elemento <style> es una herramienta valiosa en el arsenal de un desarrollador web, pero debe utilizarse estratégicamente, considerando tanto sus ventajas como sus limitaciones según el contexto específico del proyecto.

Aprende HTML online

Otros ejercicios de programación de HTML

Evalúa tus conocimientos de esta lección Estilo incorporado (style) con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.

Aprende a usar el elemento style en HTML para incorporar CSS interno, con selectores, reglas y ventajas para diseño web efectivo.

Elemento style en el head del documento

Atributos del elemento style

Comentarios en CSS

Uso de @rules en el elemento style

Ejemplo práctico

Sintaxis básica de selectores y declaraciones CSS

Selectores CSS

Declaraciones CSS

Agrupación de selectores

Comentarios en CSS

Valores y unidades comunes en CSS

Ejemplo práctico de sintaxis CSS

Cascada y especificidad

Ventajas y desventajas del CSS incorporado

Ventajas del CSS incorporado

Desventajas del CSS incorporado

Cuándo usar CSS incorporado

Alternativas al CSS incorporado

Enfoque híbrido

Consideraciones de rendimiento

Otros ejercicios de programación de HTML

Todas las lecciones de HTML

Introducción Y Entorno

Sintaxis Y Estructura

Sintaxis Y Estructura

Sintaxis Y Estructura

Sintaxis Y Estructura

Sintaxis Y Estructura

Textos Y Enlaces

Textos Y Enlaces

Textos Y Enlaces

Textos Y Enlaces

Textos Y Enlaces

Organización De Contenido

Organización De Contenido

Organización De Contenido

Organización De Contenido

Elementos Multimedia

Elementos Multimedia

Elementos Multimedia

Elementos Multimedia

Metadatos Y Seo

Metadatos Y Seo

Metadatos Y Seo

Metadatos Y Seo

Optimización Html

Optimización Html

Optimización Html

Optimización Html

Objetivos de aprendizaje de esta lección