CURSO de CSS 2021 Rapido y Facil # 7 | 💻 EL CONTENEDOR

Summary

En este curso de CSS, se explora el concepto de contenedores en la estructura de una página web. Se comienza eliminando todo en el index.html excepto el título y se introducen contenedores con h2 y párrafos de texto ficticio. Se enfatiza la importancia de los contenedores, que actúan como recipientes para bloques de contenido. Se trabaja con CSS para aplicar estilos a estos contenedores, como colores de fondo y texto, y se ajusta el tamaño del texto. Además, se explica cómo adaptar el diseño para diferentes dispositivos usando porcentajes y márgenes, asegurando que el contenido se muestre correctamente en cualquier pantalla.

Takeaways

• 🌟 Los contenedores son elementos utilizados para organizar y almacenar diferentes bloques dentro de una página web.
• 📄 Se trabaja con HTML para estructurar y nombrar los contenedores, utilizando etiquetas como `<div>` y atributos de clase.
• 🎨 En CSS, se pueden aplicar estilos a los contenedores para dar formato a los bloques que contienen, como cambiar el color de fondo y el tamaño de la fuente.
• 🔲 Se utiliza la clase `.caja` en CSS para dar estilos específicos a los bloques individuales dentro de un contenedor.
• 🖌️ Se pueden establecer propiedades de fuente, tamaño y color en los elementos de texto para mejorar la visualización y legibilidad.
• 📐 Los contenedores pueden tener un ancho definido en píxeles o porcentajes para adaptarse al diseño deseado.
• 🔄 Es importante que los contenedores se adapten a diferentes tamaños de pantalla, utilizando medidas relativas como porcentajes.
• 💬 Se menciona la importancia de centrar los contenedores en la página y mantener un margen adecuado para una mejor experiencia de usuario.
• 🌎 Se destaca la necesidad de que los diseños web sean responsivos, adaptándose a diferentes dispositivos como tablets y celulares.
• 🔗 Se anticipa que en futuras lecciones se profundizará en temas avanzados de diseño web utilizando contenedores y CSS.

Q & A

¿Qué tema se aborda en el curso de CSS de Alayón?

El tema abordado en el curso es el de los contenedores en CSS.

¿Cuál es la estructura inicial que se muestra en el ejemplo del curso?

La estructura inicial incluye un elemento h1, y luego se eliminan otros elementos, quedando solo con el título.

¿Cómo se nombra el primer bloque que se crea en el ejemplo?

El primer bloque se nombra 'bloque 1' y se le da un título dentro de un elemento h2.

¿Qué elementos se utilizan para introducir texto dentro de los bloques?

Se utilizan etiquetas de párrafo para introducir varios textos falsos dentro de los bloques.

¿Qué se hace con la etiqueta div en el ejemplo del curso?

La etiqueta div se utiliza para agrupar los bloques y se le asigna una clase llamada 'caja'.

¿Qué propiedades CSS se eliminan al principio del ejemplo, y cuál se mantiene?

Se eliminan todas las propiedades CSS excepto la del body, que se mantiene.

¿Cómo se nombra la clase CSS que se le da al primer contenedor en el ejemplo?

El primer contenedor se le da la clase 'caja1'.

¿Qué propiedades se le asignan a la clase 'caja1' en CSS?

A la clase 'caja1' se le asigna un fondo de color turquesa, el texto se pone de color blanco y el tamaño de la fuente a 25 píxeles.

¿Cómo se centra el contenedor en la página web?

Para centrar el contenedor se utiliza el margen automático (margin: auto;) y se le asigna un ancho del 90% para que se adapte a diferentes tamaños de pantalla.

¿Qué se entiende por 'contenedor' en el contexto del curso de CSS?

Un contenedor es un elemento que almacena diferentes bloques o cajas, y se utiliza para organizar y estructurar el contenido de una página web.

¿Cómo se puede evitar que el texto se pierda al cambiar el tamaño de la ventana del navegador?

Se puede evitar que el texto se pierda utilizando porcentajes para el ancho del contenedor y el margen, lo que permite que el diseño se adapte a diferentes tamaños de pantalla.

Outlines

00:00

😀 Introducción a los Contenedores en CSS

