Vincular un hoja de estilos CSS

La forma de linkear una hoja de estilos apptivaweb.css a una página web se codifica usando la etiqueta link dentro del head de la página web index.html

Dentro de la variadas formas de integrar CSS en una página web HTML, en ésta oportunidad vamos a mostrar como hacerlo cuando tenemos 2 archivos separados, que es lo que demanda el estándar de desarrollo web, pues es una buena práctica mantener los archivos ordenados.

  1. La página principal HTML que  la llamaremos index.html
  2. La hoja de estilos CSS que será nombrada como apptivaweb.css

Puede nombrar los archivos como desee, pero debe respetar las extensiones  .html ó .htm y .css de los arhivos, es recomendable usar un editor de texto o Sublime Text ó cualquier otro editor de texto plano o html

Bien, ahora veamos el código del archivo index.html.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>APPTIVA WEB | Programación Web</title>
	<link rel="stylesheet" href="apptivaweb.css">
</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>

Y el código CSS en apptivaweb.css es el siguiente :

/* Hoja de estilos css */
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;
}

Como vemos es más ordenado, verdad; esto se resume a que en proyectos de desarrollo web pequeños, medianos y grandes debemos tener un orden en la estructura de los archivos que se incluirán para que cuaquier otro equipo de desarrollo puede entender el código, ya sea para continuar con el desarrollo o hacer cambios, para una auditoría web, etc.

Es por ello que es una práctica que debemos tener en cuenta en cualquier desarrollo web por muy pequeño que sea.

Código fuente completo de Vincular un hoja de estilos CSS

DESCARGAR

Visitas: 40 | Publicado:2018-10-24 16:59:03

Publicaciones que te pueden interesar

Facebook Twitter Youtube Pinterest Wordpress Google Plus

:: Calle Paucarpata 130 Of. 212 2do Piso CC. AQPcompucentro ::
:: © Todos los derechos reservados APPTIVA WEB | Arequipa Perú 2010-2018 ::