Contenido
Creación y asignación de estilos mediante CSS..................................................................................1
Introducción...................................................................................................................................1
Desarrollo.......................................................................................................................................1
Resultados......................................................................................................................................3
Códigos...........................................................................................................................................3
Análisis de resultados.....................................................................................................................3
Creación y asignación de estilos mediante CSS
Introducción
Las hojas de estilo en cascada son una manera sencilla de poder agregar estilos a las páginas de
nuestro sitio web. Nos permiten definir las fuentes, colores, formatos, y otras características de
presentación que tendrá nuestro sitio.
Desarrollo
Lo primero que veremos es el uso de los estilos mediante hojas CSS. Para ello, lo primero que
debemos hacer es crear un archivo desde Visual Studio Code con el nombre que nosotros
queramos (en este caso será “estilos”), con la extensión .css, la cual indica que es una hoja de
estilo en cascada, y es la que contendrá todos los estilos que vayamos a utilizar en nuestra página.
Figura 1 Archivo "[Link]"
Dentro de nuestra carpeta donde crearemos la página html, agregamos una carpeta llamada “css”
(Figura 2), y dentro de la carpeta, moveremos el archivo que acabamos de crear (Figura 3) el cuál
contendrá la información de los estilos que creemos.
Figura 2 Carpeta css
Figura 3 archivo "[Link]" que se crea desde Visual Studio Code
Dentro de Visual Studio Code, ya podemos agregar los estilos que necesitamos en nuestra página
web. Como ejemplo, utilizaremos un estilo para el encabezado h2, cambiando su color a rojo ().
Figura 4 Estilo del encabezado "h2"
Como podemos ver en la Figura 5, el encabezado aún no tiene el estilo que agregamos, y esto se
debe a que aún falta agregar la referencia a nuestro archivo html.
Figura 5 html sin agregar el estilo de "h2"
Para poder agregar la referencia, debemos colocar el código mostrado en la Figura 6, el cual indica
que se está enlazando la hoja de estilos desde el archivo [Link], ubicado en la carpeta css.
Figura 6 enlace al archivo de [Link]
Resultados
Una vez realizado el enlace y guardar los cambios, podemos ver (Figura 7) que el encabezado h2 ya
presenta el estilo que se agregó desde la hoja de estilos .
Figura 7 html con estilo enlazado
Códigos
A continuación, vemos con detalle los códigos más importantes de esta sección, siendo un ejemplo
de un estilo para un encabezado (Figura 8) y la vinculación de la hoja de estilos con nuestro
archivo html (Figura 9)
Figura 8 código del estilo para el encabezado "h2"
Figura 9 Código para enlazar la ubicación de la hoja de estilos al sitio web
Análisis de resultados
Como podemos ver, la creación de una hoja de estilos, así como la implementación de los estilos,
es algo bastante sencillo, y nos ayuda bastante al momento de darle un formato a nuestro sitio
web para que se vea de la manera que nosotros queramos.