El vídeo comienza con una introducción al curso de CSS por Alayón, enfocándose en el tema de los contenedores. Se describe el proceso de dirigirse a la página HTML y la eliminación de elementos innecesarios, dejando solo el título. Se trabaja con contenedores dentro de un 'div', donde se agregan títulos y textos falsos. Se menciona la creación de un 'div' que actúa como un acordeón, mostrando el contenido al interactuar con él. Se da un vistazo a la estructura HTML y se explica cómo se aplican las clases CSS para dar estilo a los elementos, como el color de fondo y el texto.

05:01

🎨 Estilizando Contenedores y Texto

En este segmento, se continúa con el tema de los contenedores, explicando cómo se aplican estilos CSS para mejorar la apariencia visual. Se muestra cómo se trabaja con clases CSS para establecer propiedades como el fondo y el color del texto. Se detalla el proceso de copiar y pegar contenido HTML para crear múltiples bloques y cómo se asignan nombres y clases a estos bloques. Se enfatiza la importancia de actualizar la página para ver los cambios y se ofrece una visión general de cómo se aplican las propiedades CSS para dar estilo a los contenedores.

10:01

🖥️ Diseño de Páginas Web con Contenedores

El vídeo finaliza con una discusión sobre cómo los contenedores pueden modelar la página web según el diseño deseado. Se explora la idea de centrar el contenido y cómo se pueden usar márgenes y anchos en porcentajes para adaptar la página a diferentes tamaños de pantalla. Se menciona la importancia de que la página web se adapte a diferentes dispositivos y se proporciona una explicación sobre cómo se pueden aplicar estilos CSS para lograr esto. Se concluye con una anticipación de lo que se aprenderá en el episodio número 8 del curso de CSS.

Keywords

💡Contenedor

Un 'contenedor' en el contexto del video se refiere a un elemento HTML que sirve para agrupar otros elementos, facilitando así la organización y el diseño de la página web. En el video, el presentador trabaja con contenedores para almacenar bloques, como 'caja 1' y 'caja 2', y les asigna estilos a través de CSS. Esto es crucial para entender cómo se estructuran los componentes de una página web y cómo se les puede aplicar estilos de manera grupal.

💡CSS

CSS (Hojas de Estilo en Cascada) es un lenguaje utilizado para describir la presentación de un documento escrito en HTML. En el video, se utiliza CSS para aplicar estilos a los contenedores y elementos dentro de ellos, como color de fondo, color del texto y tamaño de la fuente. CSS es fundamental para la creación de páginas web atractivas y adaptables.

💡HTML

HTML (Lenguaje de Marcas de Hipertexto) es el estándar básico para la creación de páginas web. En el video, el presentador edita el archivo HTML para agregar y manipular elementos como 'h1', 'h2', 'p' y 'div', que son los bloques de construcción de cualquier página web. HTML define la estructura y el contenido de la página, mientras que CSS se encarga de su presentación.

💡Clases

En HTML y CSS, una 'clase' es una etiqueta que se puede aplicar a elementos para aplicar estilos específicos o para identificarlos de manera única. En el video, el presentador utiliza clases como 'caja 1' y 'caja 2' para aplicar estilos a los contenedores. Esto permite una mayor personalización y control sobre la apariencia y el comportamiento de los elementos en la página web.

💡Estilo visual

El 'estilo visual' se refiere a la apariencia de los elementos en una página web, incluyendo colores, fuentes, márgenes y otros atributos que influyen en la experiencia del usuario. El video muestra cómo el presentador cambia el estilo visual de los contenedores utilizando propiedades CSS como 'background-color', 'color' y 'font-size', lo que mejora la estética y la legibilidad de la página.

💡Ancho

El 'ancho' en el contexto de CSS se refiere a la propiedad que define el tamaño horizontal de un elemento en la página. En el video, el presentador ajusta el ancho del contenedor a 600 píxeles y luego lo modifica a un 90% para que se adapte a diferentes tamaños de pantalla. Esto es importante para garantizar que la página web se vea bien en dispositivos de diferentes tamaños.

💡Margen

El 'margen' en CSS es el espacio que se coloca alrededor de un elemento, fuera de sus bordes. En el video, el presentador utiliza márgenes para espaciar el contenedor de la página, proporcionando así un diseño más agradable y organizado. El uso de márgenes ayuda a evitar que el contenido se sienta abarrotado o difícil de leer.

💡Porcentajes

Los 'porcentajes' en CSS se utilizan para definir tamaños y márgenes en relación al tamaño de su elemento padre. En el video, el presentador establece el ancho del contenedor al 90% para que se adapte dinámicamente al ancho de la ventana del navegador, lo que es esencial para el diseño responsivo y asegura que la página se vea bien en cualquier dispositivo.

