YT YouTube2Text

YouTube2Text → Transcripts → Curso Básico de CSS - 8. Texto y Tipografía

Curso Básico de CSS - 8. Texto y Tipografía — Transcript

by FalconMasters · 2,392 words · 348 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:00[Música]
0:05[Música]
0:12Hola Qué tal amigos bienvenidos sean
0:13este nuestro siguiente capítulo del
0:15curso de css básico Mi nombre es Carlos
0:17Arturo y bien pues en este capítulo
0:19vamos a estar viendo lo que es el texto
0:20y la tipografía vamos a estar viendo los
0:22diferentes tipos de propiedades que se
0:24pueden aplicar al texto y bueno cómo
0:25trabajar con él en un sitio web Así que
0:28bien pues vamos a comenzar este capítulo
0:30Lo voy a dividir en dos porque vamos a
0:32ver tanto la tipografía como el texto lo
0:35dividí así porque eh con tipografía me
0:37refiero una cosa y contexto a otra Así
0:40que bien pues vamos a comenzar viendo lo
0:42que son las propiedades básicas que
0:43podemos utilizar y aquí tengo tres
0:46párrafos que he creado en aquí en
0:48nuestro documento el a cada párrafo le
0:51he puesto una clase en este caso clase
0:52uno clase dos clase tres y bueno
0:55simplemente para poder trabajar con
0:56ellos aquí tengo los estilos css otra
0:59vez y vamos vamos a comenzar con ella eh
1:01la primera propiedad que vamos a ver es
1:03muy sencilla tú ya la conoces es la
1:05propiedad de color con color Nosotros le
1:07cambiamos el color al texto puedes
1:09utilizar cualquier unidad de color que
1:11ya anteriormente vimos como puede ser un
1:13un color hexadecimal Como por ejemplo es
1:15el no sé el color negro serían tres
1:18ceros eh un color naranja que yo sé que
1:22siempre uso este color pero es el que
1:24siempre se me quedó grabado en la mente
1:26Así que es el que uso eh si ponemos
1:28color naranja aquí es está actualizamos
1:30tenemos todo el texto naranja podemos
1:32utilizar cualquier tipo de color por
1:34ejemplo un color Blue que bueno este
1:36sería con palabra clave Ahí está y así
1:39es como Podemos agregar los colores aquí
1:41en esta propiedad Podemos agregar
1:43colores y para agregarles una opacidad
1:45usamos rgba que es como te lo había
1:47comentado anteriormente en este caso voy
1:48a agregar el color cero son tres ceros y
1:51en el cuarto parámetro que le vamos a
1:53poner si le ponemos punto5 vamos a tener
1:55un 50% en la opacidad de ese texto
1:59actualizamos Y si te fijas parece gris
2:01en realidad es un negro pero tiene
2:02opacidad Eh Esto no se suele usar mucho
2:05ponerle la opacidad en los textos Pero
2:07te lo comento por si eh lo quieres hacer
2:09bien Lemos la propiedad de color y vamos
2:12a continuar con lo siguiente que va a
2:14ser la propiedad que nos permite
2:16cambiarle la tipografía eh siempre me
2:19han preguntado cómo cambio la tipografía
2:21el tipo de fuente a lo que es mi texto
2:24muy sencillo para esto vamos a usar la
2:26propiedad font family font family con
2:29font family Nosotros le decimos qué
2:31tipografía queremos usar Por ejemplo si
2:33queremos por ejemplo usar una Times New
2:35Roman vamos a poner
2:37entre entre comillas
2:40Times New Roman Ahí está actualizamos y
2:45la he escrito mal Times no recuerdo bien
2:48Cómo se escribe Pero bueno vamos a
2:50escribir otra no sé por ejemplo
2:54verdana actualizamos Y si te fijas
2:57cambia la Fuente tú puedes Agar
2:59cualquier tipo de fuente en este caso eh
3:02se escribe con puedes agregarlas todas
3:04con comillas yo en este caso la agregué
3:06es válido eh las comillas se usan cuando
3:09tienes Fuentes en este caso que llevan
3:11un espacio en este caso my My Pro en
3:15este caso my react Pro por ejemplo lleva
3:17un espacio entonces de debe usar
3:20comillas Cómo se usan las fuentes aquí
3:22te va el truco lo que pasa es que tú
3:24tienes que agregar diferentes Fuentes
3:25normalmente cuando ves un sitio
3:27normalmente tiene lo siguiente Arial
3:29helvética sans serif Ahí está tienen
3:33estas Fuentes por defecto qué es lo que
3:36pasa que los sitios deciden quiero que
3:38el usuario tenga una fuente areal y si
3:40no tiene la Fuente areal Entonces el
3:42navegador va a buscar la Fuente
3:43helvética si tampoco tiene helvética va
3:45a pasar a la siguiente y bueno en dado
3:47caso que no hubiera ninguna de las
3:48anteriores va a buscar la que el
3:51navegador tenga por defecto eh tú puedes
3:53agregar Fuentes personalizadas sí que lo
3:55puedes hacer y es un tema un poquito más
3:57complejo pero tengo un video en mi mi
3:59canal que se llama Cómo agregar
4:00cualquier tipografía a tu sitio web lo
4:03puedes ver y lo lo vas a tener si tú
4:05tienes una fuente instalada en tu
4:07computadora la pones aquí pero no todos
4:09los usuarios la van a ver Solo tú porque
4:11tú la tienes instalada Entonces tienes
4:13que cargarla al servidor y buen a hacer
4:15varias cosas pero sí se puede en este
4:18caso lo voy a dejar aquí con font family
4:19eh Y qué más Vamos a ver font size
4:23también es muy importante fonts nos
4:25permite cambiar el tamaño de nuestro
4:26texto podemos especificarlo con
4:28cualquier unidad de medición como ya
4:30vimos antes pueden ser por ejemplo
4:32píxeles 20 píxeles actualizamos si te
4:35fijas el texto ya es más grande podemos
4:37ponerle con unidades dinámicas como es
4:39unem podemos ponerle centímetros incluso
4:42podemos ponerle porcentajes 100% Pues
4:45sería la la Fuente normal si le ponemos
4:471 50% el texto va a crecer Ahí está y
4:52también lo podemos usar con puntos no lo
4:55suelo usar yo pero también lo puedes
4:56hacer con puntos Ahí está eh vamos a
4:59pasar a a la siguiente Antes que nada
5:01esto lo voy a regresar a 20 píxeles que
5:03se me hace más cómodo vamos a pasar a la
5:06siguiente medida y es la de
5:09font weight con font weight nosotros le
5:12decimos qué anchura va a tener nuestra
5:14letra si por ejemplo lo dejamos así
5:16tiene una anchura normal pero con font
5:18we Nosotros le podemos decir que tenga
5:19una anchura bolt si tú abr antes un
5:23procesador de textos como Word tú sabrás
5:25que B son las negritas Así que si
5:27actualizamos ahí están nuestras letras
5:29negr
5:30normalmente los párrafos por ejemplo los
5:33enlaces Perdón los
5:36encabezados encabezados tienen
5:40una una fuente bolt Ahí está Entonces
5:43nosotros si no la queremos tendríamos
5:45que cambiársela se la cambiaremos
5:49así con font
5:51weight y le ponemos normal con font
5:54normal Nosotros le decimos que no va a
5:56tener unas negritas ahí está se
5:58actualizamos si te fijas tenemos un
5:59encabezado pero ya no está en negritas
6:02eh además de bolt nosotros podemos
6:05utilizar normal o también se puede
6:07utilizar con números en este caso 100
6:10200 300 pero dependiendo de la Fuente
6:14casi no se suele usar solo para algunos
6:16casos muy específicos eh lo voy a dejar
6:18en normal para que no se vea feo Ahí
6:21está y vamos a pasar con las siguientes
6:23propiedades qué otras propiedades
6:25tenemos eh para la tipografía tenemos
6:28más pero estas son las más básicas las
6:30que vas a usar siempre las demás nunca
6:31se usan prácticamente y vamos a empezar
6:34con lo que es el texto para el texto lo
6:35primero que vamos a ver es la alineación
6:37de texto Cómo podemos alinear textos
6:39hacia el centro hacia la derecha e
6:41izquierda vamos a ver cómo se hacen para
6:43esto simplemente escribes la propiedad
6:45text align con text align tú le puedes
6:47decir Center y con eso te va a centrar
6:49el texto te va a poner texto centrado si
6:52te fijas todo el texto queda centrado
6:54Igualmente puede ser para los
6:56encabezados por ejemplo aquí le ponemos
6:58un text
7:00Center qué es lo que pasa con estos si
7:03te fijas ahí está está centrado e con
7:06estos los puedes entrar pero si son un
7:10una caja bloque si por ejemplo le
7:12ponemos un un
7:14background simplemente para que lo veas
7:17de color gris Ahí está si te fijas es un
7:21es un cuadro de tipo bloque Entonces
7:24como es un elemento de tipo bloque eh lo
7:26puede entrar el contenido fácilmente si
7:28fuera tipo línea no podría hacerlo tiene
7:30que ser fuerzas tipo bloque eh nosotros
7:33podemos centrar todo lo que sea tipo blo
7:35No solo las la Fuente las tipografías el
7:37texto también incluso nosotros podemos
7:39entrar imágenes si son tipo Bloque con
7:42lo que es text align entonces con
7:44algunas imágenes tú le pones texaline y
7:46las centras además de Center obviamente
7:48tenemos left que buo no lo centra no lo
7:52acomoda hacia la izquierda Igualmente
7:54tenemos right que nos lo acomoda hacia
7:56la derecha Ahí está eh e yo lo voy a
8:00dejar en left que es la que viene por
8:02defecto que es la que normalmente
8:04siempre viene en todos los navegadores y
8:07ahí está qué más tenemos tenemos Line
8:10hate se escribe así Line hate con Line
8:13hate qué es lo que podemos hacer podemos
8:15modificar la anchura digamos el
8:17interlineado se le conoce si le ponemos
8:2020 píxeles entre cada línea va a haber
8:2220 píxeles de separación si actualizamos
8:24si te fijas hay 20 píxeles pero no
8:27despar aquí me equivoc ad no es de
8:30separación es el tamaño que tiene la
8:32línea por ejemplo si te fijas Yo aquí
8:34estoy subrayando Y en este subrayado son
8:3620 píxeles de alto si nosotros le
8:38ponemos por ejemplo 30 y actualizamos si
8:42te fijas al subrayar Ahora son 30 y
8:45obviamente te va dejando un espacio te
8:47deja un espacio aquí se lo sobró ya no
8:49se ve pero te va dejando el espacio que
8:50tú quieras si se utiliza mucho Line
8:52heate esto normalmente cuando tienes un
8:55diseño tiene algún Line Head específico
8:57Así que tú se lo puedes cambiar y para
8:59eso se usa esta propiedad Igualmente lo
9:01puedes hacer con 30 píxeles con em con
9:04PT con lo que tú quieras qué más tenemos
9:07tenemos text decoration text decoration
9:10nos permite agregarle un decorado al
9:12texto por ejemplo underline si le
9:14agregamos underline agregamos un
9:16subrayado a todo el texto normalmente
9:18los enlaces ya vienen con underline
9:21vienen algo así por defecto el navegador
9:23agrega algo así que es text decoration
9:26underline Así es como te lo agrega
9:28entonces tú que tienes que hacer para
9:30quitarle los subrayados a los enlaces es
9:31ponerle text decoration y ahí está con
9:34eso quitas los
9:35subrayados está underline qué más
9:38tenemos Tenemos también overline
9:41overline lo que nos hace es esto nos
9:43Agrega una línea por encima del texto no
9:45se usa nunca Pero existe esta este valor
9:49Tenemos también Line throw que Line
9:53throw se suele usar un poco Ahí está es
9:55para tachar el texto y pues
9:58prácticamente Estas son las que se
9:59utilizan Yo la voy a volver a dejar en
10:01know como viene por defecto para los
10:04párrafos y bien Tenemos también el text
10:07transform que es una propiedad que no
10:09muchos conocen y nos sirve para hacer
10:11algo genial y es poder establecer todo
10:14el texto de en mayúsculas minúsculas en
10:18capital etcétera Por ejemplo si le
10:19ponemos capitalize eh text transform
10:22capitalize lo que nos hace es que si
10:24actualizamos cada cada letra que empiece
10:28una palabra va estar eh en mayúscula si
10:30te fijas la primera es mayúscula primera
10:33mayúscula primera mayúscula y así en
10:35todas y cada una de ellas también
10:37tenemos en vez de capitalize tenemos
10:39uper Case que uper Case lo que hace Es
10:41que todas nos las pone en
10:44mayúsculas todas y también tenemos
10:46lowercase lower casase que es lo
10:48contrario todas absolutamente todas son
10:50minúsculas incluso las primeras de de
10:53los párrafos eh No se suelen utilizar
10:56para los párrafos se suelen utilizar
10:58para encabezados o cualquier otra cosa
11:00eh quizás para enlaces también pero
11:02bueno es importante que la conozcas eh
11:05Por último Bueno no es por último
11:07tenemos todavía otras varias tenemos
11:08letter spacing con letter spacing
11:11nosotros tenemos un espaciado entre
11:13letras si lo por ejemplo Vamos a ponerle
11:1620 píxeles y va a haber 20 píxeles de
11:18espaciado entre las letras ahí están 20
11:20píxeles una letra 20 píxeles una
11:23letra Esta no se utiliza mucho pero
11:25también la puedes usar para diseños muy
11:27específicos por defecto está normal Aquí
11:30también puedes usar medidas relativas o
11:32lo que tú quieras y por último está su
11:36digamos contraria que es Word spacing
11:38con Word spacing también le puedes poner
11:4020 píxeles pero después de cada palabra
11:42no de cada letra Ahí está si
11:44actualizamos 20 píxeles después de una
11:46palabra palabra otros 20 píxeles y así
11:49hasta el final de todo eso es como
11:51nosotros podemos trabajar con textos
11:53Estas son las propiedades que más se
11:55utilizan hay ya algunas otras que bueno
11:57ya no se usan tanto Y por último una más
12:01que ya es esta es una propiedad que
12:03grabaron con css3 que es Tex
12:06Shadow con Tex Shadow nosotros Podemos
12:09agregar una sombra al texto podemos
12:11agregarle por ejemplo una sombra de
12:13vamos a poner cinco píxeles hacia la
12:16cinco píxeles horizontalmente empezando
12:19de derecha a de izquierda a derecha
12:21Perdón cinco eh verticalmente cinco de
12:24tamaño y vamos a ponerle un color en
12:26este caso negro Esta es una propiedad
12:28nueva que quizás no hayas visto mucho
12:29pero con esto agregamos una sombra si
12:31actualizamos ahí está tienes una sombra
12:33eh Te voy a ser sincero nunca le
12:36agregues una sombra así al texto porque
12:38se ve muy feo si vas a agregarle una
12:41sombra que sea una sombra muy pequeñita
12:42Como por ejemplo un píxel un píxel un
12:45píxel si actualizamos te fijas bueno
12:48Esto también se ve un poquito feo pero
12:50bueno hay sombras que son muy
12:52pequeñitas creo que si la dejamos en
12:54cero Ahí está esta se ve un poquito
12:57mejor todavía eh Hay que agregar sombras
13:00que no se vean feas lo puedes agregar
13:02para diseños también que sean eh con
13:04alguna sombra específica o algo eh Hay
13:06también Podemos agregar sombras a otros
13:08elementos pero en este caso Tex Shadow
13:10es para específicamente para sombras en
13:12texto Así que bien amigos pues eso ha
13:15sido todo por este capítulo de texto y
13:17tipografías ya sabes que mi nombre es
13:18Carlos Arturo y nos vemos hasta la
13:20próxima si te ha gustado el video por
13:23favor No olvides suscribirte al Canal
13:24así como también seguirme en Twitter en
13:26@ falconmasters por último te a que
13:29pases por mi sitio
13:30www.falconmasters.com en donde
13:32encontrarás tutoriales y recursos sobre
13:34desarrollo y diseño web

About this transcript

This page contains the full transcript of Curso Básico de CSS - 8. Texto y Tipografía by FalconMasters, generated from the public captions YouTube serves with the video. The transcript has 2,392 words across 348 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to translate the transcript into 100+ languages.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, translation to 100+ languages, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.