1
00:00:11,830 --> 00:00:17,630
Vamos a analizar a continuación el ejercicio es ese ejercicio 3 están listos.

2
00:00:17,630 --> 00:00:25,140
Vamos el objetivo del ejercicio es crear un programa para continuar practicando lo básico de estilo

3
00:00:25,140 --> 00:00:29,450
CSS y al finalizar deberemos observar lo siguiente según se muestra

4
00:00:34,440 --> 00:00:36,240
vamos a crear nuestro proyecto.

5
00:00:36,240 --> 00:00:42,600
El proyecto se va a llamar CSS ejercicio 3 lo depositamos en la ruta mostrada y damos clic en Finalizar

6
00:00:46,230 --> 00:00:52,220
también vamos a crear un archivo llamado estilos puntos CSS similar al proyecto anterior.

7
00:00:52,470 --> 00:00:59,450
Así que sobre nuestro proyecto CSS ejercicio 3 damos clic derecho NIU y seleccionamos Qashqai de installed

8
00:01:03,870 --> 00:01:06,300
el nombre del archivo se va a llamar estilos.

9
00:01:06,300 --> 00:01:12,120
No es necesario agregar la extensión y en automático se va a depositar a nivel raíz de nuestro proyecto

10
00:01:13,050 --> 00:01:17,600
es decir dentro de la carpeta públic HTML y damos clic en Finalizar

11
00:01:20,340 --> 00:01:29,110
vamos a modificar a continuación nuestro archivo índex punto HTML agregamos el Doctrine abrimos nuestro

12
00:01:29,110 --> 00:01:38,370
documento HTML también en el cabecero y agregamos el meta charged o Tc8 recordemos que para ello estamos

13
00:01:38,370 --> 00:01:41,130
utilizando el elemento Link.

14
00:01:41,250 --> 00:01:45,720
Posteriormente el atributo rel indicamos que es de tipo está allí.

15
00:01:45,840 --> 00:01:52,530
También agregamos el atributo de Taipe indicando que vamos a trabajar texto de tipo CSS y finalmente

16
00:01:52,530 --> 00:02:00,390
por medio del atributo HR-V hacemos referencia al documento punto CSS en este caso a nivel raíz y por

17
00:02:00,390 --> 00:02:08,780
lo tanto únicamente escribimos en nombre del archivo estilos CSS agregamos el título CSS.

18
00:02:08,790 --> 00:02:18,300
Ejemplo 3 y cerramos el cabecero de este documento posteriormente vamos a agregar el body dentro del

19
00:02:18,300 --> 00:02:18,640
body.

20
00:02:18,660 --> 00:02:26,100
Agregamos un título CSS ejemplo 3 y posteriormente un primer párrafo y agregamos el texto párrafo de

21
00:02:26,100 --> 00:02:33,450
ejemplo 1 cerramos nuestro párrafo agregamos un segundo párrafo de ejemplo 2 y ahora lo que vamos a

22
00:02:33,450 --> 00:02:38,830
hacer es agregar un nuevo elemento en este caso vamos a utilizar la etiqueta de Dib.

23
00:02:38,970 --> 00:02:46,740
Básicamente un dip o un elemento de división es una sección de nuestro documento HTML y podemos aplicar

24
00:02:46,830 --> 00:02:51,480
cualquier formato cualquier estilo dentro de este elemento de tipo div.

25
00:02:51,600 --> 00:02:57,690
En este caso para aplicar el estilo que vamos a definir dentro de nuestro archivo externo estilos puntos

26
00:02:57,690 --> 00:02:58,800
CSS.

27
00:02:58,950 --> 00:03:06,000
Vamos a definir una nueva clase dentro de este archivo estilos puntos CSS y esa clase la vamos a utilizar

28
00:03:06,120 --> 00:03:10,630
la vamos a aplicar dentro de este elemento y por medio del atributo class.

29
00:03:10,800 --> 00:03:19,360
Así que esta clase llamada resaltado va a englobar varios estilos dentro de este archivo CSS así que

30
00:03:19,360 --> 00:03:25,180
todos los estilos que se apliquen dentro de esta clase se van a aplicar a este elemento de tipo.

31
00:03:25,780 --> 00:03:29,730
Posteriormente vamos a agregar el código del archivo a estilos puntos CSS.

32
00:03:29,830 --> 00:03:36,130
En este caso únicamente cabe mencionar que vamos a definir posteriormente una clase llamada resaltado