💡Diseño responsivo

El 'diseño responsivo' es la capacidad de una página web para adaptarse y mostrarse correctamente en diferentes dispositivos y tamaños de pantalla. El video destaca la importancia de usar porcentajes y márgenes automáticos para crear un diseño responsivo, permitiendo que los contenedores y otros elementos se ajusten según el tamaño de la pantalla del usuario.

💡Propiedades CSS

Las 'propiedades CSS' son los atributos que se utilizan para definir la apariencia de los elementos en una página web. En el video, se mencionan propiedades como 'background-color', 'color', 'font-size' y 'margin' para aplicar estilos a los contenedores y otros elementos. Estas propiedades son fundamentales para el diseño y la personalización de la apariencia de una página web.

Highlights

Inicio del curso de CSS con un enfoque en los contenedores.

Eliminación de la estructura actual en el index HTML, manteniendo solo el título con un h1.

Introducción de contenedores con h2 y títulos específicos como 'bloque 1'.

Inclusión de textos falsos para ilustrar el uso de párrafos dentro de los contenedores.

Explicación de cómo los contenedores actúan como acordeones, mostrando su contenido al interactuar.

Eliminación de propiedades CSS excepto 'body' para mantener la estructura básica.

Copia y pegado de contenido para crear múltiples bloques con la estructura de contenedores.

Asignación de clases a los contenedores para facilitar la manipulación con CSS.

Creación de estilos para la clase 'caja 1' con fondo turquesa y texto blanco.

Ajuste del tamaño del texto a 25 píxeles para mejorar la visualización.

Repetición de estilos para la clase 'caja 2' con fondo marrón y texto blanco.

Importancia de los contenedores para almacenar diferentes bloques y su representación en HTML.

Selección y manipulación del contenido del contenedor con la etiqueta 'div'.

Asignación de una clase al contenedor para aplicar estilos globales.

Estilización del contenedor con ancho, margen y centrado para mejorar la presentación.

Adaptación del diseño para diferentes dispositivos usando porcentajes en lugar de píxeles.

Conclusión del tema de contenedores y su impacto en la estructura de una página web.

Transcripts

[Música]

qué tal amigos estamos de regreso con

nuestro curso de ss soy alayón y hoy

vamos a hablar sobre el contenedor

[Música]

y yo de retorno vamos a complementar la

parte donde nos habíamos quedado hoy con

un tema muy importante que sería el tema

de los contenedores ok bien lo que vamos

a hacer ahora es dirigirnos básicamente

a nuestra página del index html y por el

momento teníamos esta estructura lo cual

para mi ejemplo yo lo voy a borrar

prácticamente todo exceptuando el h1

ok nos vamos a quedar simplemente con el

h1 controles y tú deberías tener

simplemente el título ok de la misma

manera ahora vamos a trabajar con

contenedores dentro de un dip que íbamos

a tener que los padres son h 2 y dentro

de este h 2 vamos a darle un título el

título que yo veo conveniente es bloque

en este caso 16 de esta manera bloqueo 1

bien ahora lo que vamos a hacer es traer

la etiqueta del párrafo y vamos a

introducir varios textos falsos ok vamos

a poner más texto falsos laurent

controles me parece bien un poquito más

rigor en ir solo muy bien controles y me

parece perfecto

ok bien

y básicamente estamos trabajando con

algo que vamos a conocer con el nombre

del bloque y este bloque obviamente

tiene un párrafo ok y todo eso lo

tenemos dentro de dif ok y recuerda que

en este punto yo tengo una especie de

guiño lo cual hace el trabajo como de un

acordeón todo lo que lo contiene dentro

del dip

lo vamos a recoger miren ok ocultándolo

cuando yo quiero saber qué contiene este

tipo entonces me vengo a este punto y

automáticamente me muestra ok y bien

siguiendo esa ideología de la misma

manera ahora acá en css vamos a borrar

todas estas propiedades exceptuando el

body

porque lo vamos a mantener controles y

automáticamente tú deberías tener este

aspecto recuerda controles y actualiza

es la página

ok y bueno ya volviendo a html acá para

hacer este ejemplo yo voy a copiar todo

esto básicamente todo lo que contiene el

libro lo voy a copiar

y lo voy a pegar más abajo y aquí vamos

a pegarlo

perfecto control ese y deberías tener

bloqueo 1 y bloque 2 y ese nombre lo

vamos a cambiar acá por el valor de 2

controles ahí lo tienes perfecto

