Inicio » Blog » CSS

Vincular un hoja de estilos CSS

Linkear CSS en una página web

Vincular un hoja de estilos CSS

Vincular una hoja de estilos CSS con la etiqueta <link>

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.

No hay descargable

Redactado por: , Leido 3197 veces

Aprende más sobre CSS

Codea App
Codea App FullStack

Perú, México, Colombia, España, Venezuela, Argentina, Bolivia

You Fb Tik Pin

© Todos los derechos reservados Codea App | Cursos de programación | 2020 - 2022