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

[@cesarinadelanueces5824]

Me ha encantado el curso he aprendido bastante, pensé que hacer una página era muy complicado, pero... para mí ha sido muy fácil. Estoy aprendiendo por cuenta propia el diseño de páginas web, y la verdad me encanta! Además de que usted es un buen tutor la dedicación es primordial. Gracias! Por hacer este curso para que las personas que deseamos aprender aprendamos.

[@ZN4K5]

Aportacione: si quieres cambiar a tipo cursiva o italica las letras puedes usar font-style:italic; *puedes usar italic, oblique o normal

[@megaraychu9910]

Puedes poner simplemente para itallic, para bold y no recuerdo el del subrayado

[@nifares8744]

@@megaraychu9910 e

[@eugefideleff8445]

es lo q buscaba lpm jsjajjas

[@davidbarcialarra1307]

El curso es genial, me está viniendo de perlas, ya que aprendí estos conceptos hace muchos años y los tenía ya olvidados, por dedicarme en exclusiva al diseño gráfico en soporte físico. En cuanto al sombreado de textos, por guiarte un poco, en diseño tradicional se utiliza en fuentes de color blanco que están sobre imágenes con colores variados y que hacen que no se lea bien el texto por que se funde con la imagen. Así, queda mejor un sombreado que poner un borde de color a todas las letras. Pero letras negras o de un color sólido sobre un fondo claro o blanco, con un sombreado de pocos píxeles, lo que hacen es dar la sensación de que el texto está desenfocado. Un saludo y gracias por el trabajo. En nada me engancho al de JavaScript si es que lo tienes en marcha.

[@elbasurerodepercy9141]

Siempre busco cosas de programación porque ya sea quiero aprender porque tengo tiempo libre o porque hago algún trabajo y SIEMPRE... SIEMPRE me aparece publicidad de wix... Que noooo chingaaa¡¡¡ Pd: buen video crack entendible y gracias

[@jesusalejandrohernandezram7051]

hola bro te interesa trabajar en un proyecto

[@Wariorrrrrrrrgt]

@@helio8325 xd

[@kalash9964]

Muchas gracias, estoy creando una página sobre una serie de televisión y se ve muy bien, estoy disfrutando mucho de esta programación y la iba a estudiar en la universidad.

[@erickhernandez6768]

Carlos el numero 1!!

[@israelsolorzano3623]

tristemente solamente tiene 65 visualizaciones pero que excelente trabajo realizas de verdad de mucha utilidad tu trabajo

[@FalconMasters]

Si, lo acabo de subir hoy, ya con el tiempo mas gente lo vera, muchas gracias por ver el curso! :)

[@Wariorrrrrrrrgt]

vengo del futuro y el video tiene 274k de visualizaciones

[@JulisaRojas]

Me encantó la parte de text-shadow, no pensé que habría esto, porque tengo una pagina en wix y lo utilizo regular y me encantó esa parte

[@kikidaqui]

Falcomasters muy bueno si senor !!!!!! very good explanations!

[@pedromoreno239]

estoy empezando y tus videos son muy entedibles me han ayudado bastante muchas gracias

[@expedienteX]

Recomiendo no usar sombras en textos de amplia lectura, como en parrafos, definiciones. Donde si se pueden usar los textos con sombra o decoracione es en encabezados o titulos.

[@FalconMasters]

Concuerdo contigo, te doy manita arriba (Y)

[@der_sh]

Gracias por el consejo Leo!

[@MauroParty]

Gracias compa!

[@nifares8744]

SVG es para eso, *text-shadow* no.

[@nifares8744]

SVG (Scalable Vector Graphics) es un formato de imágenes vectoriales para web en formato XML. Es decir, puedes crearlas con programas como Illustrator o Sketch pero también directamente con código. Es más, crearlas en illustrator y luego manipularlas por código, animándolas con CSS o creando interacciones con JavaScript. SVG es un estándar de la W3C y tiene soporte completo por todos los navegadores. Pre-requisitos para tomar el curso: Conocimientos en HTML, CSS Y JS ed.team/cursos/svg