entonces mira tengo un contenedor de

nombre bloque uno y otro contenedor de

nombre bloque dos bien ahora sí vamos a

hacer algunas propiedades qué te parece

dentro de css

de hecho el título lo vamos a dejar tal

como está no lo vamos a tocar ya que

tiene una clase y de la misma manera

para trabajar con el dif necesito darle

también una clase entonces volvemos a

html ahora lo que yo voy a hacer acá es

darle un atributo precisamente al

contenedor no a laxe 2 ni mucho menos al

párrafo sino directamente al contenedor

que el nombre que yo voy a dar es caja

ok

número 1 de esta manera control s

no pasa nada visualmente y de la misma

manera me voy a venir al otro día al

otro contenedor y voy a poner el

atributo clase en el cual voy a darle el

nombre esta vez de caja 2 muy bien

controles ahora si volvemos

automáticamente a csc y lo primero que

vamos a hacer es trabajar con la caja 1

entonces recuerda que para trabajar con

clases necesito traer el punto y el

nombre del atributo en este caso caja o

no abrimos llaves y en este caso vamos a

hacer algunas propiedades que nos van a

servir bastante qué te parece si

trabajamos primeramente con el fondo

con el background en este caso el

background lo voy a hacer de color

turquesa punto y coma controles y vamos

a traer esto más acá para que lo podamos

ver mejor ok y ahí está ok vamos a

cambiar el color del texto que te pone

sea blanco white o lo mantenemos

vamos a hacer a ver

no lo podemos mantener a ver controles

si me parece muy chillón vamos a dejarlo

simplemente black controles

ok muy bien ahora qué te parece si

trabajamos la parte del tamaño del texto

con un font size y en este caso yo voy a

otorgar el valor de 25 píxeles punto y

coma

controles no olvides actualizar su

contenido y ahí lo tienes ya tengo un

bloque algo más visual y en este caso lo

mismo vamos a trabajar para él la caja 2

key caja en este caso 2

muy bien de la misma manera vamos a

comenzar con el fondo el fondo que estoy

buscando qué te parece que sea brown

okay controles y si quieres ver los

cambios ahí está en este caso creo que

es necesario cambiar el color del texto

por white punto y coma controles y

también vamos a manejar el font sites

para el tamaño de la misma propiedad 25

píxeles control s

ahí está bien no hasta este punto nada

difícil nada complicado o algo nuevo que

hayamos visto que entonces estamos

repasando a todo lo que acabamos de dar

de echo miren si yo lo pongo mi página

web a un tamaño considerable se mantiene

algunas propiedades bien hoy el tema de

hoy recuerda que es el contenedor y

básicamente al usar las herramientas

como bus trouble fundation que son

herramientas que nos sirven bastante

para construir una página web mediante

css se puede aplicar este tipo de modelo

que vale la pena recalcar que esto

necesita reglas pero por el momento es

bueno conocer cómo trabaja esto del

contenedor

bien como su mismo nombre indica el

contenedor es un contenedor donde vamos

a almacenar diferentes bloques en este

caso diferentes cajas bien para que

entiendas mejor este punto me voy a

volver a html

y dentro de html en este caso lo que yo

voy a hacer es recoger todo lo que

contiene la caja 1 y también la caja 2

ok ahora el contenedor es un elemento

donde voy a almacenar tanto caja 1 y

caja 2 por tanto yo lo voy a hacer en

ese lugar también lo voy a seleccionar

esto de esta manera

y para que no te es la diferencia no es

necesario que te lo hagas simplemente yo

lo estoy haciendo de esta manera para

que puedas verlo mejor el h1 lo vamos a

aislar ok para que veas que simplemente

todo lo que contiene el contenedor va a

poder usarse con ese nombre y el

contenedor también tiene que tener la

propiedad del dip esta etiqueta de hecho

lo vamos a escribir la dip y acá vamos a

darle de nombre ok pero no lo puedo

hacer en esta parte si no es lo que yo

necesito es trabajarlo con la propiedad

de una clase precisamente en este punto

vamos a darle el nombre del contenedor

ok

esta parte lo vamos a cortar la parte

donde se cierra la etiqueta y yo lo voy

a depositar en este punto acá

ok control s no vamos a sufrir un cambio

visual pero en la parte de html mira si

yo recojo este punto automáticamente el

dif clase contenedor ya ha recogido todo

lo que se almacena que se almacena

primeramente caja 1 y caja 2 y dentro de

