Hasta ahora hemos visto cómo
podemos usar CSS para estilizar un texto,
pero también podemos usar CSS para cambiar
completamente el diseño de nuestra página.
Esto significa que podemos mover las cosas,
cambiar el tamaño,
e incluso poner unas cosas arriba de otras.
Pero ¿cuáles son las cosas
que queremos mover?
Algunas veces son elementos
que hemos hecho con anterioridad,
como un cierto párrafo,
o un encabezado.
Pero muchas veces,
estas cosas son un grupo de elementos que hemos hecho,
como una selección de texto,
o un encabezado con algunos párrafos.
Para moverlos todos juntos como una unidad,
necesitamos introducir dos nuevas etiquetas HTML
a las que llamamos elementos de agrupación.
No hablamos de ellas antes de CSS,
porque sólo se pueden usar
cuando las combinamos con CSS.
No tienen significado semántico para el navegador.
La primera es la etiqueta "",
y la usamos para agrupar una selección de texto.
Digamos que queremos que esta
palabra "Love" sea roja.
Y sólo queremos cambiar el color de la palabra,
no de todo el encabezado.
Ponemos el cursor al principio de la palabra "Love",
escribimos la etiqueta "".
Nos pasamos al final de la palabra, y tecleamos el cierre de la etiqueta, ok.
Ahora queremos estilizar
esta selección ("") de caracteres.
Podemos hacer una regla para colorear todas las selecciones ("s") en la página,
pero probablemente no queramos que todas las selecciones sean rojas.
Vamos a definir una clase para este "" digamos "lovey-dovey",
y vamos a añadir una regla para los elementos que
tienen la clase "lovey-dovey".
Así que escribimos ".lovey-dovey", "color: red".
¡Mira que dulce es el texto ahora!
Entonces "" sirve para agrupar
selecciones de texto.
¿Cómo agrupamos varios elementos?
Aquí es donde usamos la etiqueta "".
Digamos que queremos agrupar
esta sección de abajo.
El encabezado "Official Info" y
los párrafos y la fotografía que están debajo.
Para hacer eso,
voy a colocar el cursor antes del encabezado "h3"
y escribo la etiqueta "".
Y luego me voy al final del último párrafo,
y escribo la etiqueta de cierre de "".
Ya tenemos definido "", ahora necesitamos estilizarlo.
Para estilizar "",
voy a definir un id: "official info".
Y luego voy a añadir una regla aquí arriba.
Entonces escribo: "#official-info", "background",
y vamos a definir un gris bonito.
Lo seleccionamos, éste está bien.
Ahora vemos que "" se volvió un cuadro gris
que contiene todos los elementos dentro.
Y es diferente que si hubieramos
definido un fondo gris para cada elemento.
Si hubiéramos hecho eso, entre cada elemento
tendríamos un espacio que no sería gris.
Tenemos que usar "",
si queremos un cuadro alrededor de todo lo que seleccionemos.
Podemos pensar en ""
para agrupar texto.
Y pensamos en "",
para agrupar elementos.
Pero hay otra manera para distinguirlos.
Verás, hay dos tipos de
elementos en el mundo de CSS.
En línea y en bloque.
Un elemento en línea no tiene una nueva línea después de él.
Si hiciéramos muchos de ellos todos estarían en la misma línea.
Hemos hablado de algunos de ellos,
como una imagen.
Y lo puedes ver con esta imagen,
la forma en que el texto continúa después de ella.
No hay una línea después de ella.
Un elemento de bloque, sí tiene una línea después,
así es como se crean las etiquetas en HTML.
Mira los ejemplos en esta página.
Los encabezados, los párrafos, las listas.
El navegador pone líneas nuevas después de cada uno de ellos,
sin que tú tengas que escribir una etiqueta " ".
¿Qué tiene que ver eso con "" y con ""?
Bueno, la etiqueta "" crea elementos en línea,
y "" crea elementos de bloque.
Eso significa que si agregas una etiqueta "",
y no agregas algún otro estilo,
el navegador va a considerar como un solo bloque
esa parte de la página.
Como esta pequeña parte de texto que encerré en una etiqueta "",
ahora tiene nuevas líneas antes y después.
Y tal vez eso es lo que quieres,
así que recuerda estas diferencias.
Y sigue adelante porque hay mucho más
que podemos hacer con esas etiquetas.
Especialmente con esta poderosa etiqueta "".