[@-sg-3470]

Me dejaron una tarea sobre esto en la prepa y no había entendido pero con esto ya entendí todo y hasta investigue de sobra para aplicarlo Gracias por el vídeo me ha servido muchoooo

[@wdfr0458]

Muchas Garcias! ahora ya puedo hacer buenarda mi pagina

[@juancaceres5727]

gracias por tanta En señanzas que Nos da no paro de aprender con tus cursos 10/01/2021

[@exploraradora]

Te amo, gracias me salvaste en mi examen :)

[@FalconMasters]

Me alegra!

[@kevinestiventrujilloaristi8089]

Larga Vida Carlos, a lo bien muchas gracias parcero... Dios te bendiga.

[@desireeandreinaespanamonto7959]

enamorada de los videos

[@alejandroaparicio1415]

muy bueno el tutorial Carlos, Dios te bendiga.

[@JulioDavidSeñaPadilla]

Excelente video

[@damianm2436]

¡Muy bueno!

[@mihaelkYeah]

Yo probé usar Times New Roman; cuando la agregaba entre comillas ("Times New Roman"), no me la detectaba, pero cuando la agregaba entre apóstrofes ('Times New Roman') se veía bien

[@wandarosario]

Eres muy bueno. Dios te bendiga!

[@gabrielc4921]

mil felicidades paisa muy buena la explicaciòn!!!!! dsd vzla

[@jhoancampo5093]

Este capítulo es algo parecido al de html, la diferencia es que acá coge es todo el texto, en html se puede elegir que parte de texto se le agrega el estilo.. Muy buen video men gracias por la enseñanza

[@johanw.5737]

Vamos bien con tu curso amigo. Tanto que hasta tú ya agregaste un nuevo color, adicional al naranja de siempre. Aquí te vi con el #ccc, jejeje, saludos y gracias.

[@Toti_111]

Buen video crack!

[@d-landjs]

Excelente video amigo!!!

[@edc08]

FalconMASTER gracias por tus tutoriales me ayudan mucho.

[@augustoogas1323]

by order of the fooookin FalconMasters

[@davidcoloradohernandez6954]

Gracias muy buenos tutoriales

[@JULIANDRESGM]

Muchas gracias Carlos Arturo.

[@jocervadrum]

Falcon excelente video hermano, he aprendido mucho con tus tutoriales muchas gracias. Me podrías apoyar con lo siguiente: mi problema es que en algunos textos me sale demasiado espacio entre palabras, no en todas solo en algunas y no sé cómo solucionarlo. Ojalá me puedas orientar, un abrazo!

[@maximilianoweihmuller1809]

genial gracias por tu tiempo

[@DNSOFER]

Gracias Falcon por tus increibles tutoriales, me sirvieron muchisimo, para sentar las bases y a partir de allí jugar con las diferentes etiquetas valores, etc. gracias nuevamente!

[@antonylopez746]

cursos demasiado buenos +FalconMaster

[@videosespecialesPRO]

MUCHAS GRACIAS.

[@sumsummmmsuuuuum]

Muchas gracias!

[@diegoescobar1985]

Muy buen tutorial, excelente la forma de explicar!

[@MyKisskiller]

exelente amigo! sigue asi

[@FalconMasters]

Muchas gracias! :D

[@miguelangel534]

bien!!! Gracias amigo

[@JotaNV]

Hola, quería hacerte una consulta.. estoy querido que en mí web aparezca el el precio de una criptomoneda, sacando el valor de otra web.. es posible? Realmente no logro encontrar nada, tal vez busco de la manera incorrecta

[@elrinconmasnono4421]

excelentes videos amigo, te has ganado un suscriptor mas :)

[@BrandonEcheverry365]

Cuando colocas 'Times New Roman' no ves los cambios por que ya esta puesta por defecto.

[@Caoscina]

