0:00:00.360,0:00:02.029
Hasta ahora hemos visto cómo

0:00:02.029,0:00:03.588
podemos usar CSS para estilizar un texto,

0:00:04.088,0:00:05.904
pero también podemos usar CSS para cambiar

0:00:05.904,0:00:07.500
completamente el diseño de nuestra página.

0:00:07.620,0:00:09.148
Esto significa que podemos mover las cosas,

0:00:09.157,0:00:10.187
cambiar el tamaño,

0:00:10.187,0:00:11.777
e incluso poner unas cosas arriba de otras.

0:00:12.010,0:00:13.551
Pero ¿cuáles son las cosas

0:00:13.551,0:00:14.401
que queremos mover?

0:00:14.498,0:00:16.118
Algunas veces son elementos

0:00:16.118,0:00:17.339
que hemos hecho con anterioridad,

0:00:17.339,0:00:18.812
como un cierto párrafo,

0:00:18.812,0:00:20.672
o un encabezado.

0:00:21.231,0:00:22.455
Pero muchas veces,

0:00:22.455,0:00:24.679
estas cosas son un grupo de elementos que hemos hecho,

0:00:24.679,0:00:26.889
como una selección de texto,

0:00:27.055,0:00:30.805
o un encabezado con algunos párrafos.

0:00:31.693,0:00:34.366
Para moverlos todos juntos como una unidad,

0:00:34.366,0:00:36.845
necesitamos introducir dos nuevas etiquetas HTML

0:00:36.845,0:00:39.285
a las que llamamos elementos de agrupación.

0:00:39.285,0:00:41.460
No hablamos de ellas antes de CSS,

0:00:41.460,0:00:42.662
porque sólo se pueden usar

0:00:42.662,0:00:44.210
cuando las combinamos con CSS.

0:00:44.210,0:00:46.915
No tienen significado semántico para el navegador.

0:00:47.115,0:00:49.616
La primera es la etiqueta "",

0:00:49.616,0:00:53.236
y la usamos para agrupar una selección de texto.

0:00:53.244,0:00:54.193
Digamos que queremos que esta

0:00:54.193,0:00:56.503
palabra "Love" sea roja.

0:00:57.055,0:00:58.692
Y sólo queremos cambiar el color de la palabra,

0:00:58.692,0:00:59.952
no de todo el encabezado.

0:01:00.327,0:01:02.458
Ponemos el cursor al principio de la palabra "Love",

0:01:02.458,0:01:06.138
escribimos la etiqueta "".

0:01:06.499,0:01:10.519
Nos pasamos al final de la palabra, y tecleamos el cierre de la etiqueta, ok.

0:01:10.678,0:01:11.684
Ahora queremos estilizar

0:01:11.684,0:01:13.049
esta selección ("") de caracteres.

0:01:13.049,0:01:15.813
Podemos hacer una regla para colorear todas las selecciones ("s") en la página,

0:01:15.813,0:01:18.558
pero probablemente no queramos que todas las selecciones sean rojas.

0:01:18.558,0:01:24.890
Vamos a definir una clase para este "" digamos "lovey-dovey",

0:01:25.086,0:01:29.053
y vamos a añadir una regla para los elementos que

0:01:29.053,0:01:30.810
tienen la clase "lovey-dovey".

0:01:30.810,0:01:34.325
Así que escribimos ".lovey-dovey", "color: red".

0:01:34.613,0:01:37.623
¡Mira que dulce es el texto ahora!

0:01:37.913,0:01:39.667
Entonces "" sirve para agrupar

0:01:39.667,0:01:41.367
selecciones de texto.

0:01:41.367,0:01:43.507
¿Cómo agrupamos varios elementos?

0:01:43.507,0:01:45.467
Aquí es donde usamos la etiqueta "".

0:01:45.467,0:01:46.747
Digamos que queremos agrupar

0:01:46.747,0:01:48.187
esta sección de abajo.

0:01:48.195,0:01:49.644
El encabezado "Official Info" y

0:01:49.644,0:01:51.684
los párrafos y la fotografía que están debajo.

0:01:51.743,0:01:52.714
Para hacer eso,

0:01:52.714,0:01:57.339
voy a colocar el cursor antes del encabezado "h3"

0:01:57.339,0:01:59.389
y escribo la etiqueta "".

