1
00:00:00,110 --> 00:00:07,110
Vamos ahora a cambiar los estilos de la página a través de la hoja de estilos de la plantilla que estamos utilizando.

2
00:00:07,589 --> 00:00:10,390
Primero vamos a fijarnos un poco en la estructura de esta página.

3
00:00:12,009 --> 00:00:15,849
Vemos que body engloba todo lo que es el contenido de la página,

4
00:00:16,469 --> 00:00:21,129
pero observamos que después se ha obtenido un contenedor denominado container

5
00:00:21,129 --> 00:00:25,170
que integra también todo

6
00:00:25,170 --> 00:00:29,890
o sea, integra todo el contenido dentro de la página

7
00:00:29,890 --> 00:00:32,990
pero dentro del body, a su vez, es decir, puedo cambiar

8
00:00:32,990 --> 00:00:37,630
opciones del body de forma independiente a las opciones

9
00:00:37,630 --> 00:00:41,149
que cambie de esta clase. Después encontramos

10
00:00:41,149 --> 00:00:45,630
un encabezado, esta parte de aquí, que incluye solamente

11
00:00:45,630 --> 00:00:49,649
el H1 y es la cabrera, encontramos

12
00:00:49,649 --> 00:00:53,670
un contenedor denominado

13
00:00:53,670 --> 00:00:57,729
nav, un contenedor denominado article

14
00:00:57,729 --> 00:01:01,530
que incluye lo que sería

15
00:01:01,530 --> 00:01:05,930
la parte central del contenido y por último

16
00:01:05,930 --> 00:01:09,290
tendríamos, perdón, esa sería la tabla que hemos encontrado

17
00:01:09,290 --> 00:01:13,530
un contenedor denominado footer, es decir, nuestra página

18
00:01:13,530 --> 00:01:17,170
está construida por

19
00:01:17,170 --> 00:01:35,909
Está constituida por el body, que es el conjunto completo de todos los elementos, un contenedor global que incluye dentro el header, el encabezado, la barra de navegación, el article, que es el contenido central, y el footer.

20
00:01:35,909 --> 00:01:44,250
Vale, pues esos van a ser los elementos HTML que voy a tener que localizar dentro de la hoja de estilos para modificar sus propiedades.

21
00:01:45,290 --> 00:01:57,870
Para ver la hoja de estilos, si trabajamos con Blue Grifo, lo más cómodo es habilitar un panel en el que van a aparecer las hojas de estilos asociadas a este documento HTML.

22
00:01:58,230 --> 00:01:58,829
Aquí aparece.

23
00:01:59,450 --> 00:02:02,569
Y puedo trabajar desde esta opción.

24
00:02:02,569 --> 00:02:17,050
Por ejemplo, voy a cambiar el color del header y del footer. Vamos a buscar esos elementos dentro de la hoja de estilos.

25
00:02:17,770 --> 00:02:28,689
Vamos a ver qué propiedades tienen. Aquí nos encontramos. Ambos tienen las mismas propiedades, por eso aparecen nombrados ambos elementos y separados por coma.

26
00:02:28,689 --> 00:02:35,610
Y vemos que tienen un color de letra en blanco y un color de fondo en negro. Voy a modificar ese color de fondo.

27
00:02:35,610 --> 00:02:51,449
Bueno, para elegir el color que quiero utilizar podemos buscar en internet, por ejemplo, múltiples páginas que nos muestran los códigos para los diferentes colores.

28
00:02:51,449 --> 00:03:03,610
Por ejemplo, yo ya he buscado este color, lo voy a copiar y lo voy a utilizar para, como os decía, los elementos encabezado y pie o header y footer.

29
00:03:06,270 --> 00:03:16,789
Entonces voy a cambiar la propiedad background color, control V para pegar, y si ejecuto los cambios,

30
00:03:16,789 --> 00:03:20,430
vemos que inmediatamente el HTML

31
00:03:20,430 --> 00:03:24,689
coge los estilos de la página y los modifica

32
00:03:24,689 --> 00:03:28,770
muy bien, lo siguiente que quiero cambiar

33
00:03:28,770 --> 00:03:31,289
es el color del

34
00:03:31,289 --> 00:03:35,770
elemento nav, que sería la barra de navegación

35
00:03:35,770 --> 00:03:40,669
vale, pues vamos a ir a los estilos, vamos a buscar las propiedades de este

