Vamos a analizar a continuación el ejercicio es ese ejercicio 3 están listos.
Vamos el objetivo del ejercicio es crear un programa para continuar practicando lo básico de estilo
CSS y al finalizar deberemos observar lo siguiente según se muestra
vamos a crear nuestro proyecto.
El proyecto se va a llamar CSS ejercicio 3 lo depositamos en la ruta mostrada y damos clic en Finalizar
también vamos a crear un archivo llamado estilos puntos CSS similar al proyecto anterior.
Así que sobre nuestro proyecto CSS ejercicio 3 damos clic derecho NIU y seleccionamos Qashqai de installed
el nombre del archivo se va a llamar estilos.
No es necesario agregar la extensión y en automático se va a depositar a nivel raíz de nuestro proyecto
es decir dentro de la carpeta públic HTML y damos clic en Finalizar
vamos a modificar a continuación nuestro archivo índex punto HTML agregamos el Doctrine abrimos nuestro
documento HTML también en el cabecero y agregamos el meta charged o Tc8 recordemos que para ello estamos
utilizando el elemento Link.
Posteriormente el atributo rel indicamos que es de tipo está allí.
También agregamos el atributo de Taipe indicando que vamos a trabajar texto de tipo CSS y finalmente
por medio del atributo HR-V hacemos referencia al documento punto CSS en este caso a nivel raíz y por
lo tanto únicamente escribimos en nombre del archivo estilos CSS agregamos el título CSS.
Ejemplo 3 y cerramos el cabecero de este documento posteriormente vamos a agregar el body dentro del
body.
Agregamos un título CSS ejemplo 3 y posteriormente un primer párrafo y agregamos el texto párrafo de
ejemplo 1 cerramos nuestro párrafo agregamos un segundo párrafo de ejemplo 2 y ahora lo que vamos a
hacer es agregar un nuevo elemento en este caso vamos a utilizar la etiqueta de Dib.
Básicamente un dip o un elemento de división es una sección de nuestro documento HTML y podemos aplicar
cualquier formato cualquier estilo dentro de este elemento de tipo div.
En este caso para aplicar el estilo que vamos a definir dentro de nuestro archivo externo estilos puntos
CSS.
Vamos a definir una nueva clase dentro de este archivo estilos puntos CSS y esa clase la vamos a utilizar
la vamos a aplicar dentro de este elemento y por medio del atributo class.
Así que esta clase llamada resaltado va a englobar varios estilos dentro de este archivo CSS así que
todos los estilos que se apliquen dentro de esta clase se van a aplicar a este elemento de tipo.
Posteriormente vamos a agregar el código del archivo a estilos puntos CSS.
En este caso únicamente cabe mencionar que vamos a definir posteriormente una clase llamada resaltado
dentro de este archivo estilos puntos CSS y esos estilos los vamos a aplicar a este elemento de tipo
DIV y agregamos lo siguiente a este elemento de tipo Dib el texto agregamos una nueva división y cerramos
esta división agregamos un salto de línea y agregamos también una nueva división y agregamos el atributo
de Class nueva clase CSS es decir que dentro del archivo estilos puntos CSS también vamos a agregar
una nueva clase llamada precisamente nueva clase CSS y se va a aplicar los estilos definidos sobre ese
elemento y agregamos lo siguiente a esta división agregamos una segunda división y cerramos esta división
cerramos el cuerpo de nuestro documento HTML y cerramos también el documento HTML para cualquier duda
pueden dar clic sobre el nombre del archivo.
Sin embargo se le solicita codificar línea a línea.
Este archivo vamos a definir ahora el contenido de nuestro archivo estilos puntos CSS podemos observar
que vamos a definir algunos estilos para nuestra etiqueta de body con el color de background definido
según se indica utilizando el código hexadecimal
posteriormente definimos un font family.
En este caso en este caso la fuente de área narrow posteriormente un color un color de fuente.
En este caso el color de fuente blanco y cerramos los estilos que van a aplicar a nivel del Bodhi de
nuestro documento HTML es decir que todo lo que se agregue a nivel del body de nuestro documento HTML
se van a aplicar estos estilos.
Sin embargo si aplicamos otros estilos de manera más interna entonces los estilos que van a aplicar
son precisamente los estilos más internos y se van a sobreescribir estos valores definidos a nivel del
body del documento HTML ya que van a tomar prioridad los elementos más internos sobre los elementos
más externos vamos a definir un estilo para nuestro elemento H1 es decir el elemento de título HTML
de tamaño 1 sobre este elemento H1 lo que vamos a hacer es especificar el bonsais que va a tomar el
estilo x x Large y también está el va a ser de tipo Italika y cerramos los estilos que se van a aplicar
a este elemento H1 así que además de los elementos definidos a nivel del Bodhi también se van a anexar
estos elementos definidos a nivel H1 y debido a que estos elementos no se especificaron en el bodhi
lo que se va a hacer es que se van a anexar estos elementos al elemento que se va a aplicar al elemento
H1.
Si estos elementos como el iPhone 6 se hubiera definido también en el body entonces hubieran sobre escrito
y hubieran tomado prioridad los elementos definidos en el elemento H1.
Sin embargo como no se definieron en ambos lados únicamente se van a anexar tanto los elementos que
aplican del body como los elementos que apliquen del estilo en este momento definidos en el elemento
H1 posteriormente definimos algunos estilos para el elemento de párrafo y en este caso indicamos que
para los elementos de tipo p vamos a indicar un fondo Waite de tipo Wolder es decir que lo va a poner
en negritas también un background.
Vamos a modificar el background para los elementos de tipo párrafo
y lo que vamos a hacer ahora es vamos a agregar una nueva clase aplicable a cualquier elemento HTML
como puede ser nuestro elemento Dib que hemos comentado anteriormente
para definir una nueva clase.
Vamos a utilizar la notación de punto y posteriormente el nombre de la nueva clase y abrimos una llave
y podemos agregar cualquier estilo que necesitemos.
Por ejemplo en este caso estamos definiendo un color de background.
Según se indica y también estamos indicando que el FOM guay va a ser de tipo Bold así que lo que definamos
por medio de esta clase el estilo que va a tomar son los que se están indicando y también podemos agregar
una nueva clase y modificar los valores como pueden ser los estilos de tipo font family según se indica
y también el fondo.
Según se indica también estamos modificando el color de Bagram por medio de esta nueva clase y estamos
agregando estos estilos así que básicamente a nuestros elementos de tipo Dib definidos en el archivo
índex punto HTML le aplicamos los estilos según se indica si recordamos en el elemento HTML por medio
del atributo class indicamos el nombre de la clase así que en un primer elemento de tipo DIV lo que
hicimos fue indicar que apliqué los estilos definidos por la clase resaltado así que estos estilos que
se han definido por medio de esta nueva clase se van a aplicar al contenido de este día así que el texto
que se agregue dentro de este DIV se le van a aplicar esas propiedades según se ha definido dentro de
esta clase y también agregamos un segundo elemento de tipo Dib según recordamos pero en este segundo
elemento indicamos que se le iba a aplicar la clase de nueva clase CSS así que todo lo que se agregue
dentro de este Dip se le van a aplicar estos estilos según estamos viendo.
Los estilos que se han definido dentro de este elemento de nueva clase así que este nombre corresponde
precisamente con lo que estamos definiendo dentro de nuestro archivo CSS y con el nombre de la clase
que debemos especificar en cada uno de los elementos donde deseamos que se aplique esta nueva clase.
Recuerden que pueden dar clic en el nombre del archivo para cualquier problema que tengan en la codificación
de este archivo.
Sin embargo se les solicita codificar línea a línea para que vaya quedando claro el uso de estilo CSS
como siguiente paso ejecutamos nuestro proyecto y podemos observar que se aplica un color de fondo.
También se aplica un estilo general de color de fuente a todo el documento HTML.
En este caso el color es blanco para todos los elementos de tipo texto en el documento HTML.
Posteriormente dentro de nuestra hoja de estilos modificamos algunos valores de los estilos que se aplican
al título así que hicimos más grande el título y además el texto se aplicó con el estilo de Italika.
Posteriormente en el párrafo ejemplo 1 se aplicó los estilos que definimos también en el documento externo
estilo CSS ya que indicamos que cambiara el background para los elementos de tipo P Así que todos los
elementos de tipo p por default van a tomar estos elementos excepto cuando escribamos los valores.
Así que los elementos de tipo párrafo van a tomar las propiedades que hemos definido en este archivo
externo CSS y posteriormente agregamos una división.
Como hemos comentado una división es una parte de nuestro documento HTML no necesariamente es un párrafo.
Sin embargo en este caso podemos observar que se parece a un párrafo sin embargo realmente es únicamente
una división en nuestro documento HTML.
Posteriormente vamos a hacer uso más avanzado de estos elementos.
Sin embargo se puede hacer un uso más complejo de este elemento de tipo división.
Por ejemplo una división se puede mostrar u ocultar dinámicamente utilizando JavaScript y por ello es
que este tipo de elementos de tipo división va a ser muy utilizado cuando estamos trabajando con HTML
CSS y JavaScript ya que podemos mostrar y ocultar este elemento de tipo división ya que como hemos comentado
es una parte de nuestro documento HTML el cual podemos manipular dinámicamente o como en este caso podemos
observar que podemos aplicar estilos distintos directamente a este elemento de tipo división y aplicamos
una clase a este elemento de tipo división y aplicamos una nueva clase también a este segundo elemento
de tipo división según hemos codificado en nuestro proyecto y podemos observar el resultado.
Tenemos un background distinto en ambos casos y en este segundo caso tenemos una fuente más grande pero
así es como podemos empezar a agrupar nuestros estilos que estamos aplicando a los elementos de nuestro
documento HTML.
Recuerden que en cualquier elemento pueden seleccionarlo y dar clic derecho en inspeccionar para que
observen claramente cuáles son los estilos que se aplicaron y cuáles son los estilos que se escribieron
es decir los que ya no tomaron prioridad y con esto pueden salir de cualquier duda de cuáles son los
estilos que se están aplicando a su documento HTML
como conclusión.
Con este ejercicio hemos puesto en práctica varios conceptos más de estilo CSS la combinación de colores
la obtuvimos con ayuda del siguiente sitio web maletón puntocom y se dan clic en el nombre de Link pueden
obtener directamente los colores que hemos utilizado en este ejercicio y también ustedes pueden crear
sus propias combinaciones de colores según necesiten en sus proyectos.
Por eso concluimos el ejercicio CSS.
Ejemplo 3.