CURSO de CSS 2021 Rapido y Facil # 5 | 💻 TEXTO I
Summary
TLDREn este episodio del curso de CSS, se explora la configuración y modificación de texto en CSS. Se explica cómo cambiar la tipografía con 'font-family', ajustar el tamaño de la fuente en píxeles con 'font-size' y el color de la fuente con la propiedad 'color'. Además, se abordan técnicas de alineación del texto como 'text-align', permitiendo centrar, justificar o alinear el texto a la derecha. El vídeo sirve como una guía práctica para mejorar la presentación de texto en páginas web.
Takeaways
- 😀 Se inicia el episodio con una introducción al curso de CSS y se menciona que se abordará el tema del texto en el episodio número 5.
- 🔧 Se sugiere eliminar los párrafos previos y trabajar con un párrafo de texto más extenso para ejemplificar mejor las propiedades de CSS.
- 🎨 Se utiliza la etiqueta párrafo `<p>` y se le aplica un color de fondo 'gold' para diferenciarlo visualmente.
- 📝 Se explica la propiedad `font-family` y cómo se puede utilizar para cambiar la tipografía del texto, demostrando con la selección de 'monospace'.
- 🔢 Se discute sobre la propiedad `font-size` y se muestra cómo se puede medir en píxeles, cambiando el tamaño del texto para mejorar la legibilidad.
- 🖌️ Se menciona la propiedad `color` para cambiar el color de la fuente y se ejemplifica con el uso de colores específicos como 'brown' y 'beige'.
- 📏 Se introduce la propiedad `text-align` y se exploran las opciones de alineación como 'center', 'left' y 'justify', con explicaciones sobre su uso y efectos.
- 📖 Se enfatiza que el alineamiento 'justify' no es recomendado para párrafos largos, pero se puede utilizar en algunos casos específicos.
- 🔄 Se menciona que se abordarán más características de tipografía y texto en futuras lecciones del curso de CSS.
Q & A
¿Qué tema se aborda en el episodio número 5 del curso de CSS?
-En el episodio número 5, se aborda el tema del texto, incluyendo cómo traer texto, configurarlo y modificarlo a nuestro gusto.
¿Cuál es la primera acción que se realiza en el archivo index para este tutorial?
-La primera acción es eliminar prácticamente dos párrafos y quedarse con uno solo, con el fin de simplificar el contenido y centrarse en la modificación del texto.
¿Qué propiedad CSS se utiliza para cambiar la tipografía del texto?
-Se utiliza la propiedad 'font-family' para cambiar la tipografía o fuente del texto.
¿Cómo se aplica el color de fondo 'gold' al párrafo en el ejemplo?
-Se aplica el color de fondo 'gold' al párrafo utilizando la etiqueta párrafo y asignándole un background-color: gold;.
¿Qué unidades de medida se recomiendan para el tamaño de la fuente en este curso de CSS?
-En este curso, se recomiendan las unidades de medida en píxeles (px) para el tamaño de la fuente.
¿Cuál es la propiedad CSS que se usa para cambiar el color del texto?
-La propiedad 'color' se utiliza para cambiar el color del texto en CSS.
¿Qué propiedad CSS se utiliza para alinear el texto al centro?
-La propiedad 'text-align' con el valor 'center' se utiliza para alinear el texto al centro.
¿Qué es 'font-size' y cómo se aplica en CSS?
-'font-size' es una propiedad CSS que se utiliza para establecer el tamaño del texto. Se aplica asignando un valor numérico seguido de la unidad de medida, como 'px', y se termina con un punto y coma.
¿Cuál es la diferencia entre 'text-align: center;' y 'text-align: justify;' en CSS?
-'text-align: center;' alineará el texto al centro, mientras que 'text-align: justify;' justificará el texto, es decir, espaciará las palabras de manera uniforme para que el texto llene el ancho del contenedor.
¿Por qué no se recomienda usar 'text-align: justify;' en párrafos según el tutorial?
-En el tutorial se menciona que 'text-align: justify;' puede causar problemas de legibilidad en párrafos, aunque se puede configurar con más propiedades para mejorar su apariencia.
¿Qué se aprenderá en la segunda parte del tema del texto en el curso de CSS?
-En la segunda parte se aprenderá sobre otras tipografías y condiciones del texto que son importantes para el diseño y la presentación en CSS.
Outlines
🎨 Trabajando con texto en CSS
En este segmento del episodio 5 del curso de CSS, se aborda cómo manipular el texto en HTML utilizando CSS. Se comienza eliminando párrafos innecesarios y se centra en un solo párrafo. Se explica cómo cambiar el color de fondo, utilizando la etiqueta párrafo y la propiedad 'background-color: gold;'. Seguidamente, se introduce la modificación de la tipografía con la propiedad 'font-family', eligiendo 'monospace' para dar un aspecto distinto al texto predeterminado. También se aborda el ajuste del tamaño del texto con 'font-size', utilizando píxeles como medida, y se muestra cómo aplicar estos cambios tanto en el encabezado 'h1' como en el párrafo. Finalmente, se toca el tema del color de la fuente con la propiedad 'color', cambiando el color del 'h2' y ajustando su tamaño con 'font-size'.
📐 Alineación y estilos de texto en CSS
Este segundo párrafo continúa explorando la configuración del texto en CSS. Se menciona el uso de 'text-align' para alinear el texto, con opciones como 'center' para centrar y 'justify' para justificar, lo que hace que el texto se alinee uniformemente en ambos lados. Aunque se advierte que el alineamiento justificado no es recomendado para párrafos largos, se utiliza aquí para demostración. Además, se muestra cómo aplicar diferentes tipos de alineación en diferentes elementos, como el 'h2', utilizando 'text-align: center;' y luego cambiando a 'text-align: right;'. El vídeo concluye con una promesa de explorar más características de tipografía en futuras lecciones y resalta la facilidad de aplicar estos cambios en el texto.
Mindmap
Keywords
💡CSS
💡Texto
💡Etiqueta párrafo
💡Fuente (font-family)
💡Tamaño de fuente (font-size)
💡Color de fuente (color)
💡Alineación de texto (text-align)
💡H1, H2
💡Píxeles
💡Fondo (background)
Highlights
Comenzamos el episodio 5 del curso de CSS enfocado en el texto.
Eliminaremos dos párrafos y quedarnos con uno para trabajar.
Agregamos texto adicional y lo dividimos con un color de fondo.
Introducimos la etiqueta h1 y comenzamos a modificar propiedades de texto.
Se explica la propiedad 'font-family' para seleccionar la tipografía del texto.
Se muestra cómo cambiar la tipografía del texto predeterminada a 'monospace'.
Se discute la propiedad 'font-size' y su medición en píxeles.
Se ajusta el tamaño del texto del h1 a 45 píxeles para mejorar la legibilidad.
Se aplica el mismo tamaño de fuente al párrafo para mantener coherencia.
Se introduce la propiedad 'color' para cambiar el color de la fuente.
Se cambia el color del h2 a 'brown' para resaltar y mejorar la visualización.
Se ajusta el tamaño del texto del h2 a 25 píxeles para diferenciarlo del h1.
Se utiliza 'text-align' para alinear el texto al centro y justificar los márgenes.
Se advierte sobre el uso limitado de 'text-align: justify' en párrafos.
Se muestra cómo cambiar la alineación del texto a 'left' y 'right'.
Se resumen las propiedades fundamentales para modificar el texto: 'font-family', 'font-size', 'color' y 'text-align'.
Se anuncia que en el próximo episodio se explorarán más opciones de tipografía y texto.
Transcripts
[Música]
qué tal amigos y bienvenidos a este
nuevo episodio de tu curso de css hoy en
el episodio número 5 nos vamos a referir
al texto
[Música]
bien vamos a continuar con el su curso
de css que nos hables ya playón y hoy
vamos a hablar sobre el texto y vamos a
tocar temas bien específicos ok y
elementales que nos va a servir bastante
para traer texto y poder configurarlo
modificarlo a nuestro gusto bien lo
primero que vamos a hacer dentro de
nuestro archivo index es eliminar
prácticamente estos dos párrafos ok
simplemente nos vamos a quedar con uno
solo
vieron simplemente esto va a ser
suficiente de hecho voy a tratar de
poner más texto con lauren gibson
un poquito más son muy bien control ese
ahí lo tienen bien de hecho que te
parece si también el párrafo lo
dividimos mediante un color entonces
vamos a poner acá como etiqueta párrafo
vamos a poner de fondo el color
gold ok punto y coma el control s
actualice su contenido y ahí lo tiene
bien vamos a comenzar arrancando con el
h1 ok con el curso css donde encontramos
precisamente esta etiqueta en este punto
yo voy a llamar a h1
ok y hasta el día de hoy simplemente
hemos visto la propiedad el background
ahora vamos a ver algunas propiedades
que se puede aplicar en el texto entre
ellas está el font family
qué es éste en el cual aquí ya tenemos
por defecto algunas combinaciones ok tu
puedes seleccionar el que tú veas
conveniente en mi caso yo voy a
seleccionar monos space ok punto y coma
control en sem
ahí lo tienen bien es distinto al texto
que teníamos por defecto ok entonces si
quieres dar un tipo de tipografía un
tipo de fuente entonces font-family es
la propiedad que debes utilizar ahora
vamos a ver el tema del tamaño ok pero
para que sea más notorio lo que voy a
hacer algo que se llama font site
relativamente vamos a tocar el tema del
tamaño y el tamaño se puede medir cómo
has podido ver en diferentes medidas
pero el que vamos a usar frecuentemente
en este curso es píxeles para no
confundirnos ok yo lo voy a seleccionar
y en este caso si yo doy la propiedad de
venta vamos a poner un punto y coma como
de costumbre control ese y el texto aún
se va a ser más pequeño que para verlo
mejor qué te parece
acá si le damos el valor de 45
controles se ve mejor y de hecho vamos a
aplicarlo acá también en el párrafo
vamos a poner un fondo family
qué te parece este
punto y coma control s se ve mejor y en
este caso también vamos a hacer un fondo
side para la medida
la medida que vamos a usar qué te parece
35 ok en píxeles punto y coma control s
juego en su texto es aún más grande que
entonces ya saben dos propiedades muy
elementales ok otra propiedad que
también puede servirnos mucho es el
color de la fuente qué te parece si
ahora trabajamos con el h2 lo tenemos
descuidado ok
vamos a mantener el tipo de tipografía
pero en este caso vamos a hacerlo un
poquito más grande con font side ok
vamos a darle la propiedad de 25 les
parece
ok control deseo ya se ve mejor de hecho
el h2 lo podemos cambiar de color como
lo hacemos de la siguiente manera vamos
a él y vamos a traer la propiedad color
simplemente está y vamos a poner algún
color en específico que hay una gran
variedad algo que resalte un que te
parece
brawn del punto y coma control s ahí lo
tienen lo tenemos de este color de hecho
el fondo vamos a cambiarlo vamos a dejar
de usar este código de color y ahora
vamos a ingresar un color más claro como
es el caso de vis que veis en mi caso yo
voy a seleccionar beige
punto y coma controles y ahí está vamos
a aumentar un poquito el texto a 35
bien se ve mejor esto vamos a duplicar
lo que sea 80
ahí lo tienen
mucho mucho mejor ok entonces son
propiedades muy elementales font family
font size color en los cuales vamos a
poder realizar ya algunas modificaciones
a nuestro texto ok ya para el párrafo ok
también se puede aconsejar usar algo que
se llama text align
si yo selecciono esta opción vamos a
tener diferentes tipos de posiciones ok
centrado y justificado son los más
elementales en este caso si yo pongo
center
y presionó controles en todo mi texto lo
voy a tener
en el centro ok pero en este caso
también algo muy usado es just y fire
que básicamente lo que nos ayuda es que
vamos a tener todo nuestro texto con
bordes a los costados ok una especie de
alineamiento que en un principio tenía
varios problemas pero últimamente vamos
a tratar de configurarlo con más
propiedades ojo pero generalmente este
texto align justify no es muy aconsejado
para usar en párrafos pero para este
ejemplo nos sirve bastante para poder
alinear nuestro texto
de hecho miren si yo me vengo acá en el
h2 y puedo complementar con un text
align en este caso center
punto y coma controle se mire si vino a
la posición central ok puedo poner write
punto y coma y mi texto se va al lado
derecho
ok entonces voy a dejarlo simplemente
con center on live si quieres que vuelva
a la normalidad
ok vamos a dejarlo en este caso en
centre
muy bien vamos a dejar hasta este punto
el tema de los textos esto simplemente
es la primera parte en la segunda vamos
a ver cómo podemos llamar otro tipo de
tipografía algunas condiciones más del
texto que tenemos que aprender pero
antes de tocar este tema y algunas cosas
más que tenemos que poner en práctica
para posteriormente llevar ese tema ok y
bien eso ha sido todo por hoy espero que
todo esto haya quedado totalmente claro
porque ha sido un paso muy simple muy
fácil de aplicar referente al texto y
eso ha sido todo por hoy nos vemos en el
siguiente episodio de tu curso de css
Weitere ähnliche Videos ansehen
CURSO de CSS 2021 Rapido y Facil # 9 | 💻 TIPOS DE ELEMENTOS
CURSO de CSS 2021 Rapido y Facil # 4 | 💻 EL COLOR
CURSO de CSS 2021 Rapido y Facil # 10 | 💻 PSEUDO-CLASES
CURSO de CSS 2021 Rapido y Facil #12 | 💻 CAJAS FLOTANTES
CURSO de CSS 2021 Rapido y Facil # 7 | 💻 EL CONTENEDOR
Usar Inspeccionar elemento para los estilos de CSS
5.0 / 5 (0 votes)