CURSO de CSS 2021 Rapido y Facil # 6 | 💻 ID & CLASES
Summary
TLDREste episodio del curso de CSS se enfoca en el uso de selectores de clase y ID para personalizar elementos en una página web. Se explica cómo utilizar selectores de clase para aplicar estilos a múltiples elementos y cómo los selectores de ID son ideales para elementos únicos. El instructor Jack Layton guía a los estudiantes a través de ejemplos prácticos, mostrando cómo se pueden usar estos selectores para crear un diseño coherente y organizar el código de manera eficiente. Además, se destaca la importancia de la estrategia al aplicar estilos y cómo los selectores pueden simplificar el proceso de desarrollo web.
Takeaways
- 😀 El video es una lección sobre CSS, específicamente sobre selectores de clase y ID.
- 🎨 Se explica cómo utilizar selectores de clase para aplicar estilos en bloques específicos de código HTML.
- 🔍 Se resalta la importancia de los selectores de clase para la organización y la modularización del código CSS.
- 📝 Se menciona que los selectores de ID (#) se utilizan para identificar de manera única un bloque en la página web, mientras que los selectores de clase (.) se pueden aplicar a múltiples elementos.
- 🛠 Se da un ejemplo práctico de cómo aplicar estilos a un subtítulo y párrafo utilizando selectores de clase y ID.
- 🌟 Se destaca la ventaja de los selectores de clase para aplicar estilos a varios elementos sin tener que repetir código CSS.
- 💡 Se sugiere la estrategia de usar nombres de clase descriptivos para facilitar la identificación y manejo de los elementos en el código HTML.
- 🔧 Se explora la idea de agrupar selectores de clase para aplicar estilos a varios elementos de manera eficiente.
- 📖 Se enfatiza la necesidad de comprender cómo funciona el selector universal y cómo interactúa con los selectores de clase y ID.
- ✅ Se recomienda guardar los cambios frecuentemente mientras se trabaja en el código para visualizar los efectos de los cambios de estilo inmediatamente.
Q & A
¿Qué tema se aborda en el episodio 6 del curso de CSS presentado por Jack Layton?
-En el episodio 6, se habla sobre los selectores CSS, con un enfoque en profundidad en los selectores de clase y cómo se utilizan en el desarrollo de páginas web.
¿Cuál es la diferencia entre un selector de clase y un selector de identificador (id) en CSS según el video?
-El selector de clase se utiliza para aplicar estilos a varios elementos en la página, mientras que el selector de identificador (id) se utiliza para identificar de manera única un bloque específico en la página web.
¿Qué se debe tener en cuenta al nombrar una clase en CSS según el video?
-Al nombrar una clase en CSS, se debe elegir un nombre que permita identificar fácilmente el bloque de código al que se aplica, y es recomendable evitar el uso de guiones al inicio del nombre de la clase.
¿Cómo se aplica un estilo a un elemento específico usando un selector de clase en CSS?
-Para aplicar un estilo a un elemento específico usando un selector de clase, se escribe un punto (.) seguido del nombre de la clase y luego se definen las propiedades CSS entre llaves.
¿Qué ventaja tiene el uso de selectores de clase sobre los selectores de tipo (por ejemplo, h2) en la organización de código CSS?
-Los selectores de clase permiten una mayor flexibilidad y reutilización de estilos, facilitando la organización y mantenimiento del código CSS en proyectos grandes.
¿Cómo se puede agrupar selectores de clase en CSS para aplicarles el mismo conjunto de propiedades?
-Para agrupar selectores de clase y aplicarles el mismo conjunto de propiedades, se listan los selectores separados por comas y luego se definen las propiedades comunes entre llaves.
¿Qué es un selector universal en CSS y cómo se utiliza en el contexto del video?
-Un selector universal en CSS se representa con un asterisco (*) y selecciona todos los elementos de la página. En el video, se mantiene un fondo con el selector universal para que se vea en todos los elementos a menos que se sobreescriba con otro selector más específico.
¿Qué herramienta se recomienda usar en el video para ver los cambios en tiempo real en el código CSS?
-Se recomienda usar la opción 'control s' para guardar los cambios y ver los resultados en tiempo real en el navegador.
¿Cuál es la importancia de la etiqueta 'body' en la organización del código HTML según el video?
-La etiqueta 'body' es fundamental ya que contiene todos los elementos de la página web y actúa como un contenedor principal para el contenido y el diseño.
¿Cómo se puede aplicar un estilo a un elemento específico dentro de un contenedor usando un selector de clase en CSS?
-Para aplicar un estilo a un elemento específico dentro de un contenedor, se puede utilizar un selector de clase en combinación con el selector del contenedor, agrupándolos y definiendo las propiedades dentro de llaves.
Outlines
🌐 Introducción a los selectores CSS
Este primer párrafo del video tutorial se enfoca en introducir los conceptos básicos de los selectores CSS. Se menciona que el episodio 6 continuará con la explicación de clases y IDs, con un enfoque especial en el selector de clase, que es el más utilizado. Se sugiere que los selectores de clase son fundamentales para trabajar con múltiples bloques de código. Se explica que comenzarán por eliminar todo lo anterior hasta la etiqueta h1 y se harán algunas modificaciones para mejorar la visualización. Se menciona la importancia de usar atributos de clase para identificar elementos en la página web y se da un ejemplo práctico de cómo aplicar estilos a un h2 y a un párrafo utilizando selectores de clase y IDs.
🎨 Trabajando con selectores de clase y IDs
En el segundo párrafo, el instructor profundiza en el uso de selectores de clase y IDs para personalizar elementos específicos de una página web. Se destaca cómo los selectores de clase permiten aplicar estilos a diferentes elementos de manera eficiente, y se proporciona un ejemplo comparativo entre usar selectores de clase y selectores normales. Se muestra cómo duplicar bloques de código y aplicar estilos a múltiples elementos de manera consistente, resaltando la ventaja de usar selectores de clase para mantener un código limpio y organizado.
🔧 Aplicación práctica de selectores de clase
El tercer párrafo se centra en la aplicación práctica de selectores de clase. El instructor muestra cómo copiar y aplicar estilos a diferentes bloques de contenido, y cómo modificar la apariencia de elementos específicos sin afectar a otros. Se aborda la idea de clasificar y aplicar estilos a elementos de manera selectiva, y se ejemplifica cómo cambiar la propiedad de una clase para que afecte a todos los elementos que la comparten, así como cómo personalizar estilos para elementos únicos.
🔄 Agregando y agrupando selectores de clase
En el cuarto y último párrafo del script, el enfoque se pone en cómo agregar y agrupar selectores de clase para aplicar estilos de manera más eficiente. Se explica la técnica de aplicar la misma propiedad a múltiples elementos utilizando selectores de clase, y se muestra cómo esto puede simplificar el proceso de desarrollo web. Se da un ejemplo de cómo se pueden aplicar estilos a un título y a un párrafo dentro del mismo contenedor, y se menciona la importancia de entender cómo funciona la herencia y la cascada en CSS. El tutorial concluye con una perspectiva de cómo estos conceptos se pueden aplicar en la creación de páginas web más avanzadas.
Mindmap
Keywords
💡CSS
💡Selectores
💡Clases
💡Identificadores
💡Atributos
💡Propiedades CSS
💡Etiquetas HTML
💡Centrado de texto
💡Fondos y colores
💡Diseño de páginas web
Highlights
Bienvenidos a un nuevo episodio del curso de CSS.
Continuaremos con el episodio número 6, enfocado en clases y selectores CSS.
Exploraremos selectores en profundidad, comenzando con el selector de clase, el más utilizado.
Se mostrará cómo borrar código hasta la etiqueta h1 y realizar modificaciones para mejorar la presentación.
Se explica cómo utilizar el atributo 'class' en la etiqueta h2 para mejorar la identificación y manipulación de elementos.
Se da un consejo sobre la elección de nombres de clases para facilitar la identificación de elementos en la página web.
Se muestra cómo aplicar estilos CSS utilizando selectores de ID y clase para elementos específicos como subtítulos y párrafos.
Se detalla cómo centrar texto y aplicar fondos utilizando propiedades CSS como 'text-align' y 'background'.
Se menciona la importancia de la actualización y visualización de cambios en tiempo real con 'control + s'.
Se explica la diferencia entre utilizar selectores de clase y selectores normales para elementos HTML.
Se discute la ventaja de usar selectores de clase para clasificar y aplicar estilos a gran escala en elementos similares.
Se proporciona un ejemplo práctico de cómo aplicar estilos a múltiples elementos utilizando una clase única.
Se muestra cómo cambiar dinámicamente la clase de un elemento y ver los cambios reflejados en la página web.
Se aborda la idea de agrupar selectores de clase para aplicar estilos a múltiples elementos de manera eficiente.
Se explica cómo el selector universal puede afectar a todos los elementos dentro de un contenedor HTML.
Se concluye el tutorial con una revisión de cómo los selectores de clase pueden ser utilizados de manera universal para aplicar estilos a la página web.
Transcripts
[Música]
hola que tal soy jack layton y
bienvenidos a un nuevo episodio dentro
de tu curso de css vamos a continuar con
el episodio número 6 donde vamos a
hablar de clases y training
bien vamos a continuar donde nos
habíamos quedado hoy vamos a ver el tema
de los electores a profundidad que sería
el tema de el selector haití y también
el de clase ok en el anterior episodio
donde vimos el tema de los selectores lo
hemos visto de una manera muy
superficial en este episodio vamos a
dedicarle un tiempo más que todo al
selector clase que es el más usado cómo
podemos implementar cuando tenemos un
trabajo con bastantes bloques de código
y no nos adelantaremos a lo que vamos a
hacer primeramente vamos a comenzar con
algo muy sencillo que sería el selector
allí lo primero que vamos a hacer es
borrar todo lo que habíamos hecho
principalmente hasta la etiqueta h1 ok y
de la misma manera acá vamos a hacer
algunas modificaciones para que se vea
mejor vamos a mostrar el atributo clase
de la etiqueta h 2 key controles ya y
acá vamos a guardar está con los cambios
bien entonces tú debes tener este
aspecto
ojo no hemos borrado el fondo con este
selector universal lo vamos a mantener
más que todo para que se ve
y bien como ya se mencionó hoy vamos a
ver primeramente el selector aire como
su nombre indica vamos a identificar de
manera personalizada cualquier parte de
mi código dentro de mi página web en
este caso yo voy a trabajar con h 2 para
que funcione el selector ahí recuerda
que en h2 necesito depositar un atributo
que debe ser raid y ok a state y
necesito darle un nombre
[Música]
que por consejo siempre tiene que ser un
nombre en el cual puedas identificarlo
miren en mi página web tengo un título
un subtítulo y un párrafo entonces el
h2o refleja el curso dejaba un subtítulo
entonces es el nombre puedo manejarlo
para identificar lo que hay entonces voy
a poner subtítulos
de la misma manera me vengo acá a la
etiqueta del párrafo haití y vamos a
poner de la misma manera un nombre de
referencia
ok para no confundir las controles no
vamos a sufrir ningún cambio acá
recuerda que cuando yo presiono
controles
si no tienes light load yo te recomiendo
siempre darle en esta opción ok
siempre en este caso para mí no es
necesario pero recuerda controle si
actualizas el contenido en este punto
bien hecho esa ilusión entonces vamos a
volver a nuestros estilos css vamos a
llamar precisamente a laxe 2 y al
párrafo pero lo vamos a hacer como
selector ied y eso quiere decir que
vamos a llamarlo curso
haydee y para hacerlo yo necesito
depositar un hash un gato o lo que yo
conozco en el nombre de enumerar ok
entonces seguidamente el nombre de la
idea que en este caso es subtítulo que
abrimos llaves y al mismo tiempo porque
no trabajamos también con el paso
bien nada desconocido hasta este punto
vamos a recordar algunas propiedades
para aplicarlo precisamente a este
bloque de nuestra página web
entonces nos venimos al subtítulo vamos
a centrarlo con el text align centra muy
bien punto y coma
vamos a darle un fondo con un background
vamos a ponerle algo fuerte con rata
punto y coma y también qué te parece si
trabajamos un poco el color este me
parece bien control s ahora sí y
automáticamente ya vemos los cambios
recuerda esta opción si no puedes ver
los cambios muy bien vamos a irnos a la
parte del párrafo vamos a aumentar un
poco el texto con un fondo sites qué te
parece de 22 píxeles
no te olvides nunca en el punto y coma
control s se ve mejor y vamos a darle un
fondo
background un color que sea claro por si
me dices me parece muy bien punto y coma
controles cual no se nota vamos a
cambiarlo
qué te parece si trabajamos con view
violento
vamos a actualizar el contenido ahí está
me parece muy chillón que vamos a
cambiar el color del texto entonces a
white
perfecto punto y coma controles ahora si
se puede ver los cambios bien entonces
básicamente este es lo que vamos a usar
un aid y vamos a determinar un
determinado punto de nuestro código de
nuestra página web en html y vamos a
aplicarle precisamente las propiedades
css vale la pena la aclaración que
generalmente conoce un selector y
generalmente es para darle una acción un
movimiento pero para eso necesitamos
saber javascript que no nos
adelantaremos mucho en el tiempo pero
por el momento es bueno saber que el
selector haití va a identificar de
manera personal o única un determinado
bloque de nuestra página web bien vamos
a borrar todo esto con un control s
vamos a guardar los cambios y
precisamente ahora vamos a trabajar con
el selector clase ok vamos a traer un
poquito más acá el html porque
precisamente en este bloque es donde yo
quiero trabajar
bien qué vamos a hacer primeramente
vamos a gozar los atributos haydee
y vamos a dejar tal como estaba de hecho
vamos a cambiar el nombre por curso de
css básico
qué controles se debe notar los cambios
y lo que voy a hacer es copiar todo esto
y voy a duplicarlo tres veces uno dos
tres
controles y ahí tienes los cuatro
bloques en este caso voy a cambiar el
h2o en los subtítulos por no ser un html
podría ser
básico controles acabamos de cambiarlo
por el curso de java controles e iu 1
que estoy elaborando en este momento que
es el de clay que se puede controles
[Música]
para este pequeño ejemplo
vamos a ver la diferencia entre usar un
selector normal y un selector clase cuál
es la ventaja de usar este tipo de
selector porque al final parece lo mismo
simplemente llamamos a la etiqueta y ya
está pero el selector clase es el más
usado porque puede clasificar puedes
identificar qué elementos poner cierta
propiedad y cuáles no y eso lo puedes
hacer en grandes bloques
un ejemplo si revisamos el tipo de de
método que estamos haciendo para crear
una página web tengo un título un
subtítulo subtítulo 2 un subtítulo 3
párrafo 1 para fuegos párrafo 3 y así
sucesivamente entonces qué haría de una
manera normal yo vendría h2 para traer
la propiedad del selector clase yo
escribo class y le doy un nombre en este
caso subtítulo 1 ok no es necesario el
guión pero en mi gusto particular luego
de esta manera key subtítulo 1 haciendo
alusión a este bloque de la misma manera
me pongo en la etiqueta de párrafo
escribo class y voy a ponerle párrafo 1
y controles y así sucesivamente tendría
que hacer una por una de hecho vamos a
hacer alguna prueba
vamos a llamar precisamente el selector
clase con un punto y seguidamente el
nombre de la clase que en este caso es
subtítulo uno lo abrimos llaves nos
salimos y al mismo tiempo vamos a
trabajar qué te parece con el párrafo
párrafo 1
abrimos llaves y vamos a hacer algunos
cambios vamos a trabajar con el fondo
background que sea de color naranja
orange puntocom a controles y si quieres
ver los cambios
ok y vamos a centrarlo
con tecsa line central punto y coma y
también vamos a cambiar el color de
texto con un color y vamos a darle un
color vischi ok para hacer la prueba
controlarse
ahí está ok se puede notar el cambio me
vengo al párrafo vamos a hacerlo un
poquito más grande con un fondo sites de
qué te parece 18 píxeles punto y coma
controles ya vamos a aumentar un poquito
a
23 controles en si esto si se puede ver
y también vamos a darle un color de
fondo con un background
en este caso un color que sea diferente
me parece bien en este punto y coma
controles que podemos cambiar el color
de texto
para que se noten
ahí está el detallista es que si yo
quisiera hacer cambios en el subtítulo 2
y en el párrafo 2 en el subtítulo 3 y en
el párrafo 3 tendría que volver a hacer
esto una dos tres veces y tenía me
dirías no habría ningún problema
simplemente lo copio y le pegó las
cantidades de veces que sería necesario
pero no sería un trabajo óptimo lo
recomendable es llamar a la clase y como
su mismo nombre indica vamos a
clasificar cómo lo vamos a hacer de esta
manera vamos a volver acá a html y lo
que yo voy a hacer es otorgar en este
caso voy a cambiar el nombre de la clase
por el de subtítulo y el de paso fue por
párrafo ok control s
y automáticamente ese borde las
propiedades porque no existe ya el punto
41 y mucho menos el subtítulo más a uno
entonces lo que yo voy a hacer es
identificar a qué elementos quiero dar
estas propiedades aquí en mi caso yo voy
a copiar todo esto para ganar tiempo
control ce y yo voy a aplicarlo en este
paso font bueno este subtítulo perdón en
el 2 el 3 no lo voy a hacer en el 4 sin
control de control ese y de la misma
manera voy a copiar a la clase párrafo
y vamos a aplicarlo en el paso dos
controles e en el paso fort 3 no porque
no quiero y me voy a ir al último paso
control b y control s para guardar esos
cambios
muy bien recuerda en el párrafo no tengo
los cambios en el párrafo 2 en el 3 no
pasa nada y en el párrafo 4 ya tengo ese
cambio
[Música]
ok entonces ahora vuelvo a css y voy a
cambiar también la propiedad en vez de
vender los subtítulos simplemente está
como subtítulo y el párrafo 1
simplemente como patrón presiona
controles
y ahí lo tienes hemos aplicado la misma
configuración el mismo diseño a los
elementos que ya tienen la clase que
miren en el paso 1 en el bloque a 1
tenemos la misma el mismo cambio de la
propiedad en el bloque 2 en el bloque 3
no tengo ningún cambio por eso no pasa
nada y en el bloque 4 de la misma manera
tengo los atributos de clase y entonces
esto es muy muy fácil de aplicarlo
cuando ya tienes una línea de estilo
definido eso lo vamos a ver más adelante
qué quiere decir con niña de estilo pero
por el momento te saldrá no cuenta que
al trabajar con una clase vamos a
clasificar los elementos que yo quiero
aplicar e incluso miren si me vengo a la
h1 y llamó a la clase precisamente de
subtítulo
presión o controles y has debido anotar
que automáticamente el título ya tiene
aplicado es la propiedad que está dentro
de la clase de subte atrás y entonces
esto es muy muy útil bien entonces qué
te parece si acá vamos a ser uno
específicamente para el título
y el auto corrector me puso subtítulos
pero no hay problema
abrimos llaves ahora vamos a darle que
sea un text align center punto y coma
cristiada de color blanco white punto y
coma y que sea con un fondo de color
rojo
le pondré coma y también voy a aumentar
el tamaño del texto con un phone 6 un
número grande que sea 32 pixels punto y
coma controles y no pasa nada porque
obviamente este tipo de clase no lo he
aplicado en ninguna parte de mi código
html como habla del título lo lógico es
que lo aplique acá pero también lo puedo
aplicar en el
en este caso acá y se va a aplicar
precisamente esta propiedad mira en un
ejemplo me vengo a laxe 2 y voy a llamar
a clase precisamente título
y acá también h1 voy a cambiar ese
subtítulo básicamente por título
controle ese ahí está
kate se aplica a los elementos que tú
quieres decir simplemente llamas la
clase que ya tiene una propiedad y se va
a ir a aplicar y básicamente este es el
uso que vamos a darle todos los días al
selector de clase bien ya sabiendo que
para qué nos sirve el selector clase
también puedo hacer lo siguiente vamos a
borrar todo esto y también vamos a
eliminar prácticamente todo lo que tengo
al fascinado dentro del body
vamos a dejarlo así vacío
bien nos vamos a ir al body vamos a
traer un nuevo h1 vamos a poner curso de
css básico ok y qué te parece para
hacerlo un poquito más complicado vamos
a trabajar con un contenedor deep donde
voy a tener un parto y dentro de este
párrafo texto falso una vez más a nixon
una vez más control ese me parece
perfecto y volvemos a css para trabajar
precisamente con los selectores de clase
pero esta vez agrupando los como lo
podemos agrupar desde este punto de
vista te va a parece algo muy
interesante de aplicar qué te parece si
me vengo h2 vamos a darle una clase
vamos a llamarle simplemente el título
en este caso yo pondría la propiedad o
el atributo de clase en el párrafo pero
al ser un contenedor quiere decir que
estoy depositando dentro de depp
un párrafo entonces da igual si yo vengo
acá y yo escribo class y pongo
precisamente una clase
para no confundir los párrafos
obviamente esto nos funciona porque
solamente en este contenedor dips tengo
una etiqueta para si hubiese otro
párrafo no habría ningún problema el
problema estaría en que si no se hubiese
aquí un h 2
ok otra etiqueta que no se aparta ahí
tendría que clasificar esta sentencia
pero en este caso simplemente tengo
párrafos por tanto da igual si lo pongo
acá waka pero lo recomendable es hacerlo
siempre dentro del dif ya que es un
contenedor que simplemente tiene una
sola etiqueta ok entonces has debido
anotar a que yo quiero aplicar una sola
propiedad tanto a título
tanto párrafo
ya para terminar en este punto lo que
voy a hacer es llamar tanto a título
tanto párrafo al mismo tiempo lo vamos a
hacer de la siguiente manera título no
te olvides del punto coma y seguidamente
el siguiente sería punto pas
te abrimos llaves y dentro de esta
propiedad lo que yo voy a hacer es
primeramente cambiar el color de la
letra color en este caso algo que sea
diferente
punto y coma control s y automáticamente
tanto as debido a notar que mi título y
mi párrafo se puso de ese color si aún
no lo puedes ver vamos a ponerle un
fondo de color naranja orange
con tu como controles en y
automáticamente simplemente se aplicaba
en el título porque no se ha aplicado en
azul porque básicamente estamos
trabajando con un selector universal y
si revisamos mi código en html
todo esto lo contiene el body mira acá y
un pequeño botón si yo le doy un clic
automáticamente guarda todo lo que está
depositado dentro del body si yo lo
despliego ahí está todo lo que lo
contiene básicamente mi página web
entonces qué te parece si en este punto
en vez de poner este elemento yo lo voy
a cambiar por bone
si guardamos cambios tanto aquí y acá
pero oferta entonces recuerda el body
tiene un papel fundamental sobre este
tema bien y hasta este punto vamos a
dejar este tutorial en el cual hemos
aprendido a manejar selectores haití de
clase también como podemos llamar
diferentes tipos de clase de una manera
universal para aplicar simplemente la
misma propiedad y no volverlo a dividir
por partes que eso ha sido todo por hoy
espero que esta parte ha sido
básicamente muy interesante para que
posteriormente tu lógica sin necesidad
de ver muchos vídeos puedes aplicarlo de
una manera coherente al momento de hacer
una página web no ha sido todo por hoy
nos vemos en el siguiente episodio
dentro de nuestro curso de css
Ver Más Videos Relacionados
5.0 / 5 (0 votes)