Definición de estilos a nivel de página.
Es la definición de estilos en una sección de la cabecera de la página HTML donde podemos definir estilos que se aplican a las distintas marcas HTML de la página.El problema del concepto anterior donde debíamos crear un estilo similar para la marca h1 se puede resolver en forma más adecuada empleando la definición de estilos a nivel de página.
Problema: Mostrar dos títulos con texto de color rojo sobre fondo amarillo.
<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<style type="text/css">
h1 {color:#ff0000;background-color:#ffff00}
</style>
</head>
<body>
<h1>Primer título</h1>
<h1>Segundo título</h1>
</body>
</html>
<html>
<head>
<title>Problema</title>
<style type="text/css">
h1 {color:#ff0000;background-color:#ffff00}
</style>
</head>
<body>
<h1>Primer título</h1>
<h1>Segundo título</h1>
</body>
</html>
Podemos observar que en la cabecera de la página definimos la sección:
<style type="text/css">
h1 {color:#ff0000;background-color:#ffff00}
</style>
h1 {color:#ff0000;background-color:#ffff00}
</style>
Debe estar encerrada por la marca style. En este ejemplo indicamos al navegador que en todos los lugares de esta página donde se utilice la marca h1 debe aplicar como estilo de color de texto el rojo y fondo el amarillo. Podemos observar que es mucho más eficiente que definir los estilos directamente sobre las marcas HTML.
Podemos definir estilos para muchas marcas en la sección style:<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<style type="text/css">>
h1 {color:#ff0000}
h2 {color:#00ff00}
h3 {color:#0000ff}
</style>
</head>
<body>
<h1>rojo</h1>
<h2>verde</h2><h3>azul</h3>
</body>
</html>
<head>
<title>Problema</title>
<style type="text/css">>
h1 {color:#ff0000}
h2 {color:#00ff00}
h3 {color:#0000ff}
</style>
</head>
<body>
<h1>rojo</h1>
<h2>verde</h2><h3>azul</h3>
</body>
</html>
&media=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh20cmPtZ-xGBICpKL_mtQyoF94jJYxP8oekP_Cryy5jKh7aBVOcPOKvydw4ZqgGIw5vXARR4TEBWf6Y_xetYmKO9p2m5C5t-rold4BxAZsyGSBBW3Ve4dqxTPLOmpxsy5CpGcRhqy-IWI/s400/cabecera_web.jpg "Pin It")
&media=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh20cmPtZ-xGBICpKL_mtQyoF94jJYxP8oekP_Cryy5jKh7aBVOcPOKvydw4ZqgGIw5vXARR4TEBWf6Y_xetYmKO9p2m5C5t-rold4BxAZsyGSBBW3Ve4dqxTPLOmpxsy5CpGcRhqy-IWI/s400/cabecera_web.jpg "Pin It")
