Vamos a realizar a continuación el ejercicio de ese ejercicio.
1.
Están listos.
Vamos.
El objetivo del ejercicio es crear un programa para practicar lo básico de estilo CSS y al finalizar
deberemos observar lo siguiente según se muestra como primer paso vamos a crear nuestro proyecto el
nombre del proyecto se llama CSS ejercicio 1 y lo depositamos en la ruta mostrada y damos clic en Finalizar
ahora vamos a modificar nuestro archivo índex punto HTML agregamos el Doctrine HTML abrimos la etiqueta
HTML y vamos a agregar a continuación el cabecero de nuestro documento.
Agregamos la etiqueta Metha con hecharse de UTE F8 posteriormente el título ejemplos SS1 y con eso cerramos
nuestro cabecero como siguiente paso vamos a agregar un estilo CSS en este primer ejercicio todavía
no vamos a agregar un archivo externo con extensión CSS sino que vamos a probar los estilos directamente
sobre la página HTML.
Para ello podemos hacer lo siguiente dentro del cuerpo de nuestro documento HTML.
Podemos utilizar el atributo estáel y básicamente este atributo nos permite agregar estilos CSS a nuestro
documento HTML por ejemplo estilos como puede ser el color de fondo especificamos que vamos a modificar
el background o lo que es lo mismo el color de fondo de nuestra página HTML y posteriormente de los
dos puntos especificamos el valor en este caso del color que queremos utilizar utilizando un valor hexadecimal
para establecer el color de fondo.
Para poder seleccionar un color con este formato pueden buscar alguna página en Internet que les haga
la conversión entre un color y el formato hexadecimal ya que ese es el formato que vamos a especificar
dentro del manejo de colores cuando estemos manejando el concepto de estilo CSS.
Posteriormente podemos agregar más propiedades y cada una de estas propiedades las vamos separar por
un punto y coma así que por un lado ya establecimos el fondo pero ahora podemos establecer el color
de nuestra fuente así que para ello agregamos la propiedad de color.
Posteriormente dos puntos y especificamos un color.
En este caso para establecer también el color de la Fuente estamos utilizando el código hexadecimal
y también podemos agregar más propiedades y de igual manera separamos por un punto y coma y podemos
especificar la fuente que vamos a utilizar en esta página HTML.
Así que por medio de la propiedad Font vio en medio Family podemos especificar la fuente que queremos
utilizar.
Así que posterior a los dos puntos establecemos el valor de la Fuente que vamos a utilizar para este
documento.
Podemos especificar varias fuentes pero en este caso estamos especificando la fuente de Comic Sans MS
y terminamos esta propiedad poniendo punto y coma y también cerramos nuestra cadena con comilla tal
como la iniciamos así que básicamente a través del atributo está el es que podemos agregar varias propiedades
de tipo CSS a nuestro documento HTML.
Posteriormente estas propiedades las vamos a agregar a un archivo punto CSS para que puedan ser reutilizables
no solamente en esta página HTML sino en cualquier página HTML de nuestro proyecto web.
Sin embargo en este caso para iniciar con este tema de CSS estamos aplicándolo directamente a nuestros
documentos HTML continuando con la codificación de nuestro código HTML.
Agregamos un título ejemplo CSS 1 apoyándonos de la etiqueta H1 y posteriormente vamos a agregar un
párrafo sin embargo en este caso vamos a sobreescribir el valor que ya hemos definido anteriormente
de Font Family.
Así que en este párrafo en particular vamos a aplicar el estilo de Font Family Arial.
En este caso la fuente de Arial Black
y agregamos lo siguiente Este es el contenido del párrafo.
Sin embargo esta palabra también vamos a modificarle el estilo y para ello podemos utilizar la etiqueta
Spahn.
Básicamente esta etiqueta la vamos a utilizar para agregar un estilo directamente al texto que estamos
englobando entre esta etiqueta y por medio del atributo estáel.
En este caso podemos aplicar por ejemplo el atributo de Foncillas y hacer la fuente más grande así que
no solamente estamos escribiendo este valor ya no se va a aplicar esta fuente sino que ahora vamos a
aplicar la fuente de área Black y además estamos agregando otro estilo más de Foncillas.
Así que para esta palabra de párrafo vamos a aplicar una fuente de tipo X X Latch así que lo que estamos
tratando de ejemplificar en este caso es que dentro de un elemento HTML como puede ser un párrafo podemos
empezar a sobreescribir los estilos que ya hemos definido anteriormente de las propiedades CSS y también
podemos ir agregando más propiedades si es que en este momento hicieran falta.
Así que no solamente se pueden definir dentro del Bodhi sino que dentro de los elementos HTML como es
el párrafo o incluso dentro de la cadena del párrafo podemos modificar los elementos de nuestro documento
HTML aplicando estilos distintos según sea necesario.
Sin embargo vamos a ver posteriormente que es preferible que este tipo de estilos se definan en un archivo.
Esto para que se puedan reutilizar y no tengamos que estar repitiendo estas variantes a lo largo de
nuestros documentos HTML cerramos nuestro párrafo agregamos un salto de línea y ahora lo que hacemos
es definir un párrafo pero vamos a cambiar el color de la Fuente.
Para ello utilizamos de nueva cuenta el atributo de estáel y cambiamos el atributo color para cambiar
el color de la Fuente y definimos también otro color utilizando el código hexadecimal y agregamos dentro
de este párrafo ese es el contenido del párrafo 2.
Así que a este párrafo 2 se le va a agregar un color distinto cerramos el párrafo y agregamos un salto
de línea y definimos un último párrafo.
También le vamos a cambiar el color de la Fuente y agregamos el párrafo.
Este es el contenido del párrafo 3 cerramos el párrafo y terminamos nuestro documento HTML.
Recuerden que para cualquier duda pueden dar clic en el nombre del archivo.
Sin embargo se le solicita codificar línea a línea.
Este ejercicio para que vaya quedando claro el concepto de hojas de estilo
como siguiente paso vamos a ejecutar nuestro proyecto y una vez que lo ejecutemos el resultado es como
sigue podemos observar el color de background que hemos aplicado a toda la hoja.
Por lo tanto podemos observar un nuevo color de background.
Posteriormente agregamos un título pero si recordamos utilizamos la fuente de Comic Sans MS así que
a todo el documento HTML por default se le va a aplicar este estilo y también aplicamos un color de
fuente.
Así que ésta es la fuente y el color por default que aplicamos en el documento HTML.
Sin embargo en el primer párrafo definimos una fuente distinta así que se escribe el valor de la fuente
de Comic Sans y lo que utilizamos en este párrafo en particular únicamente para este párrafo fue el
estilo de fuente de Arial Black.
Y dentro de esta palabra de párrafo utilizamos la etiqueta es pan para agregar un estilo más en este
caso el estilo de que hiciera la fuente más grande así que podemos observar que podemos redefinir varios
elementos conforme necesitemos a lo largo de nuestra página HTML como siguiente párrafo.
También definimos nuestro párrafo 2.
En este caso se están aplicando los estilos de la Fuente ya definido a nivel de Bodin.
En este caso la fuente de Comic Sans CMS y lo único que modificamos a nivel de este párrafo estamos
escribiendo el color de la Fuente ya no se va a aplicar este color de fuente que es el color por default
sino que estamos escribiendo el valor definido en la parte del body únicamente para este elemento estamos
indicando que el color de fuente para este párrafo va a ser el color rojo.
Recordemos que este código lo aplicamos por medio de un valor hexadecimal así que para cualquier duda
del manejo de colores pueden buscar una página en internet para convertir los colores a un color hexadecimal
y poder obtener este código hexadecimal según el color que necesiten.
Por último agregamos a este párrafo y lo que hicimos en este párrafo también fue modificar el color
de este párrafo así que ya no se va a utilizar el color definido por default sino que vamos a utilizar
un color distinto según se observa pero la fuente definida en el body es la misma.
Así que como no se cambió ni en el párrafo 2 ni en el párrafo 3 se está utilizando la fuente de Comic
Sans en estos dos párrafos.
Así que con este ejemplo estamos aplicando el concepto básico de hojas de estilo y podemos ver cómo
las hojas de estilo transforman la apariencia de nuestro código HTML si no agregamos estas hojas de
estilo.
Básicamente tendríamos una página en blanco y tendríamos una fuente por default según se haya configurado
en el navegador pero a través de las hojas de estilo podemos empezar a cambiar estos elementos y poco
a poco iremos aplicando más conceptos de hojas de estilo
como conclusión.
Con este ejercicio hemos puesto en práctica lo básico de los estilos CSS definiendo los estilos directamente
sobre el atributo estilo de los elementos HTML seleccionados.
A continuación veremos más ejemplos de cómo ir mejorando la aplicación de estilos a nuestros elementos
HTML con eso terminamos elejercicio CSS.
Ejemplo.