1
00:00:00,360 --> 00:00:02,029
Hasta ahora hemos visto cómo

2
00:00:02,029 --> 00:00:03,588
podemos usar CSS para estilizar un texto,

3
00:00:04,088 --> 00:00:05,904
pero también podemos usar CSS para cambiar

4
00:00:05,904 --> 00:00:07,500
completamente el diseño de nuestra página.

5
00:00:07,620 --> 00:00:09,148
Esto significa que podemos mover las cosas,

6
00:00:09,157 --> 00:00:10,187
cambiar el tamaño,

7
00:00:10,187 --> 00:00:11,777
e incluso poner unas cosas arriba de otras.

8
00:00:12,010 --> 00:00:13,551
Pero ¿cuáles son las cosas

9
00:00:13,551 --> 00:00:14,401
que queremos mover?

10
00:00:14,498 --> 00:00:16,118
Algunas veces son elementos

11
00:00:16,118 --> 00:00:17,339
que hemos hecho con anterioridad,

12
00:00:17,339 --> 00:00:18,812
como un cierto párrafo,

13
00:00:18,812 --> 00:00:20,672
o un encabezado.

14
00:00:21,231 --> 00:00:22,455
Pero muchas veces,

15
00:00:22,455 --> 00:00:24,679
estas cosas son un grupo de elementos que hemos hecho,

16
00:00:24,679 --> 00:00:26,889
como una selección de texto,

17
00:00:27,055 --> 00:00:30,805
o un encabezado con algunos párrafos.

18
00:00:31,693 --> 00:00:34,366
Para moverlos todos juntos como una unidad,

19
00:00:34,366 --> 00:00:36,845
necesitamos introducir dos nuevas etiquetas HTML

20
00:00:36,845 --> 00:00:39,285
a las que llamamos elementos de agrupación.

21
00:00:39,285 --> 00:00:41,460
No hablamos de ellas antes de CSS,

22
00:00:41,460 --> 00:00:42,662
porque sólo se pueden usar

23
00:00:42,662 --> 00:00:44,210
cuando las combinamos con CSS.

24
00:00:44,210 --> 00:00:46,915
No tienen significado semántico para el navegador.

25
00:00:47,115 --> 00:00:49,616
La primera es la etiqueta "",

26
00:00:49,616 --> 00:00:53,236
y la usamos para agrupar una selección de texto.

27
00:00:53,244 --> 00:00:54,193
Digamos que queremos que esta

28
00:00:54,193 --> 00:00:56,503
palabra "Love" sea roja.

29
00:00:57,055 --> 00:00:58,692
Y sólo queremos cambiar el color de la palabra,

30
00:00:58,692 --> 00:00:59,952
no de todo el encabezado.

31
00:01:00,327 --> 00:01:02,458
Ponemos el cursor al principio de la palabra "Love",

32
00:01:02,458 --> 00:01:06,138
escribimos la etiqueta "".

33
00:01:06,499 --> 00:01:10,519
Nos pasamos al final de la palabra, y tecleamos el cierre de la etiqueta, ok.

34
00:01:10,678 --> 00:01:11,684
Ahora queremos estilizar

35
00:01:11,684 --> 00:01:13,049
esta selección ("") de caracteres.

36
00:01:13,049 --> 00:01:15,813
Podemos hacer una regla para colorear todas las selecciones ("s") en la página,

37
00:01:15,813 --> 00:01:18,558
pero probablemente no queramos que todas las selecciones sean rojas.

38
00:01:18,558 --> 00:01:24,890
Vamos a definir una clase para este "" digamos "lovey-dovey",

39
00:01:25,086 --> 00:01:29,053
y vamos a añadir una regla para los elementos que

40
00:01:29,053 --> 00:01:30,810
tienen la clase "lovey-dovey".

41
00:01:30,810 --> 00:01:34,325
Así que escribimos ".lovey-dovey", "color: red".

42
00:01:34,613 --> 00:01:37,623
¡Mira que dulce es el texto ahora!

43
00:01:37,913 --> 00:01:39,667
Entonces "" sirve para agrupar

44
00:01:39,667 --> 00:01:41,367
selecciones de texto.

45
00:01:41,367 --> 00:01:43,507
¿Cómo agrupamos varios elementos?

46
00:01:43,507 --> 00:01:45,467
Aquí es donde usamos la etiqueta "".

47
00:01:45,467 --> 00:01:46,747
Digamos que queremos agrupar

48
00:01:46,747 --> 00:01:48,187
esta sección de abajo.

49
00:01:48,195 --> 00:01:49,644
El encabezado "Official Info" y

50
00:01:49,644 --> 00:01:51,684
los párrafos y la fotografía que están debajo.

51
00:01:51,743 --> 00:01:52,714
Para hacer eso,

52
00:01:52,714 --> 00:01:57,339
voy a colocar el cursor antes del encabezado "h3"

53
00:01:57,339 --> 00:01:59,389
y escribo la etiqueta "".