Esto me creó una confusión. ¿Qué pasa si en el código html tengo un a Negrita ? ¿Es necesario utilizar el font-weight en el css?, ¿No reconoce el o es que los reconoce a los dos?

[@leandronicolasea]

no seria necesario usar el font weight, pero en mi opinion todas esas cosas de diseño es mejor ponerlas en el css. si lo pones en los dos reconoce a ambos pero como usuario no notarias la diferencia.

[@Caoscina]

Leonico Egea gracias!!

[@andresescorcia6587]

BUEN VIDEO

[@HourGlassDM]

una pregunta.. yo hice un h2 encerrado en un contenedor div, el tamaño de la fuente es de 90px que planeaba para encabezado pero me abrio unos espacios arriba y abajo muy grandes.. como pódria arreglarlo? le agregue el line-heinth de 1px y me hizo ese espacio mas pequeño pero aun no queda como lo quiero.. esta es la imagen: gyazo.com/092e063efc87358cf4c2672d957f920b el area sombreada esta seleccionada con el mouse

[@enginecompsecurity8398]

buen video compa

[@angelgarcia82747]

Tengo un problema, estoy en android y utilizo una app llamada files Google, y con eso creo las carpetas para hacer mis pruebas, y dentro pongo 2 archivos, uno de html y otro de CSS, pero cuando hago la prueba no agarra el CSS, el html si porque de ahí lo abrí, ¿cuál será el problema? Puedo especificar.

[@angelgarcia82747]

Será porque:

[@nifares8744]

Estrictamente hablando las etiquetas _self closing_ no es obligatorio cerrarlas (en HTML) con el Slash (/) en SVG es obligatorio.

[@leometal9479]

Como puede cambiarle al color al momento de subrayar un párrafo, el color que se ve adentro del texto que estoy subrayando... es que me sale el naranja cuando selecciono el texto...

[@WinterWolf7u7]

genial, mi objetivo era remplazar las etiquetas de letras de estilo pq es mejor usarlas en css, no vi aqui la de cursiva

[@decopock]

