<style>El elemento HTML <style> es un componente fundamental en HTML5 que permite la inserción de hojas de estilo CSS directamente dentro del documento HTML. Esto significa que puedes definir los estilos que se aplicarán a los elementos HTML sin necesidad de usar un archivo CSS externo. Este método puede ser útil para la creación rápida de prototipos o para añadir estilos específicos a un documento sin afectar los archivos CSS globales.
<style>El elemento <style> en HTML5 puede tener varios atributos, aunque algunos son opcionales y usados en contextos específicos:
type:
text/css, pero en HTML5 este atributo es opcional y su omisión será entendida como text/css.media:
all, screen, print, (min-width: 800px), etc.<style media="screen">scoped (ya no es parte del estándar de HTML5):
<style> en HTML5 con EjemplosEl uso básico del elemento <style> en un documento HTML5 es directo y consiste en añadir tus reglas CSS dentro de este elemento en la sección <head> del documento. A continuación, se presentan algunos ejemplos sencillos:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de uso del elemento <style></title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: #333333;
}
p {
color: #666666;
line-height: 1.6;
}
</style>
</head>
<body>
<h1>Hola Mundo</h1>
<p>Este es un párrafo con estilos aplicados directamente desde el elemento <style>.</p>
</body>
</html>media<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de uso del atributo media</title>
<style media="screen">
body {
background-color: lightblue;
}
</style>
<style media="print">
body {
background-color: white;
}
</style>
</head>
<body>
<h1>Esta es una página de prueba</h1>
<p>El color de fondo cambia según el medio de salida: pantalla o impresión.</p>
</body>
</html>Conclusión: El elemento <style> permite insertar estilos CSS directamente dentro del documento HTML y ofrece cierta flexibilidad con sus atributos. Sin embargo, para proyectos más grandes y mantenibles, lo ideal es separar el CSS en archivos externos.