Vincular una hoja de estilos CSS con la etiqueta <link> en una página web HTML

Vincular una hoja de estilos CSS a una página web HTML en el head

Publicado en CSS 2018-03-03 23:47:45

Vincular una hoja de estilos CSS con la etiqueta <link> en una página web HTML

Encrustar un archivo CSS en una página web

HTML CSS

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

Vincular una hoja de estilos CSS con la etiqueta <link> en una página web HTML
Descarga el código fuente del proyecto web CLICK AQUI

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


Compártelo con tus amigos


Publicaciones relacionadas de CSS