En cuanto tiempo aprendistes de memoria estos cursos (html, css y Javascript

[@sethuserralde863]

Como podría en un texto

[@miguelalexander2808]

ola amigo muy buenos sus tutoriales me gusta estoy aprendiendo cada dia gracias a usted..

[@wilberthchan4221]

buen video

[@ibardesarrollo6984]

Gracias bro me sirvió... en 2 minutos encontré que tenía q usar font-size pal tamaño... buen trabajo gracias..

[@francorenzulli2581]

Muy bueno! Estoy muy agradecido :D

[@SpideyTops]

-que buen tutorial

[@DKMRFCBrlz]

Cuando se utiliza sombra de texto en una página, se vuelve más lerda? Como cuando se trabaja con degradados en un programa de vectores?

[@jesusfernandez7248]

1:22 Jaja en clase un profesor nos hablaba de los colores, y cuando llegó a RGB, nos dijo que esos códigos pueden consultarse, hay herramientas online, no hay que memorizarlos. Entonces dijo, "a ver, yo no espero que nadie aquí se aprenda el código del naraja, por ejemplo", a lo que yo le respondo "Es 255, 128, 0". Pero el que más se me ha quedado es el celeste, de tanto usarlo. Su RGB es 12, 183, 242 y su hexadecimal #0CB7F2

[@FalconMasters]

+Jesús Fernández haha asi pasa a veces, se nos queda grabado algún color sin que intentemos memorizarlo.

[@lennypms]

+Jesús Fernández Eso me recuerda que Falcon Masters siempre usa el naranja, así estamos conectados,jajaj

[@jesusfernandez7248]

FalconMasters Sin duda jeje. De hecho recientemente se me quedó grabado el #009688, el verde azulado usado en Material Design, justo el que llevo en el logo. Y si mal no recuerdo, el fondo de mi logo es un #263238, el más oscuro de los azules grisáceos, Material Design, también.

[@Erickooooo_]

@juanete y se pone xd

[@SirfeX29]

¿el text shadow se puede usar para img?

[@ronnyponce5176]

box-shadow par imagenes

[@soyfercarvajal]

ayuda porque no me funciona el a:link? agrego el correctamente y al guardar actualizo la página y no se graba

[@claudioabel4300]

Nosé por qué pero quiero alinear el texto y haga lo q haga el texto queda corrido hacía la derecha.. AYUDA!

[@MGJEROPARDY]

Carlos, lo que necesitaria saber es como dar un efecto a las fotos que cuando les doy click se abra la foto en grande y quede el resto de la pag de fondo, el problema es que tengo las imagenes en miniatura y las imagenes en grande y no se como hacerlo

[@FalconMasters]

En mi canal tengo un tutorial sobre eso, se llama como crear una galeria de imagenes con lightbox.

[@MGJEROPARDY]

no lo vi, gracias :D segui haciendo videos son lo mas!!

[@FalconMasters]

MGJEROPARDY Gracias a ti por verlos! :D

[@MGJEROPARDY]

Disculpa la molestia, la pagina de lightbox no anda

[@angieguerrero319]

y como se discrimina letra y color a cada texto o titulo?

[@ivanmartinez4936]

como se pone para agregar otro estilo de texto a mi otro parrafo

[@ahorasabes]

Hola, soy Juan y estoy diseñando una pagina web con Github, me podes ayudar? Tengo un par de dudas. Gracias

[@juniorquezada9669]

BUENA TARDE AMIGO PODRIA SUBIR EL VIDEO DE COMO HACER UNA PORTADA DE REVISTA CON CSS

[@nickgame98]

Ya que mencionas el text shadow. cual seria el modo en css para ponerle un shadow abajo del header asi tipo Material Design?

[@alexnacul]

Gracias

[@Ztar473]

Como hago para que un texto se mantenga dentro de un div, y que si necesita mas espacio, amplie el div hacia abajo y no a los lados?? Gracias por su atencion!

[@FalconMasters]

Ztar473 Le puedes poner un max-width con la medida del ancho máximo que quieres

[@Ztar473]

Gracias!! Y gracias tambien por sus tutoriales! Son muy buenos!

[@MrRaquel7171]

Hola! Por default mi computadora me dio font-variant-alternates... que significa?

[@bartzeazons3785]

creo que primero inicia con New ¿ No ?

[@LALOOS71]

Te hago una consulta, como hago para cambiar el tipo de letra, color y tamaño de un texto, que no me afecte toda la pagina ?

[@ricardowilliamssaldanaleon3886]

puede ponerle una clase a tu etiqueta y con css le das el estilo que quieras

[@_nohandz_]

Clase, o pone esto (ejemplo los que quieres cambiar) header,li,p{COLOR:white;} y los otros lo mismo nav,h1,h2{COLOR:WHITE;}

[@joseherrada7180]

Recuerda que el elemento ''body'' es lo que afectará toda la pagina, asi que el texto que quieras modificar le pones una class luego en CSS pones .nombre{ y aqui haces las modificaciones} Para cambiar el tamaño es font-size:pixeles Para el color es color: color en hexadecimal

[@johnnypatino27]

Cómo se llama el posicionamiento por defecto? será "por defecto"?

[@daruchi703]

Si algun dia se cuestionan como aplicar estilos a una sola palabra en un texto, no olviden las etiquetas simples como la :3

[@davidv5137]

oie sabes como dejar un espacio de un texto a otro ?!

[@daruchi703]

@@davidv5137 con das un salto

[@johnrov2478]

Me puedes ayudar con lo del tamaño de la letra por favor, lo que sucede es que al aplicar el tamaño de la fuente a una de las categorías de mi web, ésta no se adapta para tableta, móvil o PC. Es decir, si pongo tamaño 15pt en PC se ve bien, pero en tableta es muy grande la letra y en el móvil ni que se diga.

[@fernandomoreno5160]

Nathan Rov utiliza media queries para ajustar el tamaño de la fuente según el ancho de pantalla en el que se esté visualizando tu web:)