54
00:01:59,859 --> 00:02:02,259
Y luego me voy al final del último párrafo,

55
00:02:02,690 --> 00:02:04,620
y escribo la etiqueta de cierre de "".

56
00:02:05,467 --> 00:02:07,847
Ya tenemos definido "", ahora necesitamos estilizarlo.

57
00:02:08,290 --> 00:02:09,568
Para estilizar "",

58
00:02:09,568 --> 00:02:14,116
voy a definir un id: "official info".

59
00:02:14,457 --> 00:02:17,757
Y luego voy a añadir una regla aquí arriba.

60
00:02:17,757 --> 00:02:21,885
Entonces escribo: "#official-info", "background",

61
00:02:21,885 --> 00:02:23,885
y vamos a definir un gris bonito.

62
00:02:23,885 --> 00:02:26,933
Lo seleccionamos, éste está bien.

63
00:02:26,933 --> 00:02:28,646
Ahora vemos que "" se volvió un cuadro gris

64
00:02:28,646 --> 00:02:31,751
que contiene todos los elementos dentro.

65
00:02:31,772 --> 00:02:34,267
Y es diferente que si hubieramos

66
00:02:34,267 --> 00:02:35,947
definido un fondo gris para cada elemento.

67
00:02:35,998 --> 00:02:38,228
Si hubiéramos hecho eso, entre cada elemento

68
00:02:38,228 --> 00:02:39,538
tendríamos un espacio que no sería gris.

69
00:02:39,538 --> 00:02:41,120
Tenemos que usar "",

70
00:02:41,129 --> 00:02:44,139
si queremos un cuadro alrededor de todo lo que seleccionemos.

71
00:02:44,558 --> 00:02:46,185
Podemos pensar en ""

72
00:02:46,185 --> 00:02:48,205
para agrupar texto.

73
00:02:48,303 --> 00:02:50,759
Y pensamos en "",

74
00:02:50,759 --> 00:02:52,499
para agrupar elementos.

75
00:02:52,499 --> 00:02:55,228
Pero hay otra manera para distinguirlos.

76
00:02:55,451 --> 00:02:56,854
Verás, hay dos tipos de

77
00:02:56,854 --> 00:02:58,104
elementos en el mundo de CSS.

78
00:02:58,412 --> 00:03:00,232
En línea y en bloque.

79
00:03:00,499 --> 00:03:03,409
Un elemento en línea no tiene una nueva línea después de él.

80
00:03:03,570 --> 00:03:06,726
Si hiciéramos muchos de ellos todos estarían en la misma línea.

81
00:03:06,726 --> 00:03:08,751
Hemos hablado de algunos de ellos,

82
00:03:08,751 --> 00:03:11,651
como una imagen.

83
00:03:11,832 --> 00:03:13,432
Y lo puedes ver con esta imagen,

84
00:03:13,451 --> 00:03:16,431
la forma en que el texto continúa después de ella.

85
00:03:16,616 --> 00:03:18,326
No hay una línea después de ella.

86
00:03:18,657 --> 00:03:21,887
Un elemento de bloque, sí tiene una línea después,

87
00:03:21,912 --> 00:03:24,602
así es como se crean las etiquetas en HTML.

88
00:03:24,818 --> 00:03:26,978
Mira los ejemplos en esta página.

89
00:03:27,041 --> 00:03:30,281
Los encabezados, los párrafos, las listas.

90
00:03:30,639 --> 00:03:33,739
El navegador pone líneas nuevas después de cada uno de ellos,

91
00:03:33,739 --> 00:03:36,532
sin que tú tengas que escribir una etiqueta "
".

92
00:03:36,767 --> 00:03:39,869
¿Qué tiene que ver eso con "" y con ""?

93
00:03:39,869 --> 00:03:43,203
Bueno, la etiqueta "" crea elementos en línea,

94
00:03:43,203 --> 00:03:47,123
y "" crea elementos de bloque.

95
00:03:47,252 --> 00:03:49,492
Eso significa que si agregas una etiqueta "",

96
00:03:49,492 --> 00:03:53,982
y no agregas algún otro estilo,

97
00:03:53,982 --> 00:03:56,700
el navegador va a considerar como un solo bloque

98
00:03:56,700 --> 00:03:58,145
esa parte de la página.

99
00:03:58,145 --> 00:04:00,534
Como esta pequeña parte de texto que encerré en una etiqueta "",

100
00:04:00,534 --> 00:04:03,434
ahora tiene nuevas líneas antes y después.

101
00:04:03,434 --> 00:04:05,495
Y tal vez eso es lo que quieres,

102
00:04:05,495 --> 00:04:07,525
así que recuerda estas diferencias.

103
00:04:07,553 --> 00:04:09,383
Y sigue adelante porque hay mucho más

104
00:04:09,395 --> 00:04:11,145
que podemos hacer con esas etiquetas.

105
00:04:11,145 --> 00:04:13,481
Especialmente con esta poderosa etiqueta "".