36
00:03:40,669 --> 00:03:43,550
elemento, aquí lo vemos, y en principio

37
00:03:43,550 --> 00:03:47,990
nav no tiene ningún color

38
00:03:47,990 --> 00:03:51,229
probablemente, realmente

39
00:03:51,229 --> 00:03:55,770
el color que afecta a la verdadera navegación

40
00:03:55,770 --> 00:03:59,810
sea el color que está establecido para el fondo de los elementos

41
00:03:59,810 --> 00:04:03,889
ul, si os fijáis, realmente

42
00:04:03,889 --> 00:04:07,849
el nav está compuesto por un

43
00:04:07,849 --> 00:04:11,729
elemento ul que incluye todos los ítems de navegación

44
00:04:11,729 --> 00:04:40,060
Luego va a ser ese color el que debemos modificar. Aquí lo tenemos y vamos a modificarlo. Bueno, he elegido un color y si ejecuto los cambios, pues ahí veríamos, efectivamente ha cogido el color deseado.

45
00:04:40,060 --> 00:04:50,639
Vale, como vemos los elementos ul cambian su aspecto al colocar el cursor encima, al colocar el ratón encima.

46
00:04:51,079 --> 00:05:00,779
Recordad que eso era una pseudo clase que quedaba definida por la palabra dos puntos over.

47
00:05:00,779 --> 00:05:17,199
Es decir, aquí tenemos los ítems de navegación que quedan definidos por el elemento Lee, que a su vez son enlaces y que cuando están con el ratón por encima, es decir, en la posición hover, pues están cambiando a este color.

48
00:05:17,339 --> 00:05:21,319
Podríamos modificar ese color o no, según nos interese.

49
00:05:21,819 --> 00:05:24,319
Yo de momento lo voy a dejar así, ¿vale?

50
00:05:24,339 --> 00:05:28,500
Y lo que quiero cambiar es el fondo de toda la página del body.

51
00:05:28,500 --> 00:05:46,500
Bien, como vemos el elemento body no aparece dentro de la lista que tenemos de elementos dentro de la hoja de CSS, entonces voy a ponerlo yo como selector CSS y le voy a poner propiedades.

52
00:05:46,500 --> 00:05:48,959
propiedades, por ejemplo, le voy a poner

53
00:05:48,959 --> 00:05:51,399
un color de fondo

54
00:05:51,399 --> 00:05:54,339
negro

55
00:05:54,339 --> 00:06:03,310
vale, bueno, cuidado porque

56
00:06:03,310 --> 00:06:05,850
me he dado cuenta que BlueGryphon en ocasiones

57
00:06:05,850 --> 00:06:08,350
no coge inmediatamente las propiedades

58
00:06:08,350 --> 00:06:11,290
que estamos aplicando a los estilos, voy a comprobar que esté bien

59
00:06:11,290 --> 00:06:14,290
pero ya me he dado cuenta

60
00:06:14,290 --> 00:06:16,889
me ha pasado en alguna ocasión que este programa

61
00:06:16,889 --> 00:06:21,209
no coge a la primera esos colores

62
00:06:21,209 --> 00:06:25,069
o sea, esas modificaciones de las propiedades de la hoja de estilos. Vamos a comprobar en la vista

63
00:06:25,069 --> 00:06:28,250
del navegador si sí que lo ha cogido

64
00:06:28,250 --> 00:06:33,730
y efectivamente aquí comprobamos que ha puesto todo el body

65
00:06:33,730 --> 00:06:36,170
de color negro. Esto me

66
00:06:36,170 --> 00:06:41,970
tiene un inconveniente que es que el body ha incluido todos los elementos

67
00:06:41,970 --> 00:06:45,689
y claro, como teníamos esta parte

68
00:06:45,689 --> 00:06:49,970
de aquí con el contenido con el color de letra negro, pues no se va a ver

69
00:06:49,970 --> 00:06:53,730
lo que voy a hacer es poner un fondo blanco para esta parte de aquí, recordad

70
00:06:53,730 --> 00:06:57,410
que era un contenedor llamado artigo

71
00:06:57,410 --> 00:07:00,649
entonces vamos a ir a ese elemento

72
00:07:00,649 --> 00:07:04,250
aquí lo encontramos, dentro del