0:01:59.859,0:02:02.259
Y luego me voy al final del último párrafo,

0:02:02.690,0:02:04.620
y escribo la etiqueta de cierre de "".

0:02:05.467,0:02:07.847
Ya tenemos definido "", ahora necesitamos estilizarlo.

0:02:08.290,0:02:09.568
Para estilizar "",

0:02:09.568,0:02:14.116
voy a definir un id: "official info".

0:02:14.457,0:02:17.757
Y luego voy a añadir una regla aquí arriba.

0:02:17.757,0:02:21.885
Entonces escribo: "#official-info", "background",

0:02:21.885,0:02:23.885
y vamos a definir un gris bonito.

0:02:23.885,0:02:26.933
Lo seleccionamos, éste está bien.

0:02:26.933,0:02:28.646
Ahora vemos que "" se volvió un cuadro gris

0:02:28.646,0:02:31.751
que contiene todos los elementos dentro.

0:02:31.772,0:02:34.267
Y es diferente que si hubieramos

0:02:34.267,0:02:35.947
definido un fondo gris para cada elemento.

0:02:35.998,0:02:38.228
Si hubiéramos hecho eso, entre cada elemento

0:02:38.228,0:02:39.538
tendríamos un espacio que no sería gris.

0:02:39.538,0:02:41.120
Tenemos que usar "",

0:02:41.129,0:02:44.139
si queremos un cuadro alrededor de todo lo que seleccionemos.

0:02:44.558,0:02:46.185
Podemos pensar en ""

0:02:46.185,0:02:48.205
para agrupar texto.

0:02:48.303,0:02:50.759
Y pensamos en "",

0:02:50.759,0:02:52.499
para agrupar elementos.

0:02:52.499,0:02:55.228
Pero hay otra manera para distinguirlos.

0:02:55.451,0:02:56.854
Verás, hay dos tipos de

0:02:56.854,0:02:58.104
elementos en el mundo de CSS.

0:02:58.412,0:03:00.232
En línea y en bloque.

0:03:00.499,0:03:03.409
Un elemento en línea no tiene una nueva línea después de él.

0:03:03.570,0:03:06.726
Si hiciéramos muchos de ellos todos estarían en la misma línea.

0:03:06.726,0:03:08.751
Hemos hablado de algunos de ellos,

0:03:08.751,0:03:11.651
como una imagen.

0:03:11.832,0:03:13.432
Y lo puedes ver con esta imagen,

0:03:13.451,0:03:16.431
la forma en que el texto continúa después de ella.

0:03:16.616,0:03:18.326
No hay una línea después de ella.

0:03:18.657,0:03:21.887
Un elemento de bloque, sí tiene una línea después,

0:03:21.912,0:03:24.602
así es como se crean las etiquetas en HTML.

0:03:24.818,0:03:26.978
Mira los ejemplos en esta página.

0:03:27.041,0:03:30.281
Los encabezados, los párrafos, las listas.

0:03:30.639,0:03:33.739
El navegador pone líneas nuevas después de cada uno de ellos,

0:03:33.739,0:03:36.532
sin que tú tengas que escribir una etiqueta "[br]".

0:03:36.767,0:03:39.869
¿Qué tiene que ver eso con "" y con ""?

0:03:39.869,0:03:43.203
Bueno, la etiqueta "" crea elementos en línea,

0:03:43.203,0:03:47.123
y "" crea elementos de bloque.

0:03:47.252,0:03:49.492
Eso significa que si agregas una etiqueta "",

0:03:49.492,0:03:53.982
y no agregas algún otro estilo,

0:03:53.982,0:03:56.700
el navegador va a considerar como un solo bloque

0:03:56.700,0:03:58.145
esa parte de la página.

0:03:58.145,0:04:00.534
Como esta pequeña parte de texto que encerré en una etiqueta "",

0:04:00.534,0:04:03.434
ahora tiene nuevas líneas antes y después.

0:04:03.434,0:04:05.495
Y tal vez eso es lo que quieres,

0:04:05.495,0:04:07.525
así que recuerda estas diferencias.

0:04:07.553,0:04:09.383
Y sigue adelante porque hay mucho más

0:04:09.395,0:04:11.145
que podemos hacer con esas etiquetas.

0:04:11.145,0:04:13.481
Especialmente con esta poderosa etiqueta "".