1
00:00:10,660 --> 00:00:14,280
Vamos a realizar a continuación el ejercicio de ese ejercicio.

2
00:00:14,300 --> 00:00:14,850
1.

3
00:00:15,370 --> 00:00:16,330
Están listos.

4
00:00:16,460 --> 00:00:19,290
Vamos.

5
00:00:20,110 --> 00:00:26,770
El objetivo del ejercicio es crear un programa para practicar lo básico de estilo CSS y al finalizar

6
00:00:26,770 --> 00:00:34,340
deberemos observar lo siguiente según se muestra como primer paso vamos a crear nuestro proyecto el

7
00:00:34,340 --> 00:00:41,780
nombre del proyecto se llama CSS ejercicio 1 y lo depositamos en la ruta mostrada y damos clic en Finalizar

8
00:00:44,910 --> 00:00:53,650
ahora vamos a modificar nuestro archivo índex punto HTML agregamos el Doctrine HTML abrimos la etiqueta

9
00:00:53,740 --> 00:00:59,110
HTML y vamos a agregar a continuación el cabecero de nuestro documento.

10
00:00:59,140 --> 00:01:08,830
Agregamos la etiqueta Metha con hecharse de UTE F8 posteriormente el título ejemplos SS1 y con eso cerramos

11
00:01:08,830 --> 00:01:17,410
nuestro cabecero como siguiente paso vamos a agregar un estilo CSS en este primer ejercicio todavía

12
00:01:17,410 --> 00:01:23,890
no vamos a agregar un archivo externo con extensión CSS sino que vamos a probar los estilos directamente

13
00:01:23,980 --> 00:01:26,230
sobre la página HTML.

14
00:01:26,230 --> 00:01:31,350
Para ello podemos hacer lo siguiente dentro del cuerpo de nuestro documento HTML.

15
00:01:31,450 --> 00:01:39,160
Podemos utilizar el atributo estáel y básicamente este atributo nos permite agregar estilos CSS a nuestro

16
00:01:39,160 --> 00:01:47,530
documento HTML por ejemplo estilos como puede ser el color de fondo especificamos que vamos a modificar

17
00:01:47,650 --> 00:01:54,250
el background o lo que es lo mismo el color de fondo de nuestra página HTML y posteriormente de los

18
00:01:54,250 --> 00:02:01,780
dos puntos especificamos el valor en este caso del color que queremos utilizar utilizando un valor hexadecimal

19
00:02:01,930 --> 00:02:04,330
para establecer el color de fondo.

20
00:02:04,390 --> 00:02:10,360
Para poder seleccionar un color con este formato pueden buscar alguna página en Internet que les haga

21
00:02:10,360 --> 00:02:16,690
la conversión entre un color y el formato hexadecimal ya que ese es el formato que vamos a especificar

22
00:02:16,780 --> 00:02:22,240
dentro del manejo de colores cuando estemos manejando el concepto de estilo CSS.

23
00:02:22,240 --> 00:02:27,760
Posteriormente podemos agregar más propiedades y cada una de estas propiedades las vamos separar por

24
00:02:27,760 --> 00:02:33,790
un punto y coma así que por un lado ya establecimos el fondo pero ahora podemos establecer el color

25
00:02:33,790 --> 00:02:37,840
de nuestra fuente así que para ello agregamos la propiedad de color.

26
00:02:37,840 --> 00:02:41,620
Posteriormente dos puntos y especificamos un color.

27
00:02:41,620 --> 00:02:47,470
En este caso para establecer también el color de la Fuente estamos utilizando el código hexadecimal

28
00:02:47,900 --> 00:02:53,500
y también podemos agregar más propiedades y de igual manera separamos por un punto y coma y podemos

29
00:02:53,500 --> 00:02:58,720
especificar la fuente que vamos a utilizar en esta página HTML.

30
00:02:58,720 --> 00:03:04,660
Así que por medio de la propiedad Font vio en medio Family podemos especificar la fuente que queremos

31
00:03:04,660 --> 00:03:05,940
utilizar.

32
00:03:05,950 --> 00:03:11,440
Así que posterior a los dos puntos establecemos el valor de la Fuente que vamos a utilizar para este

33
00:03:11,440 --> 00:03:12,850
documento.

34
00:03:12,850 --> 00:03:19,990
Podemos especificar varias fuentes pero en este caso estamos especificando la fuente de Comic Sans MS

35
00:03:20,260 --> 00:03:25,870
y terminamos esta propiedad poniendo punto y coma y también cerramos nuestra cadena con comilla tal

36
00:03:25,870 --> 00:03:32,710
como la iniciamos así que básicamente a través del atributo está el es que podemos agregar varias propiedades

37
00:03:32,710 --> 00:03:36,320
de tipo CSS a nuestro documento HTML.

38
00:03:36,340 --> 00:03:42,700
Posteriormente estas propiedades las vamos a agregar a un archivo punto CSS para que puedan ser reutilizables