caja 1 precisamente acá yo tengo todo

esto y encajados también tengo todo esto

muy importante ese punto entonces todo

lo que contiene el contenedor es

básicamente lo que va a afectar

ok bien ya explicando este punto vamos a

guardar los cambios vamos a volver acá

precisamente a nuestros estilos css para

añadirlo yo lo voy a hacer en este punto

acá

nuevamente llamamos esta vez al

contenedor

[Música]

muy bien que vamos a depositar dentro

del contenedor lo primero que podemos

hacer es darle un mejor estilo o mejor

aspecto a nuestro modo de diseño miren

en este instante yo lo tengo de esta

manera y por defecto siempre está pegado

a la parte izquierda aunque si no lo

entiendes mira acá vamos a depositar

algo que se conoce con el ancho que

sería la palabra wheat ok acá vamos a

usar diferentes porcentajes como este

primer ejemplo voy a usarlo simplemente

como píxeles ok para que note es la

diferencia yo voy a poner un valor alto

600 píxeles punto y coma control ese y

automáticamente el ancho de mi

contenedor donde yo tengo caja 1 y caja

2 sufre ese cambio

ok miren tiene un ancho de 600 píxeles

si yo lo depósito como una página en

todo su tamaño por defecto siempre va a

estar pegado a la izquierda

ese es un detalle que vamos a modificar

dicho acá yo puedo trabajar con algo que

se llama margen

margin que a este margen llegue a

depositar el valor de 100 píxeles punto

y coma controles y ahí está miren hay un

margen de 100 píxeles y miren yo voy a

tratar de recoger la página y se

mantiene esos 100 píxeles

ok muy importante ese punto pero

actualmente recuerda que una página web

tiene que adaptarse al tamaño de

cualquier monitor de cualquier tablet de

cualquier celular por tanto miren si

tengo un tamaño considerable se va

perdiendo el texto este lado al lado

derecho aquí entonces y eso es lo que

tenemos que evitar como lo podemos hacer

prácticamente con algunas condiciones en

primer lugar qué te parece si

modificamos la parte del web

generalmente una página web debería

tener un ancho de 1000 píxeles como por

ejemplo controlar y automáticamente

miren mi página ya tiene ese ancho de

1000 píxeles ok pero aún así no los

tengo centrado y acá se puede usar

algunas propiedades miren para este caso

acá al lado del margen

yo podría cambiarlo por algo que se

conoce out o sea que el margen se adapte

control s

y automáticamente si yo lo desplazó ya

lo tengo centrado pero a la vez si trato

de trabajar desde este modo

vemos que se va acoplando a diferentes

tipos de monitor pero aún hay un detalle

muy importante que sería miren el borde

en esta parte tiene ese ancho y

posteriormente se va achicando y se

mantiene en un determinado punto pero al

lado derecho se pierda totalmente

entonces para corregir este tipo de

error

básicamente acá no podemos trabajar si

no es con pixeles si no es básicamente

yo lo podría cambiar por porcentaje para

que me entiendas mejor digamos que todo

este diseño para una página normal tiene

un valor del 100% y yo quiero que todo

mi texto ocupe el 90%

dividiendo entonces la página en 90% 55

por ciento el total de 100 por ciento y

miren cómo lo voy a implementar acá

simplemente en el with yo voy a poner el

valor del 90 por ciento

ok simplemente así de esta manera

controle se actualizó el contenido si tú

quieres y miren voy a agrandarlo

y automáticamente mira está ocupando el

90% 5 y 5% de una página web lo tengo

libre ok

como margen y esto funciona bastante

automáticamente se respeta el diámetro

porque estamos trabajando en porcentajes

si mi pantalla es de este tamaño

entonces se respetan 90 55 al 100%

si fuese como de un celular posiblemente

podemos decir que sea de este bloque

entonces miren el 90% de la página web

está ocupado por texto y el sobrante 5%

están básicamente para los márgenes ok

entonces el contenedor básicamente va a

poder moldear nuestra página web al

estilo que vamos a implementar

básicamente se maneja siempre web y

margin en este caso hemos debido ver que

el margen yo lo tengo en automático y

además el wiki yo tengo el 90 por ciento

para que se acople a cualquier tipo de

monitor o pantalla que estemos

disponible es abrir esta página web

ok bien vamos a dejarlo hasta este punto

era una parte introductoria del tema que

se va a venir en el episodio número 8

como antecedente o previa a lo que vamos

a aprender acá en tu curso de css