33
00:03:36,880 --> 00:03:43,990
dentro de este archivo estilos puntos CSS y esos estilos los vamos a aplicar a este elemento de tipo

34
00:03:44,070 --> 00:03:53,690
DIV y agregamos lo siguiente a este elemento de tipo Dib el texto agregamos una nueva división y cerramos

35
00:03:53,690 --> 00:04:02,180
esta división agregamos un salto de línea y agregamos también una nueva división y agregamos el atributo

36
00:04:02,180 --> 00:04:09,140
de Class nueva clase CSS es decir que dentro del archivo estilos puntos CSS también vamos a agregar

37
00:04:09,170 --> 00:04:16,250
una nueva clase llamada precisamente nueva clase CSS y se va a aplicar los estilos definidos sobre ese

38
00:04:16,310 --> 00:04:23,600
elemento y agregamos lo siguiente a esta división agregamos una segunda división y cerramos esta división

39
00:04:25,130 --> 00:04:32,090
cerramos el cuerpo de nuestro documento HTML y cerramos también el documento HTML para cualquier duda

40
00:04:32,090 --> 00:04:34,250
pueden dar clic sobre el nombre del archivo.

41
00:04:34,280 --> 00:04:37,230
Sin embargo se le solicita codificar línea a línea.

42
00:04:37,250 --> 00:04:47,610
Este archivo vamos a definir ahora el contenido de nuestro archivo estilos puntos CSS podemos observar

43
00:04:47,610 --> 00:04:53,980
que vamos a definir algunos estilos para nuestra etiqueta de body con el color de background definido

44
00:04:53,980 --> 00:04:57,450
según se indica utilizando el código hexadecimal

45
00:04:59,740 --> 00:05:02,020
posteriormente definimos un font family.

46
00:05:02,020 --> 00:05:10,540
En este caso en este caso la fuente de área narrow posteriormente un color un color de fuente.

47
00:05:10,570 --> 00:05:16,930
En este caso el color de fuente blanco y cerramos los estilos que van a aplicar a nivel del Bodhi de

48
00:05:16,930 --> 00:05:23,590
nuestro documento HTML es decir que todo lo que se agregue a nivel del body de nuestro documento HTML

49
00:05:23,770 --> 00:05:25,900
se van a aplicar estos estilos.

50
00:05:25,900 --> 00:05:31,630
Sin embargo si aplicamos otros estilos de manera más interna entonces los estilos que van a aplicar

51
00:05:31,720 --> 00:05:37,780
son precisamente los estilos más internos y se van a sobreescribir estos valores definidos a nivel del

52
00:05:37,780 --> 00:05:45,340
body del documento HTML ya que van a tomar prioridad los elementos más internos sobre los elementos

53
00:05:45,340 --> 00:05:54,680
más externos vamos a definir un estilo para nuestro elemento H1 es decir el elemento de título HTML

54
00:05:54,830 --> 00:06:02,700
de tamaño 1 sobre este elemento H1 lo que vamos a hacer es especificar el bonsais que va a tomar el

55
00:06:02,700 --> 00:06:13,390
estilo x x Large y también está el va a ser de tipo Italika y cerramos los estilos que se van a aplicar

56
00:06:13,450 --> 00:06:21,190
a este elemento H1 así que además de los elementos definidos a nivel del Bodhi también se van a anexar

57
00:06:21,370 --> 00:06:28,570
estos elementos definidos a nivel H1 y debido a que estos elementos no se especificaron en el bodhi

58
00:06:28,780 --> 00:06:34,510
lo que se va a hacer es que se van a anexar estos elementos al elemento que se va a aplicar al elemento

59
00:06:34,570 --> 00:06:35,620
H1.

60
00:06:35,620 --> 00:06:41,500
Si estos elementos como el iPhone 6 se hubiera definido también en el body entonces hubieran sobre escrito

61
00:06:41,730 --> 00:06:46,280
y hubieran tomado prioridad los elementos definidos en el elemento H1.

62
00:06:46,300 --> 00:06:52,060
Sin embargo como no se definieron en ambos lados únicamente se van a anexar tanto los elementos que

63
00:06:52,060 --> 00:06:57,790
aplican del body como los elementos que apliquen del estilo en este momento definidos en el elemento

64
00:06:57,820 --> 00:07:07,770
H1 posteriormente definimos algunos estilos para el elemento de párrafo y en este caso indicamos que

