Bien vamos a continuar vamos a detener las glacis para que no haya ningún cambio ya que de lo contrario
va a estar haciendo diploide de la aplicación va a estar modificando los cambios y mandándolos al navegador.
Así que para que no esté haciendo esto constantemente vamos a detener glacis podemos detenerlo en este
botón dentro del tabulador de graffitti presionamos este botón.
O también sobre ser vices entramos a glacis damos clic derecho y Stop cualquiera de las dos opciones
es lo mismo.
Bien en este momento ya se detuvo y podemos continuar.
Vamos a cerrar este tabulador.
Bien ya tenemos nuestro archivo inexperto HTML según hemos visto y ahora lo que vamos a hacer es agregar
la hoja de estilos CSS así que vamos al archivo de estilo CSS y vamos a lo siguiente vamos a agregar
el elemento de Bodhi y también este va a ser el estilo por default
agregamos un link de 1.6 µm después un font family vamos a agregar varios tipos de font family agregamos
Lucida Sans Unicode
y también agregamos Lucida Grande y por último agregamos sans serif así que ya son las fuentes que vamos
a utilizar.
Pero ustedes pueden agregar cualquier tipo de fuente que deseen agregamos el 6 de 12 12 píxeles y agregamos
también un color va a ser el color en hexadecimal 6 6 9 ese es el código del color y con eso ya tenemos
el elemento de Bodin y la clase de Defour.
Ahora vamos a agregar nuestro estilo el estilo que hemos utilizado enfásis columna ya que es el que
vamos a utilizar en esta tabla así que agregamos este estilo enfásis columna abrimos llaves y empezamos
agregar los elementos agregamos un margen de 45 píxeles agregamos también un Wit de 480 y esto especifica
el ancho de la tabla.
Obviamente pueden modificarlo según sus necesidades.
Agregamos Text Line en este caso Text Line left que se carga el texto hacia la izquierda y también agregamos
un borde del colapso
agregamos el valor de colapso para que no deje espacio entre los renglones y las columnas de la tabla.
Bien vamos a seguir agregando elementos a esta clase enfásis columna pero ahora al elemento de tipo
caption ya que si recordamos dentro de nuestro elemento indexa HTML.
También agregamos un camión así que este estilo se va a aplicar ahora al título y agregamos un Foncillas
de 20
bien y ahora vamos a agregar también otro estilo pero para el elemento TH de nuestra tabla agregamos
un Fonz 6 de 14 14 pixels.
Agregamos también un fondo waited.
En este caso con el valor de normal y agregamos también un padre de 12 píxeles superior e inferior y
de 15 píxeles a la izquierda y a la derecha posteriormente agregamos un color el código 039 bien y esto
va a ser Bourget y ahora vamos a definir un y data para este mismo elemento enfásis columna para El
Tibol data hagamos un Padín de diez píxeles superior e inferior y de 15 píxeles.
Izquierda y derecha agregamos un color el color de seis seis nueve
agregamos también un border top de un píxel va a ser sólido y va a tener el siguiente color 8 E de f
f es el color que vamos a aplicar al TD y ahora vamos a agregar un estilo llamado columna y vamos a
agregar lo siguiente a este estilo va a ser un background.
Vamos a proporcionar el color de 0 de A. F de es el código hexadecimal.
Después agregamos un borde right
el borde hacia la derecha de 10 pixeles y también agregamos los elementos de Solid transparente y también
un border left
con los mismos elementos los mismos valores y píxeles.
Solid transparente y finalmente agregamos el último estilo de enfásis columna pero aplicado a nuestro
they've el Row 2 puntos y el evento Jubera.
Es decir cuando nos posicionamos sobre ese Taiba el robot iba a aplicar también a cada uno de ustedes
dentro de ese Trevorrow aplicamos el color 3 3 9 y cambiamos también el color del Bagram va a ser el
color e f f 2 f f.
Bien así que con eso ya estamos terminando nuestro archivo de estilo CSS como ya lo hemos relacionado
sobre nuestra página HTML ya debería de estarlo aplicando.
Vamos a guardar cambios y ejecutamos
esperamos a que termine de levantarse glacis
bien y con eso ya se ha cargado nuestro formulario.
Aplicando cada uno de los estilos por ejemplo en el caption del lado izquierdo aplicando el estilo de
columna y en todo nuestro Taiba Row podemos observar que si nos posicionamos sobre el registro aplica
un color diferente bien así que con esto ya estamos aplicando nuestra hoja de estilos sin ningún problema.
Ahora si no pudiéramos ver los cambios podemos quitar esta línea de código ya que posiblemente el contentarme
no lo esté reconociendo así que esta línea de código realmente no es necesaria podemos quitarla guardamos
cambios refrescamos y con esto ya deberíamos ver los cambios en nuestra hoja de estilos bien así que
con esto ya estamos aplicando correctamente la hoja de estilos.
También si tenemos algún problema debemos asegurarnos que la hoja de estilo esté visible desde el navegador
web cómo revisamos esto damos clic derecho damos clic en Ver Código fuente de la página y si damos clic
sobre el archivo de recursos estilo CSS podemos observar que nos debe de desplegar esta página si no
la despliega damos clic en refresh y deberemos observar esta hoja de estilos ya que debe de ser pública
y si no la viéramos entonces tenemos que corregir o revisar la ruta donde se encuentra publicada esta
hoja de estilos ya que esta hoja de estilos debe de ser pública para que se pueda aplicar a nuestra
página HTML y cualquier duda de los estilos que estamos aplicando.
Pueden dar clic derecho inspeccionar
y en esta parte pueden ver todos los estilos que se están aplicando por ejemplo en este caso del lado
derecho tenemos el estilo de columna y cada uno de los elementos que están aplicando a este estilo.
También tenemos los estilos de enfásis columna en este caso el tribunal data y así cada uno de los elementos
podemos observar que se están aplicando estos estilos y se pueden activar o desactivar estos estilos
para que vean cómo es que aplica cada uno de los cambios sobre nuestra página HTML
así que subyace la idea como ejercicio extra revisar cada uno de los estilos para que no tengan ninguna
duda de cómo se está aplicando cada uno de estos elementos a la página HTML.
Vamos a dejar hasta aquí este video y en el siguiente video vamos a agregar la funcionalidad de JavaScript
para validar este formulario.
Nos vemos en el siguiente video.
Saludos.