[@johnrov2478]

@@fernandomoreno5160 gracias, voy a probarlo

[@sergioaviles2385]

Minuto 7:16 (Solo para recordar donde me quede, porque YT no me guarda los videos)

[@Nach956]

Tengo que ser honesto, la sombra 5x 5x 5x se veia genial -...-

[@mikeprado30]

Eso mismo pensé :D

[@nilo591]

y yo que pensaba que era el único! jajajaj me parece que para ciertos tipos de parrafos es adecuado. :)

[@cristianb5826]

totalmente

[@carlosdanieltellechea594]

Jejeje Me di cuenta de que guardas los cambios con el teclado o automáticamente. Yo puse exactamente lo mismo que tú y funcionó. Así que... no sé qué fue.

[@FernandoPerez-gc6wz]

Amigo buen día una pregunta, podrías colocar el html que vayas a usar en cada ejercicio en la descripción del video? Ando guiándome completamente para aprender y quisiera tener cada ejemplo tal cual lo das. Claro, si no es mucha molestia. Saludos desde venezuela.

[@lennypms]

+Fernando Perez Te recomeindo la serie de videos de html y css de Falcon Masters es genial, yo los he seguido y son muy buenos, rápido de aprender.

[@Carli180]

Para qué le pusiste a cada párrafo class uno class dos y class tres y después no lo explicás? No aparece eso en el video.

[@gabrielhuertas743]

Te recomiendo un programa Dreamweaver.

[@xjbs9540]

Buenas, Trabajar con (class) es lo mismo q trabajar con (id) ? Saludos

[@FalconMasters]

+Xavier Bonifacio Si, pero es mejor trabajar solo con clases, las id es recomendable solo usarlas cuando trabajes con javascript u otros lenguajes.

[@diegoarrechea5666]

+Xavier Bonifacio me parece que a id se puede poner una vez sola creo no se segun lo que entendi y la class la que quieras o es algo haci

[@joseherrada7180]

la id es cuando trabajas con un elemento y class es cuando son varios

[@sebastianlugo4051]

como se hace para ponerle (class) a un parrafo y ponerlo en css para cambiar solo ese parrafo

[@halo199827]

+W0Lf Es facil por ejemplo: Encierras el parrafo entero en un div y al div le asignas la clase: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Y ahora en CSS le asignas el estilo que quieras a la clase: .parrafo { color=blue; } Asi es ejjej espero haberte ayudado :D

[@joelcosztrako8084]

+Andres Rodriguez O sino ponerle directamente la clase al párrafo, no?

[@halo199827]

Si se puede poner la clase en la etiqueta de parrafo, pero pues en lo personal el div le da un mejor orden al codigo, pero si, a cualquier etiqueta se le puede asignar clase

[@joelcosztrako8084]

Ok, gracias por tu opinion, pero igual prefiero ponerle la clase al párrafo

[@vinzer72frie]

que no pusiste atencion a los videos? es luego en css .id { values }

[@carlosdanieltellechea594]

Cuando pusiste el Times New Roman no guardaste los cambios. Por eso no funcionó. Estaba bien escrito. Saludos y muchas gracias por el curso.

[@luchorap85]

genial

[@jesusmorillo5758]

como puedo centrar una imagen? con text-align: center; no me funciono

[@carlossantaella139]

+Jesus Morillo si no te centra intenta usar en el archivo html directamente entre lo que quieres centrar la etiqueta aqui vas a poner lo que quieres centrar

[@abranjs]

Carlos, esa etiqueta fue eliminada del html5.

[@carmenrisko3865]

como voy a esa pagina?

[@angelsalazar150]

no me funciona el tex-align que hago?

[@nojaodoggo2896]

Escribiste Tex no Text

[@dianaespinozazeta3542]

eres el mejor xd