65
00:07:07,770 --> 00:07:14,160
para los elementos de tipo p vamos a indicar un fondo Waite de tipo Wolder es decir que lo va a poner

66
00:07:14,160 --> 00:07:17,440
en negritas también un background.

67
00:07:17,480 --> 00:07:21,170
Vamos a modificar el background para los elementos de tipo párrafo

68
00:07:24,180 --> 00:07:31,300
y lo que vamos a hacer ahora es vamos a agregar una nueva clase aplicable a cualquier elemento HTML

69
00:07:31,550 --> 00:07:35,320
como puede ser nuestro elemento Dib que hemos comentado anteriormente

70
00:07:37,900 --> 00:07:39,700
para definir una nueva clase.

71
00:07:39,700 --> 00:07:46,390
Vamos a utilizar la notación de punto y posteriormente el nombre de la nueva clase y abrimos una llave

72
00:07:47,660 --> 00:07:50,510
y podemos agregar cualquier estilo que necesitemos.

73
00:07:50,510 --> 00:07:54,130
Por ejemplo en este caso estamos definiendo un color de background.

74
00:07:54,410 --> 00:08:01,310
Según se indica y también estamos indicando que el FOM guay va a ser de tipo Bold así que lo que definamos

75
00:08:01,430 --> 00:08:07,220
por medio de esta clase el estilo que va a tomar son los que se están indicando y también podemos agregar

76
00:08:07,280 --> 00:08:13,910
una nueva clase y modificar los valores como pueden ser los estilos de tipo font family según se indica

77
00:08:14,200 --> 00:08:15,480
y también el fondo.

78
00:08:15,500 --> 00:08:21,590
Según se indica también estamos modificando el color de Bagram por medio de esta nueva clase y estamos

79
00:08:21,590 --> 00:08:28,700
agregando estos estilos así que básicamente a nuestros elementos de tipo Dib definidos en el archivo

80
00:08:28,900 --> 00:08:37,490
índex punto HTML le aplicamos los estilos según se indica si recordamos en el elemento HTML por medio

81
00:08:37,490 --> 00:08:44,030
del atributo class indicamos el nombre de la clase así que en un primer elemento de tipo DIV lo que

82
00:08:44,030 --> 00:08:52,190
hicimos fue indicar que apliqué los estilos definidos por la clase resaltado así que estos estilos que

83
00:08:52,190 --> 00:08:59,660
se han definido por medio de esta nueva clase se van a aplicar al contenido de este día así que el texto

84
00:08:59,660 --> 00:09:05,480
que se agregue dentro de este DIV se le van a aplicar esas propiedades según se ha definido dentro de

85
00:09:05,480 --> 00:09:12,080
esta clase y también agregamos un segundo elemento de tipo Dib según recordamos pero en este segundo

86
00:09:12,110 --> 00:09:20,570
elemento indicamos que se le iba a aplicar la clase de nueva clase CSS así que todo lo que se agregue

87
00:09:20,570 --> 00:09:25,510
dentro de este Dip se le van a aplicar estos estilos según estamos viendo.

88
00:09:29,190 --> 00:09:35,830
Los estilos que se han definido dentro de este elemento de nueva clase así que este nombre corresponde

89
00:09:35,830 --> 00:09:41,920
precisamente con lo que estamos definiendo dentro de nuestro archivo CSS y con el nombre de la clase

90
00:09:41,920 --> 00:09:47,740
que debemos especificar en cada uno de los elementos donde deseamos que se aplique esta nueva clase.

91
00:09:48,160 --> 00:09:53,110
Recuerden que pueden dar clic en el nombre del archivo para cualquier problema que tengan en la codificación

92
00:09:53,110 --> 00:09:54,450
de este archivo.

93
00:09:54,640 --> 00:10:00,340
Sin embargo se les solicita codificar línea a línea para que vaya quedando claro el uso de estilo CSS

94
00:10:04,010 --> 00:10:09,670
como siguiente paso ejecutamos nuestro proyecto y podemos observar que se aplica un color de fondo.

95
00:10:09,710 --> 00:10:15,350
También se aplica un estilo general de color de fuente a todo el documento HTML.

96
00:10:15,350 --> 00:10:22,400
En este caso el color es blanco para todos los elementos de tipo texto en el documento HTML.