39
00:03:43,710 --> 00:03:49,410
no solamente en esta página HTML sino en cualquier página HTML de nuestro proyecto web.

40
00:03:49,410 --> 00:03:55,740
Sin embargo en este caso para iniciar con este tema de CSS estamos aplicándolo directamente a nuestros

41
00:03:55,740 --> 00:04:01,890
documentos HTML continuando con la codificación de nuestro código HTML.

42
00:04:01,900 --> 00:04:10,970
Agregamos un título ejemplo CSS 1 apoyándonos de la etiqueta H1 y posteriormente vamos a agregar un

43
00:04:10,970 --> 00:04:16,910
párrafo sin embargo en este caso vamos a sobreescribir el valor que ya hemos definido anteriormente

44
00:04:16,910 --> 00:04:18,160
de Font Family.

45
00:04:18,320 --> 00:04:23,800
Así que en este párrafo en particular vamos a aplicar el estilo de Font Family Arial.

46
00:04:24,050 --> 00:04:25,910
En este caso la fuente de Arial Black

47
00:04:28,680 --> 00:04:32,950
y agregamos lo siguiente Este es el contenido del párrafo.

48
00:04:33,000 --> 00:04:39,330
Sin embargo esta palabra también vamos a modificarle el estilo y para ello podemos utilizar la etiqueta

49
00:04:39,430 --> 00:04:39,960
Spahn.

50
00:04:40,410 --> 00:04:46,140
Básicamente esta etiqueta la vamos a utilizar para agregar un estilo directamente al texto que estamos

51
00:04:46,200 --> 00:04:50,500
englobando entre esta etiqueta y por medio del atributo estáel.

52
00:04:50,580 --> 00:04:56,970
En este caso podemos aplicar por ejemplo el atributo de Foncillas y hacer la fuente más grande así que

53
00:04:56,970 --> 00:05:03,210
no solamente estamos escribiendo este valor ya no se va a aplicar esta fuente sino que ahora vamos a

54
00:05:03,210 --> 00:05:09,170
aplicar la fuente de área Black y además estamos agregando otro estilo más de Foncillas.

55
00:05:09,300 --> 00:05:15,990
Así que para esta palabra de párrafo vamos a aplicar una fuente de tipo X X Latch así que lo que estamos

56
00:05:15,990 --> 00:05:22,770
tratando de ejemplificar en este caso es que dentro de un elemento HTML como puede ser un párrafo podemos

57
00:05:22,770 --> 00:05:29,670
empezar a sobreescribir los estilos que ya hemos definido anteriormente de las propiedades CSS y también

58
00:05:29,670 --> 00:05:34,130
podemos ir agregando más propiedades si es que en este momento hicieran falta.

59
00:05:34,710 --> 00:05:40,850
Así que no solamente se pueden definir dentro del Bodhi sino que dentro de los elementos HTML como es

60
00:05:40,860 --> 00:05:47,790
el párrafo o incluso dentro de la cadena del párrafo podemos modificar los elementos de nuestro documento

61
00:05:47,850 --> 00:05:52,470
HTML aplicando estilos distintos según sea necesario.

62
00:05:52,470 --> 00:05:58,790
Sin embargo vamos a ver posteriormente que es preferible que este tipo de estilos se definan en un archivo.

63
00:05:58,950 --> 00:06:04,440
Esto para que se puedan reutilizar y no tengamos que estar repitiendo estas variantes a lo largo de

64
00:06:04,440 --> 00:06:13,330
nuestros documentos HTML cerramos nuestro párrafo agregamos un salto de línea y ahora lo que hacemos

65
00:06:13,390 --> 00:06:17,350
es definir un párrafo pero vamos a cambiar el color de la Fuente.

66
00:06:17,350 --> 00:06:23,050
Para ello utilizamos de nueva cuenta el atributo de estáel y cambiamos el atributo color para cambiar

67
00:06:23,050 --> 00:06:31,470
el color de la Fuente y definimos también otro color utilizando el código hexadecimal y agregamos dentro

68
00:06:31,470 --> 00:06:34,860
de este párrafo ese es el contenido del párrafo 2.

69
00:06:35,250 --> 00:06:42,470
Así que a este párrafo 2 se le va a agregar un color distinto cerramos el párrafo y agregamos un salto

70
00:06:42,470 --> 00:06:45,310
de línea y definimos un último párrafo.

71
00:06:45,350 --> 00:06:49,310
También le vamos a cambiar el color de la Fuente y agregamos el párrafo.

72
00:06:49,310 --> 00:06:55,670
Este es el contenido del párrafo 3 cerramos el párrafo y terminamos nuestro documento HTML.

73
00:06:55,910 --> 00:06:59,360
Recuerden que para cualquier duda pueden dar clic en el nombre del archivo.

74
00:06:59,360 --> 00:07:02,360
Sin embargo se le solicita codificar línea a línea.

75
00:07:02,360 --> 00:07:06,260
Este ejercicio para que vaya quedando claro el concepto de hojas de estilo