[@satopione7179]

y como hago para solo elegir 1 p

[@ronnyponce5176]

tienes que usar un selector de clase o id en tu ccs y luego ponerle esa clase o id al parrafo especifico

[@guitarrazul1716]

Y cómo hago si tengo varios párrafos diferentes ( ) y les quiero poner distintos colores a cada uno?

[@nifares8744]

por medio de selectores utilizando las clases (class=""), es recomendable siempre usar clases específicas que tu puedas recordar y en inglés ya que es el idioma estándar.

[@ronnyponce5176]

Se puede con clases si, pero sucede que a la data que es dinámica o sea que va a cambiar con el tiempo no se le suele poner colores pero si aun así quieres que tus párrafos sean coloridos yo te recomiendo que NO uses clases porque si tu página contiene muchos párrafos lo que vas a causar es que tengas muchas clases innecesarias en el html, los que programamos back-end sabemos eso. Yo te recomiendo uses selectores descendientes o selectores padre, hijo, adyacentes, etc., tendrías que buscar un vídeo para que te capacites en selectores incluso puedes usar pseudo clases.

[@AndreaPuigCruzapc]

Yo le puse una sombrita al titulo y se ve bonita :D

[@-rainer-4195]

hice lo mismo xD

[@july___v2712]

alguien me podría decir ayudar, necesito poner una imagen a un lado de la otra (actualmente tengo una encima de otra)

[@ronnyponce5176]

Es porque has puesto las etiquetas img en una etiqueta que tiene molde inblock o sea que ocupa toda el ancho de la pagina y por eso una se pone abajo de otra... si quieres que tus imagenes se pongan una a continuación de otra solo tienes que poner tu imagen en una etiqueta img sin más... pero si aun así necesitas encerrarla en otra etiqueta que es inblock tienes que hacer es cambiar la configuracion inblock de la etiqueta por una configuracion inline con el siguiente atributo: style=" display: inline;", ejemplo: en este caso yo encierro mi etiqueta img en una figure pero puedes usar cualquiera como div, p, etc....

[@malexrm]

y no usaste con las clases en los parrafos :(

[@argenisjimenez8118]

hay tipografias que no me agarra :/

[@OsitoMorningstar]

me pasa igual, tu pudiste encontrar la solución?

[@rayto_urushibara]

Alguno sabe como podría ponerle sangría a los párrafos?

[@konkis]

Ggracias por tu labor. Creaste class en 3 parrafos y despues no usaste ... saludos

Excelentes tutoriales Estoy comenzando con HTML5 y CSS3, alguien me podría ayudar con un problema que tengo en mi etiqueta todo lo que contienen esta etiqueta me aparece con un hipervínculo ¿qué es lo que estoy haciendo mal? Mis peliculas favoritas Películas Favoritas A continuanción presento un listado de mis 5 películas favoritas Home Mis datos Mis gustos Mis disgustos Mis peliculas favoritas Mis deportes favaritos Contenido de mi sitio Aqui va todo el contenido de mi seccion 1. El Lobo de Wall Street 2. Red Social 3. Forest Gump 4. El Rey León 5. Trainspotting Agradezco la ayuda

[@bartzeazons3785]

La verdad no se, soy nuevo, pero algo que vi mal fue en el parece que en la etiqueta Abres pero no la cierras en las 4 ultimas de

[@CristianCamiloValenciaVargas]

Es cierto, @Bartz Ezons tiene razón, es porque no cierras la etiqueta en los , por tanto como dejas abierta esta etiqueta todo lo que le sigue se comporta como un link.

[@joseherrada7180]

Es porque no cerraste las etiquetas en href

[@nifares8744]

Señor por buenas prácticas es recomendable no agregar un después de un ** hay jerarquías usted tendría que haber puesto un ** porque así se sigue una secuencia eso afecta en el SEO (Posicionamiento en buscadores).

[@diegoarrechea5666]

letter-spacing esta bueno para sopa de letras jajajaja