97
00:10:22,400 --> 00:10:27,740
Posteriormente dentro de nuestra hoja de estilos modificamos algunos valores de los estilos que se aplican

98
00:10:27,770 --> 00:10:33,610
al título así que hicimos más grande el título y además el texto se aplicó con el estilo de Italika.

99
00:10:33,920 --> 00:10:40,160
Posteriormente en el párrafo ejemplo 1 se aplicó los estilos que definimos también en el documento externo

100
00:10:40,220 --> 00:10:48,050
estilo CSS ya que indicamos que cambiara el background para los elementos de tipo P Así que todos los

101
00:10:48,050 --> 00:10:55,130
elementos de tipo p por default van a tomar estos elementos excepto cuando escribamos los valores.

102
00:10:55,310 --> 00:11:00,770
Así que los elementos de tipo párrafo van a tomar las propiedades que hemos definido en este archivo

103
00:11:00,950 --> 00:11:05,360
externo CSS y posteriormente agregamos una división.

104
00:11:05,390 --> 00:11:12,230
Como hemos comentado una división es una parte de nuestro documento HTML no necesariamente es un párrafo.

105
00:11:12,320 --> 00:11:17,750
Sin embargo en este caso podemos observar que se parece a un párrafo sin embargo realmente es únicamente

106
00:11:17,840 --> 00:11:21,060
una división en nuestro documento HTML.

107
00:11:21,080 --> 00:11:24,440
Posteriormente vamos a hacer uso más avanzado de estos elementos.

108
00:11:24,500 --> 00:11:29,430
Sin embargo se puede hacer un uso más complejo de este elemento de tipo división.

109
00:11:29,450 --> 00:11:36,380
Por ejemplo una división se puede mostrar u ocultar dinámicamente utilizando JavaScript y por ello es

110
00:11:36,380 --> 00:11:41,870
que este tipo de elementos de tipo división va a ser muy utilizado cuando estamos trabajando con HTML

111
00:11:42,080 --> 00:11:49,490
CSS y JavaScript ya que podemos mostrar y ocultar este elemento de tipo división ya que como hemos comentado

112
00:11:49,580 --> 00:11:56,600
es una parte de nuestro documento HTML el cual podemos manipular dinámicamente o como en este caso podemos

113
00:11:56,600 --> 00:12:03,350
observar que podemos aplicar estilos distintos directamente a este elemento de tipo división y aplicamos

114
00:12:03,410 --> 00:12:10,610
una clase a este elemento de tipo división y aplicamos una nueva clase también a este segundo elemento

115
00:12:10,610 --> 00:12:16,410
de tipo división según hemos codificado en nuestro proyecto y podemos observar el resultado.

116
00:12:16,460 --> 00:12:22,520
Tenemos un background distinto en ambos casos y en este segundo caso tenemos una fuente más grande pero

117
00:12:22,520 --> 00:12:28,490
así es como podemos empezar a agrupar nuestros estilos que estamos aplicando a los elementos de nuestro

118
00:12:28,490 --> 00:12:29,960
documento HTML.

119
00:12:30,320 --> 00:12:36,020
Recuerden que en cualquier elemento pueden seleccionarlo y dar clic derecho en inspeccionar para que

120
00:12:36,020 --> 00:12:41,600
observen claramente cuáles son los estilos que se aplicaron y cuáles son los estilos que se escribieron

121
00:12:42,140 --> 00:12:47,780
es decir los que ya no tomaron prioridad y con esto pueden salir de cualquier duda de cuáles son los

122
00:12:47,780 --> 00:12:51,440
estilos que se están aplicando a su documento HTML

123
00:12:54,590 --> 00:12:55,630
como conclusión.

124
00:12:55,670 --> 00:13:02,600
Con este ejercicio hemos puesto en práctica varios conceptos más de estilo CSS la combinación de colores

125
00:13:02,780 --> 00:13:09,530
la obtuvimos con ayuda del siguiente sitio web maletón puntocom y se dan clic en el nombre de Link pueden

126
00:13:09,530 --> 00:13:15,230
obtener directamente los colores que hemos utilizado en este ejercicio y también ustedes pueden crear

127
00:13:15,380 --> 00:13:20,010
sus propias combinaciones de colores según necesiten en sus proyectos.

128
00:13:20,030 --> 00:13:22,760
Por eso concluimos el ejercicio CSS.

129
00:13:22,760 --> 00:13:23,630
Ejemplo 3.