76
00:07:09,150 --> 00:07:14,220
como siguiente paso vamos a ejecutar nuestro proyecto y una vez que lo ejecutemos el resultado es como

77
00:07:14,220 --> 00:07:19,050
sigue podemos observar el color de background que hemos aplicado a toda la hoja.

78
00:07:19,050 --> 00:07:22,330
Por lo tanto podemos observar un nuevo color de background.

79
00:07:22,320 --> 00:07:28,470
Posteriormente agregamos un título pero si recordamos utilizamos la fuente de Comic Sans MS así que

80
00:07:28,470 --> 00:07:35,130
a todo el documento HTML por default se le va a aplicar este estilo y también aplicamos un color de

81
00:07:35,130 --> 00:07:35,800
fuente.

82
00:07:36,000 --> 00:07:41,510
Así que ésta es la fuente y el color por default que aplicamos en el documento HTML.

83
00:07:41,520 --> 00:07:48,750
Sin embargo en el primer párrafo definimos una fuente distinta así que se escribe el valor de la fuente

84
00:07:48,750 --> 00:07:55,020
de Comic Sans y lo que utilizamos en este párrafo en particular únicamente para este párrafo fue el

85
00:07:55,020 --> 00:07:57,110
estilo de fuente de Arial Black.

86
00:07:57,310 --> 00:08:03,690
Y dentro de esta palabra de párrafo utilizamos la etiqueta es pan para agregar un estilo más en este

87
00:08:03,690 --> 00:08:09,540
caso el estilo de que hiciera la fuente más grande así que podemos observar que podemos redefinir varios

88
00:08:09,540 --> 00:08:15,360
elementos conforme necesitemos a lo largo de nuestra página HTML como siguiente párrafo.

89
00:08:15,360 --> 00:08:17,310
También definimos nuestro párrafo 2.

90
00:08:17,430 --> 00:08:22,400
En este caso se están aplicando los estilos de la Fuente ya definido a nivel de Bodin.

91
00:08:22,530 --> 00:08:29,180
En este caso la fuente de Comic Sans CMS y lo único que modificamos a nivel de este párrafo estamos

92
00:08:29,400 --> 00:08:34,770
escribiendo el color de la Fuente ya no se va a aplicar este color de fuente que es el color por default

93
00:08:35,070 --> 00:08:41,640
sino que estamos escribiendo el valor definido en la parte del body únicamente para este elemento estamos

94
00:08:41,700 --> 00:08:46,190
indicando que el color de fuente para este párrafo va a ser el color rojo.

95
00:08:46,230 --> 00:08:52,590
Recordemos que este código lo aplicamos por medio de un valor hexadecimal así que para cualquier duda

96
00:08:52,590 --> 00:08:59,070
del manejo de colores pueden buscar una página en internet para convertir los colores a un color hexadecimal

97
00:08:59,250 --> 00:09:04,110
y poder obtener este código hexadecimal según el color que necesiten.

98
00:09:04,110 --> 00:09:09,690
Por último agregamos a este párrafo y lo que hicimos en este párrafo también fue modificar el color

99
00:09:09,690 --> 00:09:15,570
de este párrafo así que ya no se va a utilizar el color definido por default sino que vamos a utilizar

100
00:09:15,600 --> 00:09:20,520
un color distinto según se observa pero la fuente definida en el body es la misma.

101
00:09:20,520 --> 00:09:25,740
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

102
00:09:25,740 --> 00:09:28,070
Sans en estos dos párrafos.

103
00:09:28,230 --> 00:09:34,710
Así que con este ejemplo estamos aplicando el concepto básico de hojas de estilo y podemos ver cómo

104
00:09:34,710 --> 00:09:40,800
las hojas de estilo transforman la apariencia de nuestro código HTML si no agregamos estas hojas de

105
00:09:40,800 --> 00:09:41,400
estilo.

106
00:09:41,460 --> 00:09:47,520
Básicamente tendríamos una página en blanco y tendríamos una fuente por default según se haya configurado

107
00:09:47,550 --> 00:09:53,610
en el navegador pero a través de las hojas de estilo podemos empezar a cambiar estos elementos y poco

108
00:09:53,610 --> 00:09:56,970
a poco iremos aplicando más conceptos de hojas de estilo

109
00:09:59,770 --> 00:10:00,720
como conclusión.

110
00:10:00,760 --> 00:10:06,850
Con este ejercicio hemos puesto en práctica lo básico de los estilos CSS definiendo los estilos directamente

111
00:10:07,060 --> 00:10:12,610
sobre el atributo estilo de los elementos HTML seleccionados.

112
00:10:12,610 --> 00:10:18,490
A continuación veremos más ejemplos de cómo ir mejorando la aplicación de estilos a nuestros elementos

113
00:10:18,580 --> 00:10:23,170
HTML con eso terminamos elejercicio CSS.

114
00:10:23,200 --> 00:10:23,760
Ejemplo.