24 octubre, 2018
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
Suscríbete a nuestro canal en Youtube
SuscríbirseDentro 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.
- La página principal HTML que la llamaremos index.html
- 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.
Leido 4701 veces
