Una página y/o sitio web, además de contener información como tal, también requiere de un poco de maquillaje para la presentación de la misma.
Como dice un dicho: "Todo entra por los ojos", en esta oportunidad sí que es una realidad; por ello, a la hora de diseñar tu web, debes tener en cuenta muchos factores como: colores, imágenes, tipos y tamaños de fuente, etc.
Debe haber una armonía entre cada elemento de tu sitio web, con el fin de que este no luzca tan extravagante ni desordenado.
Para poder aplicar estos ajustes o los comúnmente llamados estilos, deberemos crear y hacer uso de las llamadas hojas de estilos CSS (Cascading Style Sheets). Veamos entonces, los pasos para poder lograrlo:
1. Para llevar todo organizado, procederemos a crear una nueva carpeta; para ello, damos clic derecho sobre la carpeta "Site Root", de nuestro proyecto web HTML5 que hemos creado en un post anterior; seguidamente, nos aparecerá un menú contextual, nos ubicaremos entonces en la opción "Nuevo"; posteriormente, pulsaremos sobre el ítem "Carpeta...":
2. Nos encontraremos con una nueva ventana, donde tendremos la posibilidad de darle un nombre a nuestra carpeta, ubicándonos en el campo "Nombre de la carpeta". En esta oportunidad la llamaremos "CSS3".
Por último, daremos clic en el botón "Terminar":
3. Una vez creada nuestra carpeta, daremos clic derecho sobre esta, y en el menú contextual que aparece ubicaremos el puntero del mouse sobre la opción "Nuevo", y en las opciones que se desplegarán, pulsaremos sobre "Cascading Style Sheet...":
4. Ahora, le daremos un nombre a nuestra hoja de estilos; para ello, haremos uso del campo "Nombre de archivo". En esta ocasión le daremos por nombre "EstilosPrincipal", y pulsamos en el botón "Terminar":
5. Al realizar los pasos anteriores de forma correcta, ya tendremos creada nuestra hoja de estilos, la cual se abrirá automáticamente.
Podremos observar que este documento está casi que vacío, sólo cuenta con una serie de comentarios (instrucciones) en la parte superior, los cuales podemos borrar y/o alterar:
1. Nos ubicaremos en el documento HTML de nuestro proyecto web, en donde queremos cargar la hoja de estilos, en este caso será "index.html".
2. Localizaremos las etiquetas "<head></head>", y en medio de estas, pegaremos la siguiente línea de código:
Como dice un dicho: "Todo entra por los ojos", en esta oportunidad sí que es una realidad; por ello, a la hora de diseñar tu web, debes tener en cuenta muchos factores como: colores, imágenes, tipos y tamaños de fuente, etc.
Debe haber una armonía entre cada elemento de tu sitio web, con el fin de que este no luzca tan extravagante ni desordenado.
Para poder aplicar estos ajustes o los comúnmente llamados estilos, deberemos crear y hacer uso de las llamadas hojas de estilos CSS (Cascading Style Sheets). Veamos entonces, los pasos para poder lograrlo:
VIDEO TUTORIAL (PASO A PASO)
¡Suscríbete HOY!
🔻
1. Para llevar todo organizado, procederemos a crear una nueva carpeta; para ello, damos clic derecho sobre la carpeta "Site Root", de nuestro proyecto web HTML5 que hemos creado en un post anterior; seguidamente, nos aparecerá un menú contextual, nos ubicaremos entonces en la opción "Nuevo"; posteriormente, pulsaremos sobre el ítem "Carpeta...":
 |
| "Creando una carpeta" (Paso 1) |
2. Nos encontraremos con una nueva ventana, donde tendremos la posibilidad de darle un nombre a nuestra carpeta, ubicándonos en el campo "Nombre de la carpeta". En esta oportunidad la llamaremos "CSS3".
Por último, daremos clic en el botón "Terminar":
 |
| "Asignando nombre de la carpeta" (Paso 2) |
3. Una vez creada nuestra carpeta, daremos clic derecho sobre esta, y en el menú contextual que aparece ubicaremos el puntero del mouse sobre la opción "Nuevo", y en las opciones que se desplegarán, pulsaremos sobre "Cascading Style Sheet...":
 |
| "Creando hoja de estilos CSS3" (Paso 3) |
4. Ahora, le daremos un nombre a nuestra hoja de estilos; para ello, haremos uso del campo "Nombre de archivo". En esta ocasión le daremos por nombre "EstilosPrincipal", y pulsamos en el botón "Terminar":
 |
| "Asignando nombre al archivo .css" (Paso 4) |
5. Al realizar los pasos anteriores de forma correcta, ya tendremos creada nuestra hoja de estilos, la cual se abrirá automáticamente.
Podremos observar que este documento está casi que vacío, sólo cuenta con una serie de comentarios (instrucciones) en la parte superior, los cuales podemos borrar y/o alterar:
 |
| "Hoja de estilos CSS3" (Paso 5) |
Incluir y/o cargar la hoja de estilos CSS3 en el documento HTML5
Pasos:1. Nos ubicaremos en el documento HTML de nuestro proyecto web, en donde queremos cargar la hoja de estilos, en este caso será "index.html".
2. Localizaremos las etiquetas "<head></head>", y en medio de estas, pegaremos la siguiente línea de código:
<link rel="stylesheet" href="CSS3/EstilosPrincipal.css" media="all"/>NOTA: Como podrás observar, hemos empleado la etiqueta "<link/>", la cual nos permite establecer un vínculo con recursos externos a nuestro documento HTML, y hacer uso de los mismos.
Además de esto, debemos emplear una serie de atributos y/o parámetros para que se lleve a cabo dicha vinculación, de forma exitosa. Entre ellos:
1. rel: Permite que establezcamos la relación existente entre nuestro documento y el recurso externo con el cual estamos vinculándolo. El valor que usaremos será "stylesheet", ya que el recurso es una hoja de estilos.
2. href: Aquí estableceremos la ruta y/o URL, donde se encuentra el recurso externo con el cual nos estamos vinculando. En esta ocasión el valor será: "CSS3/EstilosPrincipal.css"; sin embargo, tú tendrás en cuenta la ubicación de la hoja de estilos en tu proyecto.
3. media (opcional): Este atributo aunque es opcional (si quieres lo colocas o no), te será de gran utilidad en ciertas circunstancias. La funcionalidad de esta propiedad es que nos permite asignar y/o determinar en qué medios (dispositivos donde se visualice nuestra web) se aplicarán en este caso los estilos del documento CSS con el cual estamos vinculando nuestra página.
En esta oportunidad hemos puesto "all" como parámetro; es decir, que los estilos se implementarán en todos los medios; sin embargo, sino colocamos esta propiedad, por defecto se aplicarán los estilos a todos los medios igualmente.
3. Teniendo en cuenta todo lo anterior, nuestro documento HTML quedará de la siguiente manera:
 |
| "Documento index.html" |
NOTA: Hay que tener muy en cuenta, que también tenemos la posibilidad de implementar estilos CSS en nuestro documento HTML, de forma interna; es decir, sin necesidad de llamar y/o usar una hoja de estilos externa. Esto lo estaremos viendo en próximos artículos, al igual que la aplicación de estilos a determinados componentes.
¿Aprendiste a crear hojas de estilos y cargarlas a tus documentos HTML?
Si te fue de gran ayuda esta información, no olvides compartirla con tus amigos y en tus redes sociales.
Si tienes dudas o sugerencias al respecto; abajo puedes dejarnos tus comentarios.
Bendiciones...
0 comentarios:
Publicar un comentario