73
00:07:04,250 --> 00:07:09,110
documento CSS, vale, y vamos

74
00:07:09,110 --> 00:07:13,930
a añadirle, voy a copiar, control c, vamos a añadirle

75
00:07:13,930 --> 00:07:23,209
un color, en este caso blanco, para mantener, podríamos poner cualquier otro color, pero

76
00:07:23,209 --> 00:07:28,790
lo hemos puesto, ahora sí nos ha cogido las propiedades, vamos a ver si también en la

77
00:07:28,790 --> 00:07:35,329
vista del navegador, al recargar la página vemos que efectivamente así es. Bueno, como

78
00:07:35,329 --> 00:07:40,810
he puesto un fondo negro, la propiedad hover de los elementos de los ítems de la barra

79
00:07:40,810 --> 00:07:43,230
navegación, pues no quedan mal, en negro, lo voy a dejar así

80
00:07:43,230 --> 00:07:47,490
bien, pues como veis he cambiado algunas de las propiedades

81
00:07:47,490 --> 00:07:52,689
y bueno, voy a hacer alguna otra modificación, por ejemplo vamos a quitar

82
00:07:52,689 --> 00:07:56,889
a los enlaces que aparecen aquí, le vamos a quitar

83
00:07:56,889 --> 00:08:00,649
el subrayado y vamos a poner un borde

84
00:08:00,649 --> 00:08:06,360
un borde por ejemplo a las imágenes, voy a ir a los estilos

85
00:08:06,360 --> 00:08:10,420
no hay ninguna, no hay ningún selector

86
00:08:10,420 --> 00:08:19,620
de imagen, luego lo voy a crear y voy a añadir la propiedad

87
00:08:19,620 --> 00:08:25,779
borde y le vamos a dar un valor de 6 píxeles

88
00:08:25,779 --> 00:08:30,290
y el color que vamos a utilizar

89
00:08:30,290 --> 00:08:34,809
va a ser por ejemplo el del fondo del encabezado

90
00:08:34,809 --> 00:08:39,110
y el pie, para que quede bien

91
00:08:39,110 --> 00:08:41,330
vale

92
00:08:41,330 --> 00:08:47,009
comprobamos y ahí veríamos que ha aparecido ese borde

93
00:08:47,009 --> 00:08:56,629
sobre la imagen. Y ahora vamos a ir a los enlaces, a estos enlaces, y bueno, si aplicamos

94
00:08:56,629 --> 00:09:08,940
el estilo sobre, queremos los enlaces de dentro de la tabla, lo que haremos es seleccionar

95
00:09:08,940 --> 00:09:17,820
el elemento tabla e indicar que será un enlace dentro de la tabla. Tiene un enlace anidado

96
00:09:17,820 --> 00:09:22,980
en la tabla los que queremos utilizar

97
00:09:22,980 --> 00:09:25,080
la propiedad testDecoration

98
00:09:25,080 --> 00:09:28,259
con el valor null.

99
00:09:31,299 --> 00:09:35,220
Si hacemos eso, vemos que ha desaparecido

100
00:09:35,220 --> 00:09:37,899
el subrayado típico que aparece de forma

101
00:09:37,899 --> 00:09:40,480
predeterminada siempre en los enlaces en los navegadores.

102
00:09:41,480 --> 00:09:43,419
Vamos a volver a comprobar el aspecto

103
00:09:43,419 --> 00:09:48,590
de nuestra página y bueno,

104
00:09:50,690 --> 00:09:52,789
pues lo vamos a dejar así.

105
00:09:52,970 --> 00:09:55,210
Podríamos hacer tantas modificaciones

106
00:09:55,210 --> 00:09:58,429
como queramos, consultando las diferentes propiedades

107
00:09:58,429 --> 00:10:03,289
para los estilos CSS. Todo lo que queráis se podría modificar

108
00:10:03,289 --> 00:10:07,350
y por supuesto lo voy a tener en cuenta cuantas más modificaciones se hagan.

109
00:10:08,389 --> 00:10:11,350
Lo que vamos a hacer ahora es utilizar las tipografías de Google

110
00:10:11,350 --> 00:10:15,149
para modificar los estilos de las letras. Lo voy a hacer en un

111
00:10:15,149 --> 00:10:17,870
vídeo, en el siguiente vídeo.