Uso de estilos CSS en el <head> de una página web con <style>

Incluir estilos CSS directamente en el <head> de una página web

Publicado en CSS 2018-03-05 11:37:35

Uso de estilos CSS en el <head> de una página web con <style>

Aplicando CSS en el <head> de una página web

CSS Diseño Web HTML

Resumen: 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>

En esta forma de uso los estilos se definen en una zona específica del propio documento HTML. Se declara la etiqueta <style> de HTML y solamente se pueden incluir en la cabecera del documento (sólo dentro de la sección <head>).

Una desventaja es que si se quiere hacer una modificación en los estilos definidos, es necesario modificar todas las páginas que incluyen el estilo que se va a modificar.

Este método se emplea cuando se define un número pequeño de estilos o cuando se quieren incluir estilos específicos en una determinada página HTML que completen los estilos que se incluyen por defecto en todas las páginas del sitio web.

Los ejemplos mostrados en este libro utilizan este método para aplicar CSS al contenido HTML de las páginas. De esta forma el código de los ejemplos es más conciso y se aprovecha mejor el espacio.

Veamos un ejemplo :

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>APPTIVA WEB | Programación Web</title>
	<style>	
		body{
			background: #120832;
		}
		.apptivaweb {
			text-align: center;	/* texto centrado*/
		    width: 1170px;    	/* Ancho del contenedor */
		    margin: 0 auto;   	/* contenedor centrado */
		    background: white; 	/* color de fondo  (peru, #ff00ff, 255,00,255,1) */
		    padding: 50px;		/* espacio entre el contenido y el div*/
		}
		h1{
			color: #04488C;
		}
	</style>
</head>
<body>
	<div class="apptivaweb">
		<h1>Título del contenido de la página web</h1>		
		<p>En esta sección se coloca los textos, imágenes, elementos multimedia como videos, audio, etc. de la página web</p>
	</div>
</body>
</html>

 

Uso de estilos CSS en el <head> de una página web con <style>

El resultado podemos verlo en el siguiente video corto de menos de 03 minutos

Descarga el código fuente del proyecto web CLICK AQUI

Redacción:| Artículo leído: 334 veces | Publicación:


Compártelo con tus amigos


Publicaciones relacionadas de CSS