Aprende HTML y CSS - Curso Desde Cero

hola si quieres aprender desarrollo web este curso es para ti aprenderás los fundamentos de html y css paso a paso comenzaremos con html para crear la estructura de la página y luego aprenderás css para describir su presentación puedes encontrar el código del curso en el enlace en la descripción del curso allí podrás acceder a un repositorio en hiphop donde puedes descargar los archivos y seguir el curso paso a paso bien así que comencemos comencemos el curso viendo los tres pilares principales html css y javascript cuál es su función en el resultado final de la página

web vamos a ver comencemos con html html significa en inglés hyper text markup language lenguaje de marcado de hipertexto es un lenguaje que nos permite definir la estructura de la página web cómo se va a estructurar el contenido en la presentación que va a ver el usuario puedes pensar o imaginar html como la estructura de una construcción que consiste en columnas o en vigas o en barras en madera que más o menos definen la estructura del resultado final más no su presentación usamos html para definir la estructura de la página web no cómo se van

a presentar los elementos sino el contenido como tal escribimos html en un archivo de tipo html y para eso usamos la extensión punto html vamos a crear este archivo en la primera parte del curso cuando trabajemos con los elementos html y luego que tengamos toda esa estructura vamos a comenzar a ver css en inglés significa cascading stylesheets hojas de estilo que se van aplicando en cascada css lo usamos para definir la presentación de la estructura que definimos en html básicamente le vamos a decir al browser o el navegador como queremos presentar cada uno de los

elementos que incluimos en nuestro archivo html una analogía de la vida real sería la presentación final de todos los acabados de una casa html sería las vigas la estructura los ladrillos pero css sería todo lo que le agregamos por encima esta estructura para que se vea presentable como queremos que lo vea el usuario final vamos a escribir el código css en un archivo de tipo cs efe ese archivo va a tener una extensión punto css y finalmente nuestro tercer pilar es ya basket este es un lenguaje de programación que nos permite añadir funcionalidad a nuestra

página web hacer que la página web sea interactiva y que pueda interactuar con el usuario y toda la funcionalidad que conocemos en las páginas web de hoy en día que permiten que sean herramientas muy poderosas escribimos el código de javascript en un archivo de tipo llamas qué punto j ese es su extensión estos tres componentes normalmente se almacenan o se escriben en archivos separados cada uno con su tipo de archivo específico html css y javascript los tres archivos luego se conectan se combinan y forman las páginas web que conocemos hoy en día durante el curso

vas a aprender a trabajar con html y css vamos a ver lo básico la parte introductoria de cada uno de estos lenguajes u herramientas que usamos para el desarrollo web vamos a ver javascript en un próximo curso javascript aplicado al desarrollo web pero si tenemos un curso en el canal de javascript si quieres aprender los fundamentos de este lenguaje de programación bien así que comencemos a ver html y luego veamos css para crear una página web veamos algo que seguramente te va a resultar muy interesante y puede ser una motivación extra para seguir experimentando mientras

aprendes desarrollo web se estás usando google chrome como tu navegador puedes hacer clic derecho en cualquier página web que estés y hacer clic aquí el inspector eso va a abrir un panel que te va a mostrar exactamente lo que vas a aprender durante el curso html tenemos este panel con toda la estructura de la página web el código html y en esta parte cita tenemos css tenemos todo lo que controla cómo se muestran esos elementos en la página y aquí tenemos su estructura que es el html puedes ver que tenemos una estructura de alguna forma

con elementos anidados tenemos elementos dentro de otros elementos puedes ver eso con estas flechitas abrimos una flechita y dentro conseguimos más elementos esto es lo que vamos a ver durante la primera parte del curso cómo puedes usar esto que llamamos elementos y etiquetas para crear o definir la estructura de tu página como ejemplo veamos la estructura del archivo del código html de la página de frijol campeón español si hacemos clic derecho y luego hacemos clic en expert se abre un pan y que tenemos aquí ese pan él nos muestra la estructura html de esta página

que tenemos aquí al colocar el cursor sobre cualquiera de estos elementos podemos ver a qué elementos se refiere en la página y puedes ver aquí que tenemos como una estructura de elementos dentro de elementos así es básicamente cómo funciona html vamos a tener muchos elementos que conforman nuestra página web que van a estar uno dentro del otro por ejemplo esta parte vemos que corresponde a estos elementos que tenemos aquí a partir de este que estoy señalando y dentro de él vamos encontrando nuevos elementos uno dentro del otro así que comencemos vamos a empezar a ver

cómo puedes escoger tu editor de código para que comienzan a escribir tu archivo html para comenzar nuestra misión de crear una página web y ver los principales componentes que puedes usar en html necesitamos la herramienta adecuada un ejemplo es visual studio cow este es el editor de código que vamos a usar durante el curso se puede descargar para windows o para otras plataformas dependiendo de tu sistema operativo es gratis y fue creado por microsoft otra alternativa buenísima también es atom que es gratis se puede descargar de forma gratuita y está disponible para windows 7 o

versiones más recientes puedes acceder a brillo eléctrico en code punto visual studio puntocom para descargarlos simplemente haces clic aquí en down down eso te va a llevar a la página donde te presentan las distintas plataformas haces clic en el botón dependiendo de tu sistema operativo en mi caso es windows haces clic aquí y vas a ver que se inicia la descarga y es gracias puedes cargar bien es que hoy para windows si la descarga no inició todavía puedes hacer clic aquí para un link de descarga directo y aquí podemos ver cómo comienza la descarga una

vez que la descarga ya esté lista puedes instalarlo haciendo doble clic en el archivo y el proceso es bastante intuitivo así que una vez que ya culmina el proceso de instalación puedes ver una pantalla muy similar a ésta esta es la pantalla de bienvenida de bello estudio que aquí tenemos algunas opciones para iniciar para empezar a trabajar con nuestro editor de código y aquí en esta sección vas a ver archivos recientes si recién están instalando esta sección va a estar vacía aquí tenemos una opción para crear un archivo nuevo para abrir un archivo ya existente

para abrir una carpeta o para ejecutar un comando en este caso vamos a abrir una carpeta vamos a abrir una carpeta que ya yo creé en mis documentos que se llama curso de html y css hacemos clic en opel folder y podemos llegar a la carpeta que queremos abrir o copiar la dirección aquí arriba hacemos clic en enter y luego cuando vemos el nombre de la carpeta que queremos abrir aquí hacemos clic en select folder vemos que tarda unos segundos en abrir y vemos que aquí en la pantalla cambio ahora tenemos una parte un panel

aquí que se llama explorer explorador en español y vemos el nombre de la carpeta curso de html y css en el panel con unas opciones aquí también vemos el nombre de la carpeta que tenemos abierta otra opción para realizar este mismo proceso para abrir una carpeta es hacer clic en file luego open folder o usando estos atajos del teclado y siguiendo luego el mismo proceso llegamos a la carpeta y luego seleccionamos esa carpeta genial ya tenemos nuestra carpeta abierta para abrir o cerrar el explorador que nos muestra el contenido de la carpeta y aquí podemos

ver algunas opciones podemos ensanchar el panel para ver estas opciones junto con el título de la carpeta crear un archivo crear una carpeta también podemos volver a cargar el explorador para que actualice el contenido de la carpeta y también colapsar o cerrar las carpetas las subcarpetas que tenemos en esta carpeta en este momento la carpeta está vacía así que vamos a comenzar a crear nuestro primer archivo el archivo html un dato curioso es que si te gusta este tema de colores que vamos a usar durante el curso puedes descargarlo en las extensiones es el tema

oscuro de frica org and bass aquí a extensiones luego aquí en la búsqueda de extensiones escribes recall camps dark en el tema oscuro de frica urca y aquí lo puedes ver puedes ver el logo de frigo que haces clic aquí y como yo ya lo tengo instalado me a estas opciones pero aquí vas a ver una opción que dice instalar install aunque genial vamos a nuestra siguiente parte del curso a comenzar a crear nuestro archivo index.hu tml debe oye el primer paso para crear cualquier página web es crear un archivo html así que vamos a

hacerlo aquí y paso a paso hay dos formas de crear un archivo vamos a usar aquí la más directa digamos junto al nombre de la carpeta donde queremos crear el archivo la cual tenemos abierta en vídeo el estudio que vamos a hacer clic aquí en new file archivo nuevo vemos un campo aquí que nos permite escribir el nombre del archivo es una estándar nombrar el archivo principal de tu página web index.html o que hacemos clic en enter y allí vemos nuestro archivo se creó el archivo en nuestra carpeta si vamos a la carpeta podemos confirmar

que tenemos el archivo aquí index.hr ml y puedes ver que tiene el símbolo de google chrome porque por defecto yo tengo configurado que los archivos html se van a abrir con google chrome otra forma de crear el archivo html es ir a fallo y luego hacer clic en new file o también usar el atajo de teclado control márgenes eso va a crear un archivo nuevo aquí que va a decir aun tyrone es decir que no tiene un título específico asignado todavía y luego puedes guardarlo file save o 6 bass y simplemente le asignas el nombre

aquí sería index.hr ml le darías click en save si lo estás creando de esta forma ok pero como ya lo creamos con la forma más directa ya tenemos nuestro archivo genial puedes cambiar el tamaño de este panel hacerlo más angosto con estas flechitas si ponemos el cursor en la línea de división para abrir el archivo semos doble clic que en este caso está abierto pero si queremos cerrarlo hacemos clic en la x y para abrirlo nuevamente doble clic sobre el archivo y ya tenemos nuestro archivo ahora vamos a escribir la primera línea en nuestro archivo

html cuál va a ser esa línea va a ser una declaración que nos va a permitir decirle al browser que es versión de html vamos a usar en nuestro archivo es muy importante y debería estar en todos los archivos html que cree eso que debería ser la primera la primera línea que tengas allí vamos a incrementar su tamaño y aquí podemos ver su estructura comenzamos con un paréntesis angular de apertura luego un signo de exclamación luego doc type en mayúscula un espacio luego html en minúscula y un paréntesis angular de cierre esa es la línea

que le dice al browser qué versión de html vamos a usar en el archivo veamos como describe en esta declaración en la documentación de la red de desarrolladores de mozilla aquí lo tenemos la documentación web de la red de desarrolladores de mozilla es muy muy útil para conseguir información sobre todos los elementos de html de cfs también cubren javascript es básicamente una documentación que te permite aprender más sobre cada uno de los elementos vamos a hablar más sobre la documentación en una próxima sección pero por ahora vamos a concentrarnos en este artículo que nos explica

el propósito de dos type dock type informa al navegador qué versión de html se usó para escribir el documento es una declaración no una etiqueta no es una etiqueta como las que vamos a usar normalmente en html com paréntesis angulares sino que es una declaración además podemos referirnos a ella como document site declárase jones declaración de tipo de documento o por las siglas de ted es muy útil que la documentación también se puede leer en español como tenemos este artículo simplemente hace clic en este menú y puedes seleccionar tu idioma si haces clic en change

line which que significa cambiar idioma genial ya tenemos nuestra primera línea del archivo html así que vamos a ver en la próxima parte tres etiquetas que son esenciales para cualquier archivo html para empezar a crear la estructura de nuestra página web tv oye comencemos viendo una definición de elemento porque los elementos en html van a ser esenciales vamos a usar esos elementos que podemos crear para definir la estructura de nuestra página web veamos una definición un elemento es un componente básico de un archivo html puedes pensar en los elementos en html como ladrillos usamos los

elementos para definir la estructura de una página web en un archivo html el archivo donde vamos a escribir nuestro código los elementos van a ser los componentes básicos de ese código y esos elementos se van a combinar para crear la estructura de la página web en inglés el elemento se denomina element que es por si en algún momento necesitas referirte un elemento en inglés o cuando lo leas en la documentación los elementos y las etiquetas están estrechamente relacionadas por qué porque las etiquetas no os permiten definir los elementos que usamos en un archivo html básicamente

las etiquetas son la forma de escribir esos elementos en un archivo nosotros escribimos las etiquetas en nuestro archivo html y estas etiquetas crean los elementos de la página web que especifican las etiquetas especifican el tipo de elemento que se va a crear en esas partes específicas de la página web en inglés nos referimos a una etiqueta como tag o que está en inglés por si en algún momento necesitas referirte a las tags o las etiquetas en la documentación en inglés aquí tenemos algunos ejemplos de etiquetas en html vamos a verlas en acción ahorita en nuestro

editor de código pero ahora vamos a enfocarnos en su estructura cuando veas estos paréntesis angulares debes pensar que eso representa una etiqueta en html y lo que está dentro de la etiqueta representa el tipo de elemento que se está creando esta es la estructura de la etiqueta un paréntesis angular que abre en la etiqueta dentro de los paréntesis angulares el tipo de elemento y en luego el paréntesis angular que cierran la etiqueta la mayoría de los elementos en html requieren dos etiquetas una etiqueta que se llama etiqueta de apertura como la ves aquí por ejemplo

html y una etiqueta de cierre que tenemos aquí estas etiquetas son esenciales porque van a permitirle al browser saber dónde comienza un elemento y dónde termina recuerda que vamos a anidar elementos y vamos a tener elementos ubicados en una secuencia también así que es esencial que el browser sepa dónde comienza un elemento con su etiqueta de apertura y dónde termina con su etiqueta de cierre por ejemplo en este caso la etiqueta dice html y eso debe aparecer exactamente igual en la etiqueta de cierre para que el productor detecte que el elemento se cerró cuál es

la diferencia entre la etiqueta de apertura y la etiqueta de cierre bueno esto que tenemos aquí esta parra determina que esa etiqueta representa una etiqueta de cierre es muy importante incluir esta barra que tenemos aquí es la única diferencia entre ambas etiquetas aquí podemos ver un ejemplo de un elemento y de por qué también es necesario usar una etiqueta de apertura y de cierre vemos las dos etiquetas el tipo de elementos h1 vamos a ver más sobre este tipo de elementos en tan solo unos minutos pero básicamente lo que nos permiten es crear un encabezado

un título en la página tenemos la etiqueta de apertura la etiqueta de cierre y dentro de estas etiquetas vemos el contenido de ese elemento por eso necesitábamos una etiqueta de apertura y una etiqueta de cierre porque nos van a permitir delimitar o encerrar un contenido el contenido de ese elemento algunos elementos en html no necesitan etiquetas de cierre la mayoría sí pero hay ciertos elementos que no necesitan etiquetas de cierre en inglés nos referimos a esas etiquetas como south cloud sintax son etiquetas que digamos que se cierran solas o no requieren de una etiqueta de

cierre con la etiqueta de apertura insuficiente aquí tenemos un ejemplo ésta es una etiqueta que nos va a permitir colocar una imagen en nuestra página web como puedes ver esta etiqueta es de apertura porque no tiene una barra al inicio pero no necesitamos una etiqueta de cierre solo con esta etiqueta vamos a poder especificar todo lo que necesitamos para que se presente esa imagen en la página web no necesitamos incluir nada más simplemente es opcional agregar esta barra al final de la etiqueta cuando se cierra sola cuando no tiene una etiqueta de cierre durante el

curso no la vamos a incluir porque es opcional vamos a ver estas etiquetas y elementos en acción en nuestro editor de código volvemos a nuestro editor de código visual estudio cavern por ahora vamos a cerrar el explorador así podemos concentrarnos en el contenido del archivo luego de la declaración del doctor el tipo de documento el primer elemento que vamos a incluir va a ser el elemento html que también se denomina el elemento raíz de un archivo html todos los demás elementos que van a conformar la estructura de nuestra página deben estar contenidos dentro de este

elemento principal por eso lo llamamos el elemento raíz aquí tenemos su etiqueta de apertura y también tenemos su etiqueta de cierre dentro de ambas etiquetas vamos a empezar a crear la estructura de la página dentro de html dentro de este elemento vamos a tener otros dos elementos principales el primero va a ser head y el segundo va a hacer por y ellos literalmente significan en inglés ged cabeza ivory cuerpo podríamos realizar esa analogía en cuanto a la página web todos los elementos que van a estar dentro del elemento head son elementos que en realidad actúan

detrás de escena son elementos importantes para la página pero no van a formar la estructura principal de la página por ejemplo aquí dentro de ejes vamos a incluir cualquier archivo externo enlaces a archivos externos que necesita la página como archivos de css o archivos javascript y también dentro de head podemos personalizar el título de la página pero dentro del elemento poli es donde vamos a definir la estructura de la página si omitimos head el browser va a añadirlo automáticamente ya lo vas a ver en la herramienta de desarrolladores de chrome cuando veamos una vista previa

de nuestra página algo importante que tenemos que cambiar en dicho de estudios code cuando trabajamos con archivos html es la intención este espacio que puedes ver aquí antes de las etiquetas head y baring funcionalmente no tienen un impacto en html o sea si nosotros escribimos esto así la página se va a presentar de igual forma no va a haber ningún cambio en el resultado pero siempre deberías agregar un nivel de intenta ción a cada uno de los elementos que vas anidando que vas colocando dentro de otros así puedes ver fácilmente la jerarquía que hay entre

ellos los elementos que están dentro de otros elementos por ejemplo aquí fácilmente podemos ver que head y boring están dentro del elemento html y eso lo logramos visualmente agregando espacios pero aquí tenemos cuatro espacios podemos cambiar esto porque el estándar en html es usar dos espacios en realidad cuántos espacios usar para intentar puede ser personalizado de acuerdo a tu preferencia normalmente se usan dos o cuatro espacios pero el estándar web recomiendo usar dos espacios al igual que la guía de estilo de google así que vamos a usar dos espacios en lugar de cuatro y cómo

podemos cambiar esto en viso destruyó con hacemos clic aquí dice espacios 4 hacemos clic en intentar usando espacios intent using spaces y luego seleccionamos cuantos espacios queremos usar para cada nivel de intenta ción en este caso sería 2 en lugar de 4 que es el tamaño por defecto vamos a usar 2 ahora podemos con el atajo del teclado control y luego el corchete un corchete de apertura podemos mover el código hacia la izquierda un nivel de intenta ción así teníamos el código antes con cuatro espacios puedes ver aquí cuatro puntitos cada uno de los puntitos

representa un espacio y si hacemos clic en control y un corchete de apertura bajamos a dos espacios y si hacemos clic en control con un corchete de cierre volvemos a cuatro espacios porque estamos agregando un nivel de intenta ción estos atajos de teclado son muy muy útiles cuando estamos trabajando con un editor de código así que te recomiendo que los anotes o los tengas allí presentes cuando trabajes con peso de estudio caber porque usamos dos espacios normalmente en vez de cuatro bueno porque el html vamos a ir intentando cada uno de los elementos que están

contenidos dentro de otros elementos y eso va a crear una estructura que va a ser bastante profunda vamos a tener muchos niveles de intenta acción y con dos espacios estamos ahorrando espacio horizontal para que se pueda ver mejor y aún así se detecta a la jerarquía fácilmente con dos espacios ahora que ya tenemos esto configurado y puedes ver que aquí vamos a usar dos espacios vamos a continuar con nuestro próximo tema vas a aprender cómo puedes especificar el idioma de la página en esta etiqueta que tenemos aquí html esto lo veremos en la próxima parte

vamos a ver cómo puedes especificar el idioma de la página en html esto es muy importante para mejorar la accesibilidad de la página y para que el browser sepa cuál es el idioma de la página se recomienda siempre incluyendo dentro de la etiqueta de apertura vamos a agregar algo que se llama un atributo vamos a hablar más de los atributos más adelante pero básicamente un atributo simplemente especifica algo sobre ese elemento en este caso vamos a especificar el idioma de todos los elementos dentro de el elemento raíz prácticamente todos los elementos de la página web

estamos diciendo que van a tener este idioma el atributo se llama line que es la abreviación de language en inglés que significa idioma a ese atributo le vamos a asignar el valor y ese tiene que estar entre comillas todo valor que vamos a especificar aquí de un atributo tiene que estar entre comillas y ese valor es ese en este caso porque es el código que le asignamos al idioma español en los estándares web y en los estándares internacionales veamos una referencia de estos códigos si buscamos en wikipedia una lista de los códigos que se asignaron

a cada uno de los idiomas aquí podemos ver la lista si buscamos en la lista español en inglés esperes aquí lo tenemos en español y su código es efe ese es el código que nosotros vamos a escribir aquí entre comillas si fuera inglés sería en inglés ese es el código que se le asignó genial ya sabes cómo especificar el idioma de la página web en la próxima parte vamos a ver cómo puedes empezar a agregar elementos a tu página web dentro de la etiqueta boring de berlín ahora vamos a comenzar a ver cómo puedes agregar

elementos visibles en tu página web porque hasta ahora lo que hemos agregado al archivo simplemente va a mostrar una página vacía vamos a probar vamos a ver la página en su estado actual si vamos a la carpeta y hacemos doble clic en el archivo index vamos a ver una página vacía pero en realidad esta página no está vacía porque si abrimos las herramientas de desarrolladores de chrome hacemos clic en inspector vamos a ver la estructura html de la página aquí podemos incrementar el tamaño de la letra haciendo clic en control y luego con la ruedita

del mouse del cursor del ratón podemos ver la estructura de la página tenemos nuestro elemento raíz html la etiqueta de apertura y la de cierre y especificamos el idioma de la página también tenemos nuestra declaración del doctor que lo vemos aquí como en inglés luego vemos el ibón y con sus etiquetas de apertura y de cierre puedes ver que si colocamos el cursor en bari vemos aquí una línea naranja en la página el cuerpo si existe pero en este momento está vacío pero vamos a ir agregando el elemento a esta estructura y cómo lo vamos

a hacer bueno vamos a colocar el editor de código y la página al lado a lado para ver cómo se actualiza podemos ver los lado a lado si eliminamos este elemento de nuestro archivo y volvemos a cargar la página puedes ver que no pasó nada la página sigue estando en blanco pero si abrimos las herramientas de desarrolladores de chrome vemos que igual de etiquetaje se agregó ese elemento se agrega automáticamente cuando abrimos la página en el browser así que por ahora la vamos a omitir y vamos a hablar más sobre head y qué elementos podemos

incluir en head más adelante vamos a trabajar con boyle dentro de x y vamos a ver un tipo de elementos llamados encabezado o título podemos crear un encabezado en inglés un guerín con la etiqueta h seguido de un número entre 1 y 6 necesitamos la etiqueta de apertura y la etiqueta de cierre y te voy a colocar un poco más grande aquí la etiqueta de apertura tener los paréntesis angulares y dentro h1 este es el nivel más grande de encabezado va a tener el tamaño de letra más grande y va a tener un formato ya

específico incluyendo el texto en negrita vamos a ver hola mundo vamos a escribir este mensaje dentro de las etiquetas y este va a ser el contenido de nuestro encabezado de nuestro título si volvemos a cargar la página vemos aquí que aparece el texto hola mundo si escribimos eso mismo pero dentro de una etiqueta h2 un elemento h 2 y volvemos a cargar la página puedes ver que la letra está más pequeña así es que podemos ir definiendo este tipo de elementos en nuestra página y ya tenemos un formato estándar h3 es aún más pequeño h

4 más pequeño todavía pero vemos que si se mantiene el formato en negrita h 5 y finalmente h 66 niveles si luego de h 6 intentamos colocar una etiqueta llamada h 7 para un elemento h 7 veamos qué pasa ya el texto no tiene un formato específico no es un título no está en negrita no sigue esta secuencia solo podemos incluir los números entre 1 y 6 y así es como creamos un encabezado en nuestra página recuerda las etiquetas h 1 hasta h 6 etiqueta de apertura etiqueta de cierre y dentro de las etiquetas el

contenido del título del encabezado bien en la próxima parte vamos a ver cómo puedes crear un párrafo el elemento que usamos cuando queremos incluir texto o un párrafo en nuestra página web bien ahora vamos a ir creando la estructura definitiva de nuestra página con los elementos vamos a crear una aplicación de gatos para eso tenemos que borrar estos encabezados estos títulos tenemos nuestra página en blanco y vamos a crear un título con el elemento h 2 y luego vamos a crear un párrafo para crear un párrafo usamos este elemento el elemento p en html tenemos

una etiqueta de apertura y una etiqueta de cierre y dentro de esas etiquetas vamos a escribir el contenido del párrafo el texto haz clic aquí para ver más imágenes de gatos para poder ver el código mejor con mayor tamaño vamos a ocultar esta barra esta barra se llama la activity by la barra de actividad podemos hacer clic derecho aquí en algún lado de la barra y luego hacer clic aquí esconder la barra de actividad y vemos cómo se esconde para volver a mostrar la hacemos clic en view a france y luego yo activity by y

por ahora vamos a ocultar aquí vemos haz clic aquí para ver más imágenes de gatos si volvemos a cargar la página vemos el texto que tenemos aquí y así es como creamos un párrafo en html con la etiqueta p recuerda apertura cierre y el contenido para mostrarte cómo podemos usar esta etiqueta para crear varios párrafos aquí he copiado y pegado voy a pegar aquí en el editor de código un texto que normalmente se puede usar para como para guardar el lugar del texto definitivo sirve como lo que decimos en inglés un place holder llamado lawrence

gibson un texto tomado de escrituras antiguas pero en este caso ha sido adaptado para gatitos para seguir con el tema de nuestra aplicación aquí estamos creando párrafos pero puedes ver que esos párrafos son muy muy largos así que tendríamos que desplazarnos horizontalmente para ver su contenido lo que podemos hacer en este caso es usar un atajo de teclado alt z cuando haces clic en alt z el código se adapta al tamaño de tu ventana así que puedes ver que todo el contenido ahora está presentado verticalmente para que no tengamos que desplazarnos horizontalmente es muy útil

cuando necesitas como en este caso tener lado a lado tu página y tu código recuerda al z y si vuelves a hacer clic en alt z se revierte el efecto y vuelves a tener todo en una sola línea aunque entonces aquí puedes ver cada uno tiene su etiqueta p para cada uno de los párrafos y si volvemos a cargar la página puedes ver que tenemos una separación entre estos elementos cada uno es un párrafo tiene su separación y así podemos ir creando el contenido de la página si la página requiere tener texto genial ya sabes

cómo trabajar con párrafos en html con la etiqueta p así que la próxima parte vas a aprender cómo puedes conseguir más información sobre cada uno de estos elementos en la documentación de la red de desarrolladores de mozilla vas a aprender paso a paso cómo leerla y cómo conseguir más información allí en la próxima parte la documentación es muy importante porque te permite conseguir cosas nuevas sobre el lenguaje aprender más sobre cómo puedes usar cada uno de sus elementos y de sus propiedades de sus capacidades como lenguaje así que vamos a ir a la documentación de

la red de desarrolladores de mozilla donde puedes conseguir información sobre html css y javascript para eso aquí debes buscar mdm web box también lo puedes escribir en google o que directamente en cualquiera de los dos el resultado es exactamente el mismo y aquí llegamos a web box vamos a entrar allí y puedes ver que la página inicialmente está en inglés pero cuando ves que aquí que tenemos es la s esto significa que cuando busquemos en esta barra los resultados van a estar en español si no está esta parte luego el punto org simplemente debes agregarse

haces clic en enter y vuelves a cargar la página ahora si nosotros buscamos por ejemplo la etiqueta p aquí podemos ver que el idioma de la página actualmente está configurado a español así que los resultados que obtenemos están en español en este caso queremos aprender más sobre la etiqueta p así que vamos a hacer clic aquí en este enlace que nos lleva a su documentación en español comenzamos leyendo sobre esta etiqueta definición el elemento p párrafo es el apropiado para distribuir el texto en párrafos sus etiquetas son p y luego la de cierre que tenemos

aquí la de cierre es opcional vemos más información sobre este elemento y vemos sus posibles atributos ya hablamos sobre el atributo online que especifica el código de idiomas por ejemplo si tenemos un párrafo en otro idioma en nuestra página que no es el idioma principal de la página podemos agregar ese atributo al párrafo también tenemos otros atributos sobre los cuales vamos a hablar durante el curso pero como puedes ver la documentación es muy útil además tenemos un ejemplo de cómo podemos usar esta etiqueta o este elemento en nuestra página así podemos conseguir información sobre cualquier

elemento html que necesitemos vamos a llegar al artículo que vimos cuando creamos el archivo index html hacemos clic en enter y aquí llegamos al artículo de docta en el que acabamos de ver hace algunos minutos en el curso la documentación es muy útil y vamos a estar refiriéndonos a esta documentación para html css y luego en un próximo curso también para ya busquets así que es importante que te familiarices con la documentación recuerda para que los resultados estén en español aquí puedes agregar es las islas también si no está configurado en español puedes hacer clic

en esta opción aquí te va a dar los distintos idiomas te va a decir los distintos idiomas español inglés o ambos genial ya sabes cómo leer la documentación de la red de desarrolladores de mozilla en la próxima parte vamos a ver algo muy importante los comentarios te veo y cuando estés listo lista continúa con el curso ahora vamos a hablar sobre los comentarios en html en html puedes crear un comentario vamos a colocar nuestro editor de código en pantalla completa para verlo con más detalle puedes crear un comentario de esta forma primero un paréntesis angular

de apertura luego un signo de exclamación seguido de dos guiones el editor de código automáticamente lo completa con el cierre del comentario que son dos guiones seguido de un paréntesis angular y dentro de estas dos combinaciones de símbolos dentro de estas dos estructuras vamos a escribir el contenido del comentario por ejemplo un comentario puede ser un recordatorio de algo que está pendiente por hacer en el archivo por ejemplo un youtube en inglés significa como una tarea pendiente por hacer youtube agregar enlace a imágenes de gatos digamos que queremos agregar aquí un enlace a imágenes de

gatos pero todavía esta tarea está pendiente no agregamos un comentario y así nos recordamos a nosotros mismos oa otros desarrolladores con los que estemos trabajando que esa es una tarea pendiente ese es el propósito de los comentarios con los comentarios podemos explicar el código podemos agregar exactamente esos comentarios que sean útiles para nosotros como desarrolladores o para otros desarrolladores que estén viendo nuestro código los comentarios no son como tal parte del código o de la estructura final de la página solamente están allí para dar ese mensaje cuando vemos el archivo en un editor de código

no afectan para nada el resultado veamos esto si volvemos a cargar la página vemos que todo sigue igual pero tenemos este comentario aquí cuando veas una línea gris normalmente se coloca en gris dependiendo del tema de colores que escojas eso es un comentario hay un atajo del teclado que puedes usar para convertir una línea en un comentario esto puede ser útil cuando quieres experimentar o probar cómo se vería la página things una línea de código de html o si un bloque de código también para hacer esto simplemente seleccionas la línea y haces clic en control

seguido de una barra inclinada si vuelves a usar este atajo de teclado remueves el comentario aquí puedes verlo comentario código comentario código si esta línea es un comentario eso significa que no va a aparecer en el resultado final veamos si volvemos a cargar la página ahora vemos que esa línea no aparece aquí pero si quitamos el comentario aquí lo puedes ver genial también si quieres comentar un bloque de código por ejemplo digamos que no tenemos este comentario y queremos comentar estas tres líneas también hacemos clic en control y la barra inclinada y podemos ver que

todos los elementos de esas líneas se vuelven parte del comentario si guardamos el archivo y volvemos a cargar la página vemos una página vacía porque ya no tenemos ningún código html dentro de la etiqueta by y aquí vamos a mantener nuestro comentario genial ya sabes cómo trabajar con comentarios en html paréntesis angular signo de exclamación -- y luego jong yong y paréntesis angular genial ahora vamos a ver una etiqueta que nos va a permitir decirle al browser dónde está el contenido principal de nuestra página lo veremos en la próxima parte del curso ahora vamos a

trabajar con el elemento main en español main significa principal esa etiqueta va a decirle al browser dónde está ubicado el contenido principal de nuestra página web antes de agregar mail a nuestra página vamos a crear otro título otro encabezado ese título va a decir imágenes de gatos que en este momento tenemos tres elementos el título principal otro título más pequeño y aquí tenemos el párrafo con un contenido el contenido principal de la página va a estar dentro de la etiqueta main que tenemos aquí tenemos su etiqueta de apertura y tenemos su etiqueta de cierre puedes

ver que es de cierre porque tenemos la barra inclinada aquí todo el contenido principal de la página debería estar dentro de la etiqueta main así que vamos a borrar la etiqueta de cierre de aquí y vamos a colocarla aquí luego de todos los elementos del contenido principal de la página que hasta este momento serían estos dos elementos no vamos a considerar el título principal como parte del contenido principal de la página en este caso también podrías incluirlo pero qué ocurre en este momento no estamos especificando con la intención que estos elementos van a pertenecer a

main stand intentados al mismo nivel puedes ver que todos están aquí alineados debemos intentar los un nivel más hacia la derecha y así puedes ver fácilmente que estos elementos pertenecen a maine genial si volvemos a cargar la página puedes ver que no hubo ningún cambio pero si tenemos un cambio en la estructura de nuestra página veamos más sobre main y por qué deberíamos usarlo en html si vamos a la red de desarrolladores de mozilla podemos hacer clic aquí en main y vamos a este artículo main el elemento html main representa el contenido principal de la

etiqueta point de ese documento o aplicación el área principal del contenido consiste en el contenido que está directamente relacionado o se expande sobre el tema central de un documento o la funcionalidad central de una aplicación esto es muy importante este contenido debe ser único al documento excluyendo cualquier contenido que se repita a través de un conjunto de documentos como barras laterales enlaces de navegación información de los derechos de autor o cualquier otra parte de la página que si se repita no debe haber más de un elemento main y el elemento main no debe ser descendiente

de otro elemento como artículo como führer como xerez no debe ser descendiente no debe ser parte de otro elemento aquí estamos usando main para el contenido principal de nuestra página genial ya sabes la importancia de main ahora que ya tenemos una estructura un poco más elaborada en nuestra página web vamos a hablar un poco sobre la importancia de la intenta ción en html cuando comenzamos a escribir el archivo hicimos un cambio aquí en la configuración para usar dos espacios para cada nivel de intenta ción como puedes ver aquí usamos dos espacios dos circulitos aquí para

cada nivel pero porque dos espacios y para que es importante intentar nuestro código en html veamos funcionalmente en html los espacios no tienen un propósito real funcionalmente no va a haber ninguna diferencia si escribimos este archivo de esta forma o si simplemente escribimos esto así todo al mismo nivel de intenta ción si volvemos a cargar la página podemos ver que no hubo ningún cambio pero si hubo un cambio importante en la facilidad de lectura del archivo este archivo no es para nada fácil de leer no podemos ver inmediatamente no podemos identificar cuál es la estructura

o la jerarquía entre los distintos elementos de la página y esto es simplemente una página muy sencilla imagínate una página real en la página que esté ya publicada en internet imagínate lo difícil que sería leer ese archivo si no está intentado adecuadamente por eso es que necesitamos los dos espacios los dos espacios por cada nivel de intenta ción como tenemos aquí esto sería la intenta acción adecuada para el archivo usamos normalmente dos espacios en lugar de cuatro también se podría usar cuatro es válido funcionalmente pero tendemos a usar dos en html porque es más conciso

como puedes ver la estructura cada vez se va haciendo más profunda o tiene más elementos anidados uno dentro de otro así que usamos dos porque nos permite ver la jerarquía y aún así es conciso no agregamos espacios innecesarios además dos espacios es lo recomendado por la guía de estilo de coco y por el consorcio web web 13 si vemos la guía de estilo de google para html y css en esta sección que tenemos aquí hablan sobre la intenta ción y nos dicen que deberíamos intentar usando dos espacios a la vez para cada nivel de intenta

ción y también nos advierten que no debemos mezclar espacios y tabs para intentar nuestro código si usamos espacios debemos usar espacios en todo el archivo y se recomienda dos espacios bien ya sabes por qué es importante intentar tu código en html no hay un impacto funcional sobre el resultado sino que nos permite escribir archivos que son más fáciles de leer y por lo tanto más fáciles de crear de mantener y de expandir si queremos trabajar con nuestra estructura existente y agregar nuevos elementos de así que pasemos a nuestra siguiente parte del curso cómo podemos incluir

una imagen en nuestra página vamos a tener un gatito aquí lo veremos en la próxima parte del curso así que te espero allí genial muy buen trabajo hasta ahora veamos otros tipos de elementos con el que puedes trabajar imágenes las imágenes se han vuelto una parte central de la web que conocemos hoy en día primero que todo para crear una imagen debes usar la etiqueta img vamos a colocar nuestro editor de código en pantalla completa para que podamos verlo con más detalle img esta etiqueta es una abreviación de emails en inglés esa etiqueta es una

etiqueta que se cierra automáticamente no necesitamos escribir una etiqueta de cierre para la imagen y también es opcional agregar esta barra inclinada al final es opcional debemos especificar dónde está la imagen que queremos presentar por ejemplo si queremos tomar la imagen de internet tenemos que especificar aquí entre comillas donde estaba ubicada esa dirección web https en este caso vamos a colocar una imagen de un gato alojada en https vitali y luego fsc frigor gama de daxing cat esta es una imagen que ya está alojada en internet por fritz code cam ese es el valor que

le estamos asignando al atributo s rc porque src porque el inglés está es una abreviación de short course en español significa la fuente la fuente donde estamos tomando esa imagen es esta dirección web bien vamos a ver cómo se presenta la imagen en nuestra página aquí puedes ver que tomo un segundito y vemos la imagen tenemos nuestro gatito esa es la imagen que estamos incluyendo a partir de esta dirección web genial no un atributo importante que debería tener cualquier imagen en html es el atributo alto porque out es una descripción alternativa para la imagen que

se va a presentar si por ejemplo la imagen no se descarga correctamente por una falla en internet o si el usuario está usando un lector de pantalla ese texto se va a leer para darle mayor accesibilidad a los usuarios a nuestra página vamos a escribir una descripción de la imagen un lindo gato naranja recostado sobre su espalda bien tenemos nuestro atributo out y para verlo en acción porque si vuelves a cargar la página no va a haber ninguna diferencia lo que tenemos que hacer es por un segundo interrumpir nuestra conexión a internet voy a hacer

exactamente eso ya lo desactiva y ahora si volvemos a cargar la página vemos nuestra descripción aquí un lindo gato naranja recostado sobre su espalda y vemos este simbolito que nos indica que allí había una imagen pero no se descargó adecuadamente esa es la importancia de up le permite al usuario tener una alternativa en texto de la imagen que se supone que debería estar allí y en el caso de un lector de pantalla esta sería la descripción que se daría para la imagen digamos que no incluimos este atributo digamos que lo removemos completamente desde nuestra imagen

y volvemos a cargarla sin conexión a internet aquí vemos ese símbolo pero ya lo tenemos una descripción y eso va a afectar la experiencia del usuario siempre se debería incluir este atributo para todas las imágenes que incluyas en tu página html bien si volvemos a conectarnos a internet volvemos a ver la imagen y aquí volvemos a incluir el atributo out genial ya sabes cómo incluir una imagen que está ya alojada en internet pero como puedes incluir una imagen desde una carpeta en tu dispositivo veamos como lo podemos hacer si en nuestra carpeta curso de html

y css donde tenemos nuestro archivo index html también agregamos una imagen digamos lasaña ya vas a ver por qué estamos incluyendo la hazaña podemos incluir esta imagen en nuestra página web veamos cómo si volvemos a presentar la barra de actividad que tenemos aquí a la izquierda podemos abrir el explorador y vemos la imagen lasaña jpg no estoy usando n porque normalmente usar caracteres que no sean estándar en inglés pueden resultar en errores inesperados así que en este caso no voy a usar la ñ para el nombre de la imagen la podemos ver aquí vamos a

necesitar otra etiqueta de imagen pero en este caso en source en este atributo en lugar de escribir una dirección web vamos a indicar dónde está ubicada esa imagen respecto a nuestro archivo html si está en la misma carpeta podemos simplemente usar su nombre lasaña jpg e incluso la vemos aquí como una opción para auto completarlo veamos el resultado de nuestra página aquí podemos ver la imagen si volvemos a cargar la página vemos la lasaña perfecto ahora qué pasa si la imagen está dentro de otra carpeta digamos que creó una carpeta llamada imágenes ahora mueva esa

imagen a la carpeta confirmó que sí quiero moverla y ahora ves que la imagen está dentro de esa carpeta podemos confirmarlo si vamos a la carpeta recuerda que tratamos de no introducir caracteres que no sean estándar en inglés por eso no estoy incluyendo el acento aquí en imágenes cuál sería el cambio que debemos hacer para que esta imagen se reconozca porque si intentamos otra vez mostrar la página vas a ver que en lugar de la lasaña vemos que allí debería haber estado una imagen pero no se encontró porque ahora la imagen no está directamente en

la misma carpeta del archivo html está en otra carpeta así que debemos especificar el nombre de esa carpeta aquí le estamos diciendo a nuestro archivo la imagen está en la carpeta imágenes que está ubicada en la misma carpeta que el archivo html y luego el archivo está dentro de esa carpeta eso es lo que hacemos aquí con esta barra decimos dentro de esta carpeta está este archivo si guardamos nuestro archivo html y volvemos a cargar la página aquí podemos ver nuestra lasaña también debemos agregarle un atributo alt a esta imagen la hazaña en este caso

para los atributos si podríamos usar la ñ para que el lector de pantalla se está configurado en español puede pronunciar la letra eñe genial ya sabes cómo crear un elemento imagen y cómo tomar esa imagen de internet o de una carpeta en tu dispositivo siempre recuerda incluir también el atributo alt ahora pasemos a otro elemento muy importante sin el cual la web no sería lo que es en este momento los enlaces continuamos vamos a ver cómo puedes crear un enlace en html en html un enlace se crea usando la etiqueta a hank en inglés por

eso usamos la letra recuerda a enlace podemos por ejemplo convertir una parte de nuestro texto en un enlace eso es muy como si tenemos aquí un párrafo y queremos convertir parte de ese texto en un enlace por ejemplo la parte que dice imágenes de gatos simplemente vamos a colocar esto en pantalla completa para verlo con más detalle simplemente escribimos la etiqueta a la de cierre debe estar al final del texto que queremos convertir en un enlace vamos a colocar esto en una sola línea ya colocar lo más grande para poder ver los detalles este es

el texto que vamos a convertir en un enlace ahora si vemos la página y la volvemos a cargar veamos qué pasa todavía el texto se muestra exactamente igual no hay ningún cambio no vemos algún cambio visible o funcionan en el texto porque porque no hemos especificado a dónde queremos que lleve ese enlace en esta parte vamos a ver los enlaces que llevan a otras páginas web por ejemplo frito el campeón español si vamos a picar el campeón español en google chrome y copiamos esa dirección web esa página web debemos especificar la aquí como el valor

del atributo h ref el valor de h ref representa el destino de ese enlace en este caso el destino va a ser la página de freak o camps así que aquí tenemos el resultado final veamos cómo se ve en nuestra página ahora puedes ver que aquí el formato del texto cambio ahora está subrayado y lo vemos en morado porque ya yo en mi dispositivo ya había ingresado a esa página el color sería un azul si hacemos clic en él vamos a llegar a la página de destino freak o el camp en español genial no pero

en este momento nuestro enlace nos está llevando en la misma pestaña de nuestra página a la página de destino free gorka puedes ver que todo ocurre en la misma pestaña y normalmente lo que queremos es que se abra el enlace en una pestaña nueva cómo podemos hacerlo veamos aquí lo único que tenemos que agregar a el elemento del enlace es otro atributo llamado targets target es un atributo que nos va a permitir especificar donde queremos que se abra ese enlace su valor si es bajo plank significa que queremos abrir ese enlace en una pestaña nueva

no importa el orden en el que especificamos los atributos ok si una etiqueta tiene más de un atributo todos van a ser considerados no importa el orden vamos a ver cuál es el efecto de este cambio en nuestra página si volvemos a cargar la página visualmente no hay una diferencia pero al hacer clic en el enlace vemos que se abre una nueva pestaña y volar aquí vemos la página en una pestaña nueva y nos mantenemos en nuestra página original por motivos de seguridad también se recomienda agregar este valor que tenemos aquí este atributo red este

valor este atributo nos permite prevenir un ataque llamado nave es un tipo de ataque en el que la pestaña de origen se reemplaza para que el usuario ingrese sus datos y eso sería una brecha de seguridad y si volvemos a cargar la página podemos ver que no se afecta para nada el comportamiento bueno ya tenemos nuestro enlace aquí que nos lleva a una página externa recuerda comenzamos con una etiqueta de apertura y luego hr que es donde vamos a llegar al hacer clic en el enlace luego el atributo target con el valor planck para abrir

en una pestaña nueva y el atributo orbe o con estos dos valores separados por un espacio para prevenir ataques y aquí tenemos la etiqueta de cierre todo esto aplica para enlaces externos que nos llevan a otra página como por ejemplo freak o el campeón español pero también podemos crear enlaces internos dentro de nuestra página y también podemos convertir imágenes en enlaces es lo que vamos a ver en las próximas partes del curso así que continuemos veamos cómo puedes crear enlaces que nos llevan a secciones o partes específicas de la misma página web primero que todo

vamos a expandir un poco el contenido de nuestra página con él loren ipsum con temática de gatos que usamos en un ejemplo anterior eso nos va a permitir saltar de una parte de la página a otra puedes ir a la página de flickr cam punto org islas español español haces clic aquí empieza es gratis puedes crear una cuenta puedes ingresar al currículum certificación de diseño web responsivo y aquí vamos a la parte que nos permite crear enlaces hacia secciones internas de una página aquí conseguimos los párrafos están en inglés los vamos a usar solo provisionalmente

porque el idioma de nuestra página especifica que están en español podemos cambiar el idioma de estos elementos individualmente pero como esto es solo para fines de demostración durante esta parte en particular del curso no lo vamos a agregar vamos a intentarlo con tres niveles de tentación para que estén dentro del elemento main podemos separar los párrafos también con una línea en blanco se recomienda usar una línea en blanco para separar partes importantes de la página o grupos de elementos que no estén relacionados en general para hacer que la estructura de la página sea más fácil

de identificar y yo creo que en este caso ayuda a agregar una línea en blanco entre cada uno de los párrafos si volvemos a cargar la página aquí podemos ver los distintos párrafos también vamos a agregar un título digamos h 3 párrafo 1 luego vamos a cargar la página y aquí vemos párrafo 1 párrafo 2 estamos simplemente agregando títulos para poder usarlos en nuestros enlaces internos párrafo 1 párrafo 2 párrafo 3 y párrafo 4 claro en tu página web esto estaría más específico sería ya el contenido de tu página si quisieras especificar el idioma del

párrafo puedes agregar este atributo en su etiqueta de apertura su idioma es inglés así que lo podemos especificar aquí en los elementos individuales porque no es el idioma que especificamos aquí arriba pero para fines de demostración temporalmente no vamos a incluir ese atributo que vamos a crear nuestro enlace interno digamos que queremos crear un tipo de índice antes de la imagen del gatito vamos a escribir párrafo 1 luego párrafo 2 nuevo párrafo 3 y párrafo 4 que vamos a tener sólo cuatro párrafos aquí vamos a crear en las seis que nos lleven al título de

cada uno de los párrafos para que cuando hagamos clic encima de ese enlace inmediatamente bajemos a donde está ubicado ese párrafo en la página veamos cómo lo podemos hacer como queremos que sean enlaces en lugar de una etiqueta p tenemos que escribir una etiqueta para convertirlo en un enlace vamos a hacerlo para cada uno de estos elementos y ya vas a ver que vamos a especificar como el destino aquí lo tenemos y si volvemos a cargar la página puedes ver que todavía en este momento no se muestran como enlaces tenemos que especificar el destino cuál

va a ser el destino el destino va a ser una parte interna de la página por ahora simplemente vamos a colocar un número el numeral funciona para crear enlaces que no te llevan a ningún lado simplemente están allí para mostrarse mostrarle al usuario que es un enlace pero todavía no funciona son muy útiles durante el proceso de desarrollo ves que si hacemos clic en ellos no vamos a ningún lado para poder desplazarnos dentro de la página tenemos que asignarle al elemento una identificación única eso lo logramos con este atributo vamos a presentar el código aquí

el atributo se llama haití en inglés haití significa identificador único es como un nombre que le vamos a asignar a ese elemento es único para ese elemento en toda la página web en este caso vamos a asignarle el haití párrafo uno entre comillas y escribimos ese haití para convertir este enlace en un enlace interno que nos lleve hasta este título párrafo uno tenemos que especificar como su destino en h ref su aire párrafo 1 puedes ver que estamos conectando los porque estamos aquí identificando los de forma única a ese elemento decimos que su destino debe

ser dónde está este elemento en la página si guardamos el archivo y volvemos a cargar la página hacemos clic en nuestro enlace y vamos directamente a ese elemento párrafo 1 que tiene ese de esta identificación única vamos a hacerlo nuevamente para cada uno de los párrafos tenemos que agregarles el atributo haití con un identificador único para el párrafo 2 asignamos creamos este de párrafo 2 para el párrafo 3 dyn párrafo 3 puedes ver que no estoy incluyendo el acento para no incluir caracteres que no son estándar en inglés en este caso si los teníamos que

incluir porque es el texto que se va a mostrar al usuario pero en la parte interna que no se va a mostrar podemos omitir y luego para párrafo 4 genial ahora ya cada uno tiene su haití y podemos volver aquí a los enlaces y asignarles su destino párrafo 3 y luego párrafo 4 guardamos el archivo volvemos a cargar la página y si vamos aquí si subimos aquí podemos ver que todos son enlaces y el único que vemos aquí en morado es el que ya hicimos clic para el párrafo 1 luego para el párrafo 2 si

hacemos clic antes lo veíamos en azul y ahora lo vemos en morado y llegamos al párrafo 3 y finalmente al párrafo 4 en este caso los títulos no quedan aquí en el límite superior porque ya estamos en el final de la página no podemos bajar más para llegar a esos elementos pero igual se presentan en la página en un rango visible así que ya sabes cómo crear enlaces internos en tu página web recuerda simplemente le asignas una identificación una identificación única para ese elemento un nombre que puedes usar para referirte a ese elemento en particular

con el atributo haití y de y luego cuando vas a crear el enlace te refieres a ese haití con signo de numeral un hashtag genial en la próxima parte vamos a ver cómo puedes lograr que las imágenes de tu página web también funcionen como enlaces esto va a ser muy útil y ya vas a ver cómo podemos combinar ambas etiquetas la de imagen en la cee bien ahora vamos a ver cómo puedes convertir estas imágenes que tenemos aquí específicamente esta imagen del gatito en un enlace para eso lo primero que vamos a hacer es eliminar

estos enlaces y estos párrafos todos estos elementos no van a ser parte de la versión final de nuestra página volvemos a cargar la página y aquí puedes ver solo las imágenes y estos títulos y este párrafo genial ahora cómo podemos hacer que esta imagen actúe como un enlace en este momento si hacemos clic sobre la imagen no ocurre nada y también observa que el cursor se mantiene intacto no cambia pero cuando sea un enlace este cursor se va a volver una manito cómo podemos lograr ese efecto primero tenemos que conseguir el elemento que queremos convertir

en un enlace en este caso este es el elemento de la imagen un lindo gato naranja recostado sobre su espalda vamos por un momento a presentar el código en pantalla completa la etiqueta del elemento de la imagen se va a mantener exactamente igual lo único que debemos hacer para convertir esa imagen en un enlace es rodearla con las etiquetas del elemento enlace la etiqueta a la etiqueta de la imagen va a estar rodeada por la etiqueta de apertura y la etiqueta de cierre para ese elemento y vamos a especificar el destino como un atributo aquí

lo tenemos digamos que queremos que la imagen nos lleve a áfrica un campo org extras español copiamos y pegamos esa dirección web de nuestro navegador de nuestro browser y lo asignamos como el valor del atributo h breve nota qué aquí estamos creando un enlace ok estamos creando un enlace al rodear la etiqueta de la imagen con la etiqueta de enlace y le estamos diciendo al browser a dónde queremos ir si hacemos clic sobre ese enlace volvemos a cargar la página y ahora puedes ver como el cursor cambia a una manito cuando está sobre la imagen

si hacemos clic sobre la imagen vamos directamente áfrica organ punto org es nadie español y podemos volver a nuestra página anterior también todo lo que aprendiste sobre enlaces aplica para este tipo de enlace imágenes que actúan como enlaces puedes abrir los en una pestaña nueva con el atributo target guión bajo like aquí puedes volver a cargar la página y puedes ver que se abre en una pestaña nueva y también puedes agregar el atributo red por seguridad estos valores no operar y no reefer estos dos valores para el atributo real si ponemos esto en pantalla completa

puedes verlo más claro que simplemente estamos creando una como lo hacíamos normalmente pero en lugar de texto tenemos dentro del enlace una imagen y todo va a funcionar exactamente igual genial ya sabes cómo crear enlaces a partir de imágenes eso es muy muy importante y es comúnmente usado hoy en día cuando comenzamos a hablar sobre los enlaces en html nombramos un tipo de enlace que es muy útil mientras estás creando la estructura de tu página web los enlaces muertos serían la traducción literal en inglés se llaman the links son enlaces que no llevan a ningún

lado simplemente están allí para mostrarnos cómo se vería un enlace en ese lugar específico de la página y luego cuando tengamos el destino podemos simplemente reemplazarlo en el atributo h raf son muy útiles mientras estamos construyendo la página veamos como los puedes crear aquí tenemos dos enlaces uno en el texto imágenes de gatos y otro en la imagen para convertir esos enlaces en enlaces muertos o enlaces que nos llevan a ningún lado simplemente tendríamos que borrar esta dirección de destino y escribir un símbolo de numerar escribir el numeral el hashtag lo reemplazaría mos en ambos

enlaces y así el browser no va a saber a dónde debe llevarnos simplemente va a interpretar que el enlace no lleva a ningún lado vamos a volver a cargar la página y si hacemos clic en el enlace simplemente nos abre nuevamente esa página en una nueva pestaña porque estamos indicando aquí con target que queremos que el resultado se abra en una pestaña nueva si no queremos que se abra en una pestaña nueva todavía por ejemplo podemos quitar estos atributos simplemente dejamos hr cargamos otra vez la página y como puedes ver el enlace al hacer clic

no hace nada cuando ni siquiera lo estamos abriendo en una pestaña nueva vamos a revertir este cambio que hicimos y vamos a probar la imagen si hacemos clic sobre la imagen abrimos la misma página en una pestaña nueva y también podemos eliminar estos atributos guardamos la página y así al hacer clic sobre la imagen no vamos a ningún lado revertimos el cambio nuevamente para así abrirlo en una pestaña nueva y ahora tenemos nuestros enlaces muertos enlaces que nos llevan a ningún lado eso es muy útil por ejemplo cuando el destino de ese enlace es una

página que todavía no has completado o que no has creado o si todavía no estás completamente seguro segura de a dónde debería llevar ese enlace es muy útil durante el proceso de desarrollo web genial ya sabes cómo crear enlaces muertos en html ya cubrimos los tipos principales de enlaces enlaces externos que llevan otras páginas web enlaces dentro de la misma página enlaces con imágenes y enlaces muertos o que no funcionan como tal como enlaces así que vamos a comenzar a ver otro tipo de elementos en html que es muy útil las listas listas ordenadas y

listas no ordenadas las veremos en la próxima parte buen trabajo por llegar hasta aquí continuemos comenzamos con las listas no ordenadas cuando creamos una de estas listas vamos a ver viñetas para cada uno de los elementos de la lista por ejemplo vamos aquí abajo de nuestras imágenes a crear una lista enumerando las cosas que los gatos aman y que los gatos odian vamos a crear una lista no ordenada para las cosas que los gatos aman así que vamos a crear aquí un encabezado listas de gatos y luego aquí vamos a crear un párrafo que diga

cosas que los gatos aman dos puntos vamos a volver a cargar nuestra página y aquí vemos el texto tú vas a ver este texto y estas imágenes más pequeñas en tu navegador porque yo aquí tengo el zoom en 150 puedes bajarlo o subirlo dependiendo de lo que necesites para ver en este caso para que sea más fácil ver el resultado en dispositivos móviles aumente el zoom a 150 ok aclarado esto vamos a continuar con nuestra lista de cosas que los gatos aman para crear una lista no ordenada la clave es usar esta etiqueta este elemento

y el l proviene del inglés and other list que significa lista no ordenada cuando creamos este elemento debemos especificar cada uno de los elementos de la lista eso lo hacemos con el elemento l y que en inglés significa list ait en el elemento de la lista en español para cada uno de los elementos de la lista debemos crear una etiqueta de apertura y una etiqueta de cierre de tipo elegí bien esas etiquetas van a estar anidadas o contenidas dentro del elemento de lista no ordenada eso es lo que le dice al browser que es debe

colocar viñetas para cada uno de estos elementos ya vas a ver el resultado vamos a escribir lo primero que los datos aman es menta gatuna es sorprendente pero si es una planta que les encantan los gatos puedes investigar más sobre esa planta en internet luego los apuntadores láser y finalmente la lasaña genial ya tenemos nuestra lista también podemos eliminar este espacio esta línea en blanco porque estos dos elementos están relacionados tenemos el título y la lista que corresponde a ese título así que podemos agruparlos lógicamente y no incluir un espacio entre ellos solo en el

archivo eso no va a tener ningún impacto en su presentación si cargamos nuevamente la página aquí podemos ver cosas que los gatos aman y los tres elementos menta gatuna apuntador slasher y lasaña por eso es que teníamos la imagen de la lasaña aquí ahora puedes ver el propósito de por qué incluimos la imagen de la lasaña en nuestro proyecto por si tenías curiosidad como la imagen de la lasaña debería estar debajo de esta lista porque el último elemento aquí es lasaña vamos a cambiar su ubicación en lugar de estar después de la imagen del gatito

vamos a colocarla después de la lista y puedes ver lo fácil que es hacer cambios en html simplemente copiamos y pegamos este elemento debajo de la lista volvemos a cargar nuestra página y aquí está debajo de la lista de las cosas que los gatos aman exactamente donde la necesitábamos genial y algo que identifica a las listas no ordenadas es el hecho de que aquí tenemos viñetas puedes ver que tenemos viñetas en lugar de números para las listas ordenadas y vamos a tener números en la próxima parte vamos a ver ese tipo de listas así que

continuamos cuando creamos una lista ordenada cada uno de los elementos de la lista tiene un número específico veamos ahora vamos a hacer una lista ordenada para las cosas que los datos o bien en este caso vamos a agregar un párrafo que diga cosas que los gatos odian tenemos dos puntos aquí y vamos a crear nuestra lista ordenada la única diferencia con la estructura de la lista no ordenada que tenemos aquí arriba es que la etiqueta en lugar de ser l va a ser o l o l crea un elemento de tipo order list que significa

lista ordenada en español dentro de ese elemento vamos a tener un elemento les hay terna l y para cada uno de los elementos de la lista en este caso van a ser tres el primero va a ser tratamientos anti pulgas el segundo va a ser truenos y el tercero sorprendentemente va a ser otros gatos a menos que tengas un gatito que es muy muy sociable otros gatos también es algo que los gatos odian ya tenemos nuestra lista ordenada aquí vamos a dejar un espacio para separar y luego vamos a cargar la página nuevamente aquí puedes

ver la lista ordenada cosas que los gatos odian tratamientos anti pulgas truenos y otros gatos ahora en lugar de viñetas vemos números 1 2 y 3 tiene un orden específico en la lista y cada elemento está en su posición específica genial ahora vamos a incluir otra imagen para representar algo que los gatos odian aquí si abrimos el explorador vamos a colocar esto en pantalla completa abrimos el explorador puedes ver que en la carpeta imágenes agregué una imagen llamada gatos punto jpg aquí tenemos la imagen unos lindos gatitos esa imagen la vamos a colocar aquí abajo

creamos un elemento de imagen y recuerda el nombre del atributo src es una abreviación de su verse en inglés que significa fuente en español como está dentro de la carpeta imágenes escribimos imágenes y luego datos punto jpg ahora si vemos la página cerramos aquí el explorador luego cargamos la página aquí vemos la imagen de los gatitos exactamente lo que queríamos y podemos agruparlos lógicamente aquí podemos remover este espacio porque tenemos el título la lista de elementos y la imagen que corresponde al último elemento y esa misma estructura la replicamos aquí para nuestra segunda lista genial

ya sabes cómo crear listas no ordenadas y listas ordenadas recuerda la única diferencia en su estructura es la etiqueta la etiqueta l crea una lista no ordenada y la etiqueta o l crea una lista ordenada y para cada uno de sus elementos debes crear un elemento de tipo l y genial buen trabajo y ya sabes cómo crear listas en html ahora vamos a comenzar una parte del curso en la que vas a ver varias etiquetas que van a ser útiles para personalizar el formato de texto y eso es exactamente lo que vas a ver en

las próximas partes así que continuemos buen trabajo y algo puedes aprender html sólo necesitas entusiasmo constancia y dedicación y si estás viendo el curso sabes que lo tienes sabes que puedes hacerlo continuemos si queremos que parte de nuestro texto se presente en negrita podemos usar la etiqueta strong strong significa fuerte en español vamos a resaltar parte de nuestro texto digamos que queremos que la palabra o diane esté en negrita simplemente vamos a esa palabra en nuestro párrafo y la rodeamos con la etiqueta strong abrimos la etiqueta y luego la cerramos después de el texto la

palabra en este caso no vamos a incluir los dos puntos en este elemento strong vamos a excluirlo sólo la palabra odia no si volvemos a cargar la página ahora vemos que obvian se muestra en negrita y todo gracias al elemento oa la etiqueta strong genial ahora veamos cómo puedes hacer qué parte del texto se muestre en letra cursiva en la próxima parte para que parte del texto se muestre en letra cursiva debemos usar la etiqueta m digamos que en esta lista queremos resaltar la palabra aman con letra cursiva primero buscamos ese elemento en nuestro archivo

html y decimos aquí aman m y luego la cerramos rodeamos solamente el texto que queremos que esté en cursiva de esta forma ahora si volvemos a cargar la página vemos esta parte del texto en letra cursiva cosa que los gatos aman simplemente con rodear el texto con la etiqueta o el elemento m que se usa para enfatizar partes del contenido genial ya sabes cómo hacer que el texto se muestre en negrita y en cursiva también hay otra opción que puede ser útil para ciertas aplicaciones que es mostrar un texto tachado eso lo vamos a ver

en la próxima parte para tachar parte de un texto digamos una palabra tenemos que rodear la palabra con la etiqueta f s viene de la palabra strikes true en inglés que significa tachar vamos a ver si tenemos una lista aquí por ejemplo digamos que en una investigación se descubrió que a los gatos ya no les gusta tanto la lasaña así que vamos a tachar este elemento en la lista pero vamos a tachar los visiblemente no lo vamos a eliminar solamente sino que va a aparecer tachado para eso agregamos este elemento s en nuestro archivo y

rodeamos la palabra con las etiquetas seguimos incluyendo el elemento de la lista esta etiqueta en ley pero rodeamos el texto con ese ahora si cargamos nuevamente la imagen vemos el texto tacha exactamente lo que queríamos recuerda la etiqueta es el equivalente a texto tachado genial ahora vamos a ver cómo puedes agregar una línea horizontal a tu página esto puede ser útil para dividir distintas secciones puedes agregar una línea horizontal a tu página web por ejemplo vamos a agregar una línea antes de las listas de gatos aquí en nuestro archivo html buscamos ese elemento lista de

gatos antes de ese elemento escribimos la etiqueta hr la tenemos aquí esto crea un elemento que se denomina en inglés horizon to blue horizon que en español se traduciría como una línea horizontal si cargamos la página nuevamente vemos aquí esta línea horizontal podemos cambiar su aspecto también cuando comencemos a trabajar con css pero por el momento vemos cómo se presenta esa línea por defecto pero puedes ver que puede actuar como un separador de las distintas secciones de la página recuerda etiqueta hr es un elemento que no requiere una etiqueta de apertura y de cierre sólo

requiere la etiqueta de apertura algo parecido a la etiqueta de imagen que se cierra automáticamente no necesita una etiqueta de cierre bien buen trabajo continúa así ya estamos llegando a la última parte de la sección sobre html del curso en vamos a hablar un poco sobre los formularios y eso es exactamente lo que vas a aprender a hacer en las próximas partes del curso cómo crear estos elementos así que te veo allí para crear un elemento que representa un formulario en nuestra página usamos la etiqueta form form significa formulario en español esta es la etiqueta

que usamos aquí si vamos a necesitar para este elemento una etiqueta de apertura y una etiqueta de cierre porque todos los elementos que sean parte de ese formulario van a estar contenidos dentro del elemento form así que debemos intentar los uno de los elementos que podemos tener dentro de un formulario es un campo de input input es un elemento que vamos a usar para obtener un valor una respuesta del usuario por ejemplo si queremos que el usuario escriba una respuesta o ingrese un valor podemos asignar el tipo de input como text ese sería el valor

texto significa texto en español vamos a pedirle al usuario que ingrese un cierto texto si vuelvo a cargar la página ahora puedes ver al final de la página un campo que nos permite ingresar texto por ejemplo una ese campo cuando nosotros creemos un botón con el texto enviar de tipo super hornet significa más o menos como enviar vamos a tener estos dos elementos de nuestro formulario la respuesta del usuario va a ser ingresada aquí luego hacemos clic en enviar pero a cual destino es sólo especificamos aquí en la etiqueta de apertura de forma ese valor

va a corresponder a action el atributo action tiene un valor correspondiente que es el archivo en el servidor con un nombre específico este atributo action representa la dirección en el servidor de el programa que va a manejar esos datos el archivo que va a manejar esos datos por ejemplo en este caso sería el archivo enviar respuesta en este momento como no tenemos un servidor activo no podemos mostrar exactamente qué va a pasar cuando ingresemos los datos y enviamos nuestras respuestas pero tienes que saber que esta es la dirección del archivo en el servidor vamos a

volver a cargar la página y veamos qué ocurre si ahora hacemos clic en enviar vemos que dice que no se pudo acceder al archivo porque porque si ves aquí arriba estamos tratando de ingresar al archivo enviar respuesta ese archivo estaría alojado en el servidor y manejaría las respuestas del usuario en el formulario genial tenemos una estructura un formulario básico podemos agregarle un texto que le indique al usuario qué tipo de valor debe ingresar aquí porque hasta ahora este campo en blanco no es muy explícito si el usuario debe ingresar un valor no va a saber

necesariamente que valor ingresar vamos a ver cómo puedes hacer esto en la próxima parte si queremos agregar un texto que le dé una pista al usuario sobre qué valor debe ingresar aquí en un campo de texto usamos un atributo que se llama place holder place water puede ser traducido como un marcador de posición estamos marcando o dándole una pista al usuario de que debe ingresar aquí pero apenas el usuario comienza a escribir ese valor va a desaparecer ese atributo lo debemos agregar al elemento inputs el campo de texto vamos a agregar el atributo place holder

y como valor vamos a escribir lo que queremos que se muestre digamos que es la url la dirección web de la foto de tu gato digamos que el formulario nos permite indicar la dirección donde está la foto del gato que se quiere agregar a la base de datos si cargamos la página nuevamente ahora puedes ver ese texto que agregamos el place holder url de la foto de tu gato si hacemos clic todavía se muestra pero al momento que empezamos a ingresar nuestro valor desaparece aparece desaparece aparece y desaparece este atributo play shoulder es muy útil

para crear formularios claros y sencillos de entender para el usuario verás cómo puedes hacer que un campo sea obligatorio para enviar un formulario en la próxima parte del curso así que continuemos en muchos casos vamos a necesitar que un formulario contenga ciertos valores que los campos de esos formularios no estén vacíos por ejemplo aquí si tenemos en este campo vacío y lo hemos escrito ningún valor para la dirección web o la ubicación de la foto de tu gato y hacemos clic era enviar igual se va a intentar enviar esa respuesta aunque el campo esté vacío

aunque no exista ese valor para evitar esto que puede generar errores y normalmente necesitamos un conjunto mínimo de respuestas simplemente agregamos un atributo llamado big wire este atributo nos permite hacer que ese campo sea requerido sea obligatorio ahora sí volvemos a cargar la página y hacemos clic en enviar vemos este mensaje y es fill out games field por favor complete este campo o por favor llene este campo e ingrese algún valor si escribimos ahora un valor por ejemplo hola si se va a intentar enviar los datos del formulario genial simplemente rico ayer solo esa palabra

no necesita ningún valor aunque con incluir esa palabra ese atributo ya estamos indicando que este campo esté input es requerido para enviar el formulario genial ya sabes cómo hacer que un campo sea obligatorio en la próxima parte vamos a ver cómo puedes agregar nuevos elementos al formulario incluyendo botones de radio y casillas de verificación que son muy útiles para recibir una respuesta del usuario darle ya opciones predeterminadas eso lo veremos en las próximas partes del curso así que continuemos vamos a ver un nuevo tipo de elemento input hasta ahora hemos visto solamente el input de

tipo texto pero ese no es el único tipo de elementos que podemos crear para nuestros formularios otro elemento importantísimo es el elemento de tipo radio este elemento nos permite crear un botón de radio también llamado un botón de opción alguna vez has visto ese tipo de formulario en el que solo puedes seleccionar una opción y las opciones son como circulitos que puedes seleccionar con el ratón con el + ese tipo de formulario es el que vamos a crear con este tipo de elementos si volvemos a cargar la página luego de hacer este cambio ahora vemos

este puntito que tenemos aquí que podemos seleccionar con el cursor pero ese puntito como tal no es muy descriptivo tenemos que agregar el texto que corresponde a ese botón de radio aquí lo tenemos por ejemplo esta opción corresponde a interior luego digamos que queremos crear otro botón de radio para otra opción ya sé lo que estás pensando que no estoy cerrando como tal este elemento este elemento se cierra automáticamente no necesita una etiqueta de cierre y aquí estamos escribiendo un texto que no está encerrado por ninguna etiqueta pero ya va a saber qué es lo

que ocurre ya vas a ver cómo vamos a encerrar este texto entre viñetas interior exterior vamos a mantenernos con dos opciones para las opciones de radio y vamos a redactar estas opciones de esta forma tu gato prefiere estar en el interior en lugares techados en tu casa o cerrado o en exterior en el jardín jugando puedes seleccionar algunas de estas dos opciones veamos qué ocurre si volvemos a cargar la página aquí vemos interior y exterior podemos verlos aquí pero qué ocurre si hacemos clic en ambas opciones vemos que ambas se pueden marcar a la vez

y eso no es lo que queremos cuando tenemos ese tipo de elemento de input cuando usamos los botones de radio botones de opción queremos que sólo una de esas opciones se marque a la vez si el gato prefiere exteriores no puede preferir interiores así que queremos que se desmarque la opción anterior si cambiamos eso lo podemos lograr con un grupo de botones de radio lo cual vamos a ver en la próxima parte por ahora lo que vamos a lograr con una etiqueta nueva que vamos a ver un elemento nuevo es que cuando se haga clic

en el texto también se seleccione el botón que corresponde a esta opción esto es muy útil para dispositivos touch y también para accesibilidad también es más sencillo para nosotros hacer clic en el texto en lugar del botoncito vamos a cargar la página nuevamente para que las opciones no estén seleccionadas y veamos qué ocurre si hacemos clic en el texto nada ocurre no se selecciona la opción el botón correspondiente como podemos lograrlo con una etiqueta llamada playbook ese tipo de elementos lay bone literalmente significa etiqueta en español pero hay una sutil diferencia en inglés entre tag

y leiva así que vamos a referirnos a ella como leiv on vamos a usar la etiqueta ley book y vamos a rodear el contenido de ese botón de radio toda la etiqueta input todo el elemento importe y el texto va a estar rodeado por ley vol tenemos la etiqueta de apertura y tenemos la etiqueta de cierre bien vamos a volver a cargar la página y veamos si esto hizo algún cambio ahora como puedes ver cuando hacemos clic en el texto ya se marca la opción correspondiente simplemente con rodear los con una 'llave' o con un

elemento leyva con exterior esto no ocurre porque no está rodeado con ley boom vamos a rodearlo con ley wood y veamos el cambio volvemos a cargar la página y aquí lo podemos ver todavía no hemos solucionado ese detalle de solo marcar una opción a la vez pero si estamos mejorando la interacción de nuestro formulario con el usuario algo útil que debes conocer es que podemos relacionar aún más la etiqueta con el botón de radio a través de el atributo for a la etiqueta le podemos agregar un atributo for cuyo valor debe ser igual a lighting

de el elemento impone a quien permítanme poner esto en pantalla completa para que lo veamos con más detalle a este botón de radio que tenemos aquí le estamos asignando un haití y un identificador único cuyo valor es interior porque corresponde de su opción interior le vamos a asignar el valor interior al atributo for y eso básicamente lo que hace es conectar esa opción con la etiqueta vamos a hacer lo mismo para la segunda opción en este caso vamos a escribir exterior escribimos el haití y todo se mantiene exactamente igual si volvemos a cargar la página

aquí vemos interior y exterior y todo funciona perfectamente genial ya podemos crear botones de radio en la próxima parte vamos a solucionar ese problemita que nos permitía seleccionar más de una opción a la vez así que veamos cómo podemos hacer esto en la próxima parte continuemos veamos cómo podemos hacer que solo se marque una opción por cada grupo de botones de radio para eso vamos a crear exactamente lo que acabo de mencionar un grupo de botones de radio cuando creamos un grupo de botones de radio el browser va a saber que esos botones o esas

opciones pertenecen a la misma categoría digamos al mismo grupo de elementos y que solo uno puede estar marcado a la vez para lograr esto solo tenemos que agregar un atributo a el elemento input de tipo radio ese atributo se llama name aquí lo podemos ver name name que significa nombre en español en este caso digamos que se va a llamar ese grupo interior exterior todos los elementos input de tipo radio que tengan este mismo nombre van a pertenecer al mismo grupo así que solo uno va a poder estar marcado a la vez aquí vamos a

agregarlo también para la segunda opción y volvemos a cargar la página vemos interior exterior y ahora si hacemos clic en una opción y luego en otra opción vemos como la anterior se desmarca porque sólo una puede estar marcada a la vez genial ya estamos logrando lo que queremos para este tipo de elemento en el formulario buen trabajo hasta este momento los elementos en nuestra página se muestran en ciertos casos en la misma línea por ejemplo aquí si vamos a la parte final de nuestra página tenemos los botones de radio botones de opción en la misma

línea que el campo de texto y también si presentamos nuestra página en pantalla completa vemos que el botón de enviar también está en la misma línea ciertos elementos como las imágenes y las listas si se presentan en sus propias líneas individuales pero no siempre es el caso cómo podemos especificar en html que queremos que cada uno de estos elementos esté en su propia línea lo podemos hacer con la etiqueta br veamos como la podemos usar si queremos que estos botones de radio estén en líneas separadas lo primero que hacemos es ir a ese elemento en

html interior y en luego entre ese elemento y el siguiente agregamos a este elemento br viene de la palabra en inglés break que significa como romper o separar los elementos representa un salto de línea en inglés un line break donde una línea termina y comienza a otra si volvemos a cargar la página puedes ver que ahora cada uno de los botones de radio está en una línea diferente pero se sigue cumpliendo el hecho de que sólo una opción puede estar marcada a la vez vamos a agregar otro salto de línea otra línea nueva entre este

botón de radio y el campo de texto que tenemos aquí si cargamos nuevamente la página vemos que cada uno está en su línea correspondiente y finalmente también podemos agregar otra línea nueva antes del botón y aquí lo tenemos cada uno en su línea correspondiente pero no tenemos que dedicar en nuestro archivo una línea completa para esta etiqueta podemos simplemente agregarla al final del elemento y eso va a indicar también que queremos que se inserte una línea nueva antes del próximo elemento puedes ver que el resultado es exactamente el mismo genial ya sabes cómo puedes agregar

una línea nueva en la presentación de tu página para tener un elemento en cada línea recuerda la etiqueta es br y es una etiqueta que no necesita una etiqueta de apertura y una etiqueta de cierre solo tenemos la etiqueta de apertura vamos a ver otro tipo de elementos que podemos agregar a nuestro formulario las casillas de verificación donde vamos a ver los check mark o los símbolos que usamos para marcar que algo está completado o correcto y podemos seleccionar varias opciones de esa lista de casillas de verificación en inglés una casilla de verificación se denomina

check box vamos a agregar estos elementos aquí en nuestro formulario donde tenemos los botones de radio para separar en nuestro archivo visualmente dónde está cada tipo de elementos vamos a agregar comentarios botones de radio luego podemos referirnos a esta parte como texto y botón enviar aquí puedes ver cómo podemos usar los comentarios también para aclarar las distintas partes de nuestra estructura y antes del texto y el botón enviar vamos a agregar nuestras casillas de verificación usamos el mismo tipo de elementos que hemos estado usando hasta ahora en fort pero ahora el tipo el valor del

atributo tipo va a ser check box si cargamos la página nuevamente aquí puedes ver que apareció una casilla de verificación igual que con los botones de radios botones de opción tenemos que agregar texto para indicarle al usuario a qué corresponde esta opción digamos que queremos saber más sobre el gatito si es cariñoso perezoso y si es enérgico no necesariamente una sola de las opciones es verdadera el gasto puede ser cariñoso y perezoso o perezoso y enérgico o cualquier combinación de estas tres características así que las casillas de verificación van a permitirle al usuario seleccionar varias

opciones si es necesario vamos a cargar nuevamente la página y vemos las casillas de verificación con su texto correspondiente cariñoso perezoso y enérgico pero lo mismo ocurre con las casillas de verificación que con los botones de radio si seleccionamos el texto o hacemos clic sobre el texto la casilla correspondiente no se marca y eso es exactamente lo que queremos así que tenemos que hacer lo que hicimos con la etiqueta tenemos que agregar play bone igual que hicimos con los botones de radio debemos rodear cada uno de estos elementos input y su texto con un elemento

ley aquí tomamos la etiqueta de cierre exactamente igual playbook aquí al inicio y tomamos la etiqueta de cierre y llevamos la etiqueta de cierre al final ahora si volvemos a cargar la página vemos aquí que si hacemos clic en el texto se marca la casilla correspondiente exactamente lo que queríamos igualmente deberíamos especificar el atributo for y el aire y de cada una de las casillas de verificación for correspondería en este caso a cariñoso vamos a usar una n en lugar de la ella también podrías usar ella pero como no hemos usado caracteres que no sean

estándar en inglés hasta el momento en la parte de html vamos a continuar con este estilo tenemos cariñoso y aquí en input tendríamos una id y cariñoso fort le digamos perezoso y luego aquí tendríamos una id y que dijera perezoso y aquí tendríamos for enérgico no incluimos el acento y enérgico ok ya tenemos estos atributos y lo único que nos falta es agregarle un atributo a estas casillas de verificación para indicar que pertenecen al mismo grupo en este caso el comportamiento no va a cambiar como en los botones de radio porque igual vamos a poder

seleccionar cuántas opciones sean necesarias pero si las va a como agrupar si tienen el mismo valor del nombre name personalidad ok name personalidad le agregamos este tributo a todos los elementos input estamos agregando ese atributo al elemento input ok no al equipo el equipo de está aquí input está aquí genial ya tenemos nuestras casillas de verificación y están funcionando correctamente algo muy útil también para la experiencia del usuario sería marcar una opción por defecto tanto para los botones de radio como para las casillas de verificación que cuando el usuario ingrese a la página vea una

de las opciones ya marcada como lo podemos hacer con el atributo check en la próxima parte veremos cómo puedes usar este atributo en el elemento impone así que te veo allí en la próxima parte el atributo select que significa marcado en inglés nos permite marcar algunas de estas opciones para cada uno de los grupos de casillas de verificación o de botones de radio simplemente tenemos que agregar la palabra check aquí al elemento imputa únicamente for es el único que no pertenece a input todos los demás pertenecen a input light y el tipo el nombre y

el atributo chat que estamos agregando aquí en este caso estamos diciendo que por defecto vamos a seleccionar la opción cariñoso y también vamos a seleccionar la opción interior por defecto para los botones de radio veamos vamos aquí a quitar el espacio y si volvemos a cargar la página vemos las opciones marcadas por defecto interior y cariñoso exactamente lo que queríamos recuerda que check se agrega al elemento input no al leyton se agrega a input que corresponde a la casilla o al botón que va a estar marcado por defecto genial ya sabes marcar una de estas

opciones por defecto en la próxima parte vamos a ver cómo puedes usar un atributo que va a enviar un valor específico al servidor cuando enviamos en los datos del formulario así que te veo la próxima parte un atributo importante cuando estás creando botones de radio o casillas de verificación es el atributo value que significa valor en español ese atributo especifica qué valor se va a enviar al servidor cuando enviemos la respuesta a las respuestas del usuario porque si no especificamos el valor el servidor va a recibir un valor genérico de que alguna de las opciones

de ese grupo fue seleccionado pero cómo va a saber el servidor si esa opción fue interior o exterior o si se seleccionó perezoso cariñoso o cualquier combinación de opciones lo único que sabe es que hubo cierta opción que fue seleccionada no su valor como tal y para eso está este atributo por ejemplo digamos que aquí vamos a colocar esto en pantalla completa digamos que queremos especificar el valor de interior en este caso valor sería interior valor sería interior genial eso le diría al servidor que el valor seleccionado para el grupo interior exterior fue interior si

esta opción está seleccionada si no vamos a ver vamos a asignarle valor exterior a la segunda opción y así el servidor va a poder recibir esta información de este grupo se seleccionó tal opción este valor y vamos a poder trabajar con ese valor en el servidor para las casillas de verificación también podemos especificar un valor cariñoso perezoso enérgico y así ya le estamos diciendo al servidor cuál fue la opción seleccionada por el usuario la opción o las opciones porque en las casillas de verificación podemos seleccionar varias alternativas otra forma de presentar el código aquí como

ya ves que se está volviendo un poco más complicado de leer sería presentar el elemento input de esta forma con esta estructura como si fuera parte de la etiqueta ley bold y si el texto quedaría aquí pero estaría rodeado por el elemento ley bold y como puedes ver es más fácil de leer también podemos agregar una línea nueva un salto de línea entre las casillas de verificación hagámoslo con la etiqueta o el elemento br vamos a insertar una línea entre cada una de estas opciones y también una al final para separar el campo del texto

aquí de esta forma puedes ver cómo es más conciso el código y también es más fácil de leer cuando ya la estructura se vuelve más complicada ya sabes el propósito de este atributo valor es el valor que va a recibir el servidor si esa opción fue seleccionada para ese grupo de casillas o de botones en particular en la próxima parte vamos a ver un tipo de elemento muy muy muy importante en el desarrollo web te prometo que es uno de los elementos más importantes que vas a usar en el desarrollo web el elemento dif lo

vamos a ver en la próxima parte el elemento de efe es uno de los elementos más importantes en desarrollo web porque es muy versátil es un contenedor que podemos usar para cualquier propósito es un contenedor genérico digámoslo así lo usamos para crear estructuras más complejas en las páginas web sirven para simplemente actuar como un contenedor que podemos también personalizar cuando empezamos a trabajar con css y ese es uno de sus principales usos vamos a crear un pib que contenga las listas de gatos ambas listas las cosas que los gatos aman y las cosas que los

gatos o bien van a estar como agrupadas dentro del mismo contenedor este contenedor que tenemos aquí el tiff tenemos una etiqueta de apertura y una etiqueta de cierre la etiqueta de apertura va a estar antes de esta parte este párrafo cosas que los gatos aman y luego vamos a cerrar ese contenedor antes de la imagen de gatos que iba a estar aquí al mismo nivel que la imagen seleccionamos todo lo que está en el medio lo que se va a estar dentro de ese contenedor y lo intentamos un nivel más hacia la derecha así estamos

diciendo visualmente estamos indicando visualmente que todos estos elementos pertenecen a este contenedor a este día que tenemos aquí si aplicamos por ejemplo un estilo a este tipo ese estilo con css esa configuración de la presentación de los elementos va a aplicar para todos estos elementos que tenemos aquí y ese es el principal propósito de por qué usamos un 10 en html vamos a usarlo muy muy frecuentemente pero en este caso si volvemos a cargar la página puedes ver quién no hubo cambio simplemente estamos agrupando todo este contenido bajo un mismo contenedor pero ese contenedor en

este momento es invisible porque no le estamos asignando ninguna propiedad que lo haga visible como un color de fondo o como cierto tamaño pero con css si vamos a poder hacerlo y vas a ver lo poderoso que pueden ser bien ya sabes para qué usamos div y cuál es su etiqueta correspondiente otro elemento importante que quizás quieras agregar a tu página web es un pie de página podemos agregar un pie de página aquí y yendo al final de nuestra estructura luego de maine porque porque el pie de página no es parte del contenido principal de

nuestra página así que no debería estar dentro de el elemento principal el elemento main debería estar luego de maine tenemos para eso para crear un pie de página una etiqueta específica un elemento que se llama führer führer significa en español pie de página dentro del fútbol podemos incluir un párrafo por ejemplo sin derechos de autor baker cam punto org bien ahí tenemos nuestro párrafo en el pie de página vamos a volver a cargar la página y aquí vemos el texto podemos agregar un enlace aquí y áfrica orcam punto org para eso ya sabes cómo crear

un enlace usamos la etiqueta de apertura escribimos la etiqueta de cierre aquí tenemos el enlace y tenemos que especificar la referencia vamos a colocar esto en pantalla completa para tener una mejor perspectiva de la estructura aquí lo tenemos nos va a llevar a free corgan punto org slayer español en este caso podríamos dejarlo ha sido también podríamos indicar que se debería abrir en una pestaña nueva pero vamos a cargar la página y aquí vemos el enlace a áfrica punto org ya sabes cómo hacer que el enlace se abre en una pestaña nueva así que si

quieres puedes practicar con este enlace pero no te parece que el texto está un poco grande para hacer un pie de página el texto tiene el mismo tamaño que el texto principal de la página para indicar que el texto debería ser de un tamaño más pequeño usamos una etiqueta específica un elemento específico que nos permite decir el browser que el texto debe ser más pequeño vamos a ver cómo podemos hacer esto en la próxima parte esta etiqueta que nos permite hacer que el texto sea más pequeño se representa con small small en español significa literalmente

pequeño vamos a agregar esa etiqueta aquí en el texto que queremos que sea más pequeño dentro de el párrafo dentro de la etiqueta del párrafo estamos haciendo que este texto sea más pequeño incluyendo el enlace puedes ver cómo vamos como creando una jerarquía de todas estas etiquetas anidadas vamos a volver a cargar la página y aquí vemos que el texto ahora es más pequeño exactamente lo que buscábamos para el pie de página genial ya sabes que puedes usar este elemento y esta etiqueta es mono cuando lo necesites es muy útil para un pie de página

y finalmente para culminar la parte del curso sobre html vamos a hablar sobre head recuerda que hablamos un poquito sobre head cuando comenzamos a crear nuestro archivo html head normalmente lo escribimos antes de vori vori es todo lo que vamos a ver en la estructura de la página y head contiene lo que normalmente llamamos verdadera y los elementos que actúan detrás de escenas los elementos que no vemos pero que son esenciales para que la página funcione correctamente por ejemplo si creamos un archivo css o un archivo javascript y necesitamos incluirlo en nuestra página aquí escribiríamos

el enlace dentro de head también si queremos personalizar el título de la página lo que se muestra aquí en esta pestaña que normalmente está personalizado en las páginas web que vemos en internet podemos hacerlo con el elemento iron título este elemento con su etiqueta de apertura y de cierre personaliza el título de la página como vemos aquí app de gatos los títulos descriptivos y detallados son un factor importante para la optimización del motor de búsqueda es en inglés search engine optimization así que se recomienda escribir títulos detallados porque ayudan a los motores de búsqueda a

conseguir tu página web también y el título también es muy útil para la impresión inicial del usuario cuando está ingresando a la página ese es el propósito principal de head todos los elementos que actúan detrás de escenas el más visible de todos ellos es el título que podemos verlo aquí en la pestaña del navegador pero los demás actúan como detrás de escena ese es el propósito de g y siempre head y parís deben estar dentro del elemento raíz de la etiqueta html genial ahora comencemos con la parte del curso sobre css vas a aprender cómo

podemos combinar ambos archivos para personalizar el aspecto de la página tv h buen trabajo ya completaste la primera mitad del curso y aprendiste los fundamentos de html ahora vamos a combinar ese conocimiento con css vamos a comenzar a ver los fundamentos de css recordemos que el inglés css significa cascading stylesheets estados ships significaría en español como hojas de estilo y cascading significa que esos estilos van a caer en cascada así que en español se traducen como hojas de estilo en cascada hasta ahora en nuestro archivo html hemos estado definiendo la estructura y el contenido de

la página hemos incluido los títulos los contenedores las imágenes pero no hemos especificado en realidad cómo queremos que esos elementos se muestren en el resultado final para eso vamos a agregar un archivo css en ese archivo nosotros vamos a especificar el estilo de los elementos que tenemos en nuestro archivo html en html definimos la estructura de la página y su contenido y en css definimos el estilo css es un lenguaje basado en reglas vamos a trabajar con reglas y esas reglas determinarán el estilo que se aplicará a un elemento oa un grupo de elementos genial

comencemos la segunda parte del curso viendo cómo podemos escribir ese conjunto de reglas en css tenemos tres opciones y las vamos a ver en la próxima parte tenemos tres opciones distintas para escribir nuestro conjunto de reglas el css las tres opciones son escribir estilos en línea usar un bloque style o crear un archivo de tipo css para escribir todas nuestras reglas de estilo en ese archivo veamos la primera opción estilos en línea si escogemos usar esta opción el estilo que vamos a asignarle a un elemento se añade directamente a la etiqueta de apertura de ese

elemento en el archivo html vamos a especificar cómo queremos que ese elemento html se vea en el navegador en el browser pero vamos a especificar los en la etiqueta de apertura aquí tenemos un ejemplo tenemos un título un encabezado con la etiqueta o el elemento h2 y aquí puedes ver que estamos especificando un estilo en español está yo significa estilo y dentro de las comillas estamos especificando que queremos que el color de este texto sea azul blue en inglés en español es azul nota que estamos incluyendo esta información como un atributo en la etiqueta de

apertura del encabezado básicamente en eso consiste en los en línea esta es la primera opción nuestra segunda opción es usar elementos style cuando usamos está el que significa estilo en español añadimos ese elemento en el elemento head de nuestro archivo html y dentro de ese elementos tallos describimos el estilo que queremos asignarle a los elementos de nuestra página web básicamente agrupamos todas esas reglas bajo un mismo elemento en lugar de hacerlo individualmente elemento por elemento en su etiqueta correspondiente vamos a agrupar todas esas reglas en un mismo bloque aquí tenemos un ejemplo tenemos head aquí

con su etiqueta de apertura y de cierre y dentro de head tenemos este elemento está en su etiqueta de apertura y su etiqueta de cierre y dentro de ese elemento tenemos algo que se llama un selector css esto nos permite decir que todos los títulos son los encabezados de nivel 2 que tengan esta etiqueta deberían tener color azul vamos a repasar todos estos elementos de la sintaxis de css durante el curso pero solo quiero que vayas viendo las diferencias entre las tres opciones que estamos presentando antes lo hacíamos individualmente la etiqueta de apertura ahora estábamos

refiriéndonos en forma general por ejemplo a cualquier encabezado de nivel 2 y decimos que debe tener color azul y finalmente nuestra tercera opción es crear un archivo css en esta opción creamos un archivo de tipo css con esta extensión para definir el estilo de la página básicamente vamos a tener un archivo html con la estructura y el contenido de la página y vamos a crear un archivo css que va a contener todas esas reglas y lo que vamos a hacer es básicamente vincular el archivo css con el archivo html así cuando accedemos a la página

automáticamente vamos a poder usar las reglas de estilo que tenemos en este archivo y se van a aplicar a los elementos html por eso esta opción es recomendado porque estamos creando un archivo separado que es mucho más fácil de mantener y expandir también bien como ya sabes las tres opciones que podemos usar comencemos a ver ejemplos en nuestro editor de código aquí tenemos nuevamente en nuestra aplicación de gatos con la que hemos estado trabajando durante el curso y ahora vamos a ver cómo podemos agregar un estilo en línea en html usando css cuándo agregamos un

estilo en línea básicamente vamos al archivo html y decimos cuál es el elemento que quiero personalizar por ejemplo digamos que quiero cambiar el color del texto de este título que dice app de gatos lo primero que debo hacer es identificar cuál es el elemento al cual me refiero en html este sería el elemento en mi página h2 voy a la etiqueta de apertura y en la etiqueta de apertura voy a agregar un atributo llamado style estilo esto me va a permitir especificar ciertas propiedades css para ese elemento entre comillas debemos especificar qué propiedad quiero personalizar

en este caso es el color del texto esta es una propiedad css que nos va a permitir cambiar o personalizar el color del texto qué color queremos asignar bueno digamos azul blue tenemos una amplia gama de colores y también una parte del curso va a estar dedicada a cómo puedes escoger colores específicos en css pero por ahora vamos a escribir palabras específicas que se refieren a colores que ya están predeterminados en css para elementos html una vez que escribimos esto también vemos una cajita que nos muestra el color esto ocurre en visual studio com no

necesariamente en todos los editores de código vas a ver esto y puedes también escoger otros colores en esta pantalla genial vamos a guardar el archivo y volvemos a cargar la página y aquí vemos el título en color azul exactamente lo que esperábamos felicitaciones acabas de escribir tu primer estilo en línea en css este es tu inicio al mundo de css así que continuemos viendo nuestro siguiente tema ya sabes cómo agregar una estilo en línea este formato aplica para cualquier estilo que quieras asignarle a tu elemento todo lo que vas a ver de ahora en adelante

cualquier propiedad con la que vamos a trabajar puedes asignar la también como un estilo en línea que es simplemente aquí escribes la propiedad seguida de dos puntos normalmente un espacio y luego el valor de esa propiedad recuerda que el nombre del atributo es style y en español significa estilo ahora vamos a ver en la próxima parte cómo puedes especificar esto mismo en un bloque style dentro del elemento head la segunda opción que vimos en las diapositivas así que te espero' allí aquí tenemos nuestro estilo en línea pero si en lugar de eso queremos usar nuestra

segunda opción el elemento start o simplemente tenemos que borrar ese estilo en línea y aquí en nuestro elemento en este caso va a ser debajo de 0 escribimos style vamos a colocarlo aquí más grande para que puedas verlo con más detalle tenemos esta área y dentro de esta el vamos a especificar queremos que los elementos de tipo h 2 este elemento que tenemos aquí tenga un color específico para eso luego de especificar el tipo de elementos con llaves vamos a rodear el conjunto de propiedades y los valores que queremos asignarles en este caso queremos que

el color de ese elemento sea azul y aquí lo tenemos al final de la línea escribimos un punto y coma eso es importante esta es la estructura básica de una regla en css tenemos aquí el selector en inglés se denomina selector que nos permite decir qué tipo de elementos vamos a afectar con este estilo que tenemos aquí dentro de las llaves en este caso a todos los elementos h 2 se les va a asignar un color de texto azul en nuestra página actualmente solo tenemos un elemento h 2 pero si tuviéramos otro elemento por ejemplo

digamos app de gatos 2 y volvemos a cargar la página puedes ver que también es azul el texto este estilo se va a asignar a todos los elementos de este tipo hay forma de ser más restrictivos y de solo aplicar el estilo a ciertos elementos solo vamos a ver durante el curso por ahora lo aplicamos de forma general esta es una diferencia que tenemos con los estilos en línea cuando usamos un elemento style podemos afectar o asignar ese estilo a más de un elemento pero cuando escribimos aquí en la etiqueta de apertura el estilo en

línea solo vamos a afectar a ese elemento en particular mientras que aquí podríamos si queremos afectar o aplicar ese estilo a más de un elemento genial vamos a ver otros ejemplos vamos a personalizar el color del texto de los títulos los encabezados de nivel 3 vamos a asignarles un color verde en inglés verde es greening así que vamos a volver a cargar la página y aquí vemos que nuestro título de nivel 3 nuestro encabezado aquí de nivel 3 es verdad se le aplicó ese estilo según la guía de estilo de google se recomienda también dejar

una línea en blanco entre cada una de estas reglas que tenemos aquí key para que el archivo sea más fácil de leer estamos personalizando el estilo de los elementos h2 h3 y digamos que queremos también personalizar el color de los párrafos para eso aquí escribimos p luego llegamos a este nivel de intenta ción escribimos color digamos por tu morado aquí puedes ver ese color que corresponde si volvemos a cargar la página podemos ver que ahora todos los párrafos se muestran en morado y este es un ejemplo de cómo puede afectar a más de un elemento

en tu página aquí vemos también que nuestro pie de página aquí en nuestro foro también contiene un párrafo una etiqueta para un elemento pp por eso se muestra en morado genial ya sabes trabajar con el bloque style ahora vamos a ver nuestra tercera opción que es la que vamos a usar comúnmente porque como puedes ver si tenemos una página más complicado más elaborada y empezamos a escribir todos nuestros estilos aquí en nuestro archivo html rápidamente el archivo se va a volver inmanejable porque en teoría podemos tener cientos y cientos de reglas aquí para personalizar cómo

se ve la página y debajo tendríamos ya la estructura de la página que de por sí ya puede ser complicada también así que para separar el propósito de cada uno de los archivos y hacerlos más manejables y fáciles de expandir y de mantener entonces lo que hacemos es separar este contenido de las reglas css en otro archivo eso es exactamente lo que vamos a hacer en la próxima parte veamos cómo podemos trasladar estas reglas que ya escribimos para nuestra página a un archivo css lo primero que vamos a hacer es abrir aquí el explorador y

vemos nuestro archivo html y nuestra carpeta de imágenes donde teníamos las imágenes de la lasaña del gatito lo que vamos a hacer ahora es hacer clic aquí en new file archivo nuevo y vamos a escribir style punto se s punto css le dice a nuestro dispositivo a nuestra computadora que este archivo es de tipo css y el nombre style es un estándar que es comúnmente usado para nombrar al archivo que contiene los estilos principales de nuestra página también puedes ver mails puntos s s main significa principal y también puedes ver archivos con otros nombres hacemos

clic en entero y aquí vemos nuestro archivo nuevo en este momento el archivo está vacío pero lo que debemos hacer es aquí podemos copiar y pegar nuestras reglas claro aquí vamos a tener que ajustar la intenta ción normalmente las escribiríamos directamente en el archivo css es importante también intentar el contenido de las reglas esto es algo también importante que debemos mencionar el css al igual que en html normalmente intentamos las propiedades con dos espacios para cambiar el tamaño por defecto de cada nivel de intenta ción de cuatro espacios a dos simplemente debes ver si tienes

esta barrita activa o visible en tu editor de código envía score si la barra está visible puedes hacer clic en spaces debería mostrar 4 por defecto luego se explica aquí intent using spaces y luego haces clic en dos ya después de que ves aquí el número dos si haces clic en tap se va a agregar dos espacios por cada nivel de intenta ción exactamente lo que necesitamos y así no tenemos el riesgo de ser inconsistentes y asignar cuatro espacios o dos espacios mezclados es importante ser consistente en todo el archivo y se recomienda usar dos

espacios para css y html genial estábamos viendo cómo podemos combinar o vincular los archivos css html porque hasta este momento son dos archivos separados no tienen nada en común podemos borrar esta parte y cerrar aquí para ver el código si volvemos a cargar la página ahora vemos la página original sin los estilos que le habíamos aplicado porque en este momento los archivos son dos archivos totalmente separados no hay nada que los conecte los podemos conectar con un elemento que tenemos disponible en html que se llama link no es el enlace o el link al que

normalmente nos referimos cuando navegamos en internet sino que es un enlace que va a actuar como detrás de escena para permitirnos acceder a otros archivos por ejemplo el archivos de ss por eso lo escribimos o lo incluimos dentro de ge recuerda que ese contiene todos esos elementos que actúan detrás de escena una vez que creamos el link debemos especificar cuál es el archivo que se va a conectar o el archivo que se va a usar en este caso vamos a conectar nuestro archivo html con archivo css como está en la misma carpeta aquí lo podemos

ver en el explorador están ambos en la misma carpeta podemos simplemente escribir el nombre del archivo si no tendríamos que hacer igual que qué hicimos anteriormente con la imagen tendríamos que escribir el nombre de la carpeta primero seguido de una barra inclinada y luego el nombre del archivo que hay aquí tenemos esto y también se recomienda específica del atributo brown breve es una abreviación de bilis jones y según esta descripción el atributo denominado nombre una relación del documento vinculado al documento actual que representa está el punto css para nuestro archivo html bueno es una hoja

de estilo que en inglés se denomina está aún sin hit es hoja y está el en estilo hoja de estilo este archivo es una hoja de estilo para nuestro archivo actual genial ahora si volvemos a cargar nuestra página puedes ver que los estilos se aplicaron exitosamente aquí podemos ver nuestro título azul nuestro subtítulo verde nuestros párrafos morados exactamente lo que especificamos aquí el estadio punto cfs genial ya sabes cómo vincular o conectar ambos archivos aquí en html escribimos todo el contenido de la página y en css especificamos cómo se van a mostrar estos elementos o

ese contenido recuerda en el evento sling no tiene una etiqueta de cierre se cierra automáticamente y debes especificar la propiedad hr con el nombre o la dirección al archivo genial ahora que ya sabes cómo trabajar con estas tres opciones y cuáles son sus diferencias comencemos a trabajar con los selectores css vamos a verlos en detalle y cómo puedes usarlos para personalizar tu página web vamos a hablar un poquito sobre los selectores css porque ellos van a ser esenciales durante todo el curso en realidad ya los usamos esto que escribimos aquí en la parte anterior será

mira un selector css veámoslo con más detalle aquí vamos a aumentar el tamaño del correo cuando nosotros escribimos aquí h2 h3 o pe por ejemplo estos son ejemplos estamos especificando el tipo de elemento al cual se le va a aplicar este estilo en específico aquí podemos tener muchas muchas muchas combinaciones de propiedades con sus valores dentro de las llaves y ese estilo que definamos aquí se va a aplicar para este tipo de elementos pero esto que tenemos aquí esta primera parte es esencial porque le dice al browser al navegador el tipo de elementos o el

conjunto de elementos al cual se le va a aplicar ese estilo veamos un poquito sobre los selectores css en la documentación selectores css los selectores definen sobre qué elementos se aplicará un conjunto de reglas css nos permiten definir qué elementos van a estar afectados por las reglas css que escribimos tenemos varios tipos de selectores el que estamos usando en este momento se denomina selector de tipo selecciona todos los elementos todos los elementos que coinciden con el nombre del elemento especificado todos los elementos con ese nombre por ejemplo si escribimos inputs se va a aplicar a

cualquier elemento de tipo import y en este caso como escribimos h2 h3 y pe estos elementos van a ser afectados por los estilos que especificamos también tenemos otros tipos de selectores básicos selector de clase selector de aire y selector universal y selector de atributos vamos a hablar durante el curso sobre el selector de clases el selector de haití y el selector de atributos así que vamos a ver muchos ejemplos de cómo usarlos el selector universal es un selector que selecciona todos los elementos aunque en general selecciona todos los elementos es un asterisco por ejemplo digamos

que queremos que todo el texto en nuestra página sea morado sólo un ejemplo digamos que borra esto que tenemos acá y quiero que todo el texto sea morado uso este selector el asterisco que es el selector universal y escribo color cuerpo moral ahora si volvemos a cargar la página puedes ver que todo el texto todo el texto de nuestra página ahora es morado porque se aplicó de forma universal a todos los elementos de la página que contienen texto para los cuales puede aplicar esta propiedad específica genial ya sabes cómo trabajar con los selectores de tipo

y con el selector universal así que en la próxima parte vamos a ver cómo puedes trabajar con los selectores de clase las clases son muy muy muy muy importantes en css y las vas a usar diariamente las vas a usar en cada proyecto que crees con html y css así que comencemos con nuestra siguiente parte volvemos al estado de nuestra página antes de continuar aquí estamos en nuestro archivo cfs hasta ahora hemos usado selectores de tipo que van a aplicar un estilo específico a todos los elementos de ese tipo pero qué ocurre nosotros tenemos otro

tipo de selector que se llama selector de clase vamos a borrar ese estilo esos estilos que habíamos asignado a los elementos de nuestra página y vamos a enfocarnos en los selectores de clase si vamos a la documentación de la red de desarrolladores de mozilla en la documentación web podemos ver aquí los selectores de clase un selector de clases selecciona todos los elementos que tienen el atributo class especificado cuál significa clase en español una clase es básicamente un nombre que nosotros creamos y le asignamos a ciertos elementos luego con css podemos referirnos a esa clase y

aplicarle un estilo específico a todos los elementos html que tengan esa clase ya vas a ver cómo se la podemos asignar y cuál es la diferencia entre un selector de tipo y un selector de clase digamos que queremos asignar un estilo a nuestra lista no ordenada esta lista que tenemos aquí queremos asignarle un color de texto chocolate en inglés chocolate se escribe igual que en español ya que le vamos a afectar con este selector de tipo a todos los elementos de tipo listas no ordenada recuerda hueles listas no ordenadas y volvemos a cargar nuestra página

aquí podemos ver que el estilo se aplicó a esa lista no ordenada pero también digamos que queremos que ese mismo estilo se le aplique a las listas ordenadas aquí vemos que no fue modificada a la lista ordenada porque no la estamos seleccionando con el selector de tipo deberíamos en este caso escribir o l y luego escribimos color chocolate volvemos a cargar la página y ahora si vemos que se le aplicó el estilo pero estamos escribiendo reglas duplicadas básicamente para evitar repeticiones podemos usar clases selectores de clases en css con las clases podemos simplemente agregarle la

clase a algún elemento html y no afectar todos los de ese tipo por ejemplo si tuviéramos varias listas no ordenadas podríamos asignarle una clase a alguna lista oa varias listas y a otras no y así no estaríamos afectando a todas cuando usamos este selector de tipo estamos afectando o estamos aplicando ese estilo a todos los elementos de ese tipo en nuestra página con las clases podemos ser más selectivos y sólo aplicarle el estilo a los elementos que tengan esa clase así que vamos a borrar esto por este momento y vamos a reemplazarlos por una clase

el primer paso para crear una clase es ir a nuestro archivo html y buscar los elementos a los cuales les queremos asignar esa clase vamos a volver a cargar nuestra página para ver su estado inicial vamos a ir aquí abajo a nuestra lista no ordenada y a nuestra lista ordenada aquí las podemos ver ambas en la pantalla tenemos aquí en nuestra lista no ordenada y aquí podemos ver nuestra lista ordenada que corresponden a estos dos elementos para asignarle una clase a la lista no ordenada simplemente le agregamos el atributo class que significa clase en español

y entre comillas vamos a escribir el nombre de nuestra clase ese nombre es cualquier nombre que tú quieras asignarle normalmente tratamos de ser lo más concisos posible y uno de los estándares es separar las palabras con un guión entonces por ejemplo podemos asignarle la clase lista de gato y así le vamos a aplicar el estilo que escojamos para esa clase lista de gatos vamos a agregarle la s aquí ahora vamos a nuestro archivo css ya le aplicamos la clase a un elemento en html cuando volvemos a nuestro archivo css para especificar qué estilo queremos asignarle

a esos elementos escribimos el nombre de la clase pero antes de ese nombre tenemos que incluir un punto así le decimos a css que nos estamos refiriendo al nombre de una clase con un punto aquí antes de su nombre luego para aplicarle el estilo escribimos la propiedad y su valor color chocolate y si volvemos a cargar la página buena aquí lo tenemos vemos nuestra lista no ordenada con el color chocolate pero dijimos que las clases son muy útiles para poder aplicarle ese mismo estilo a más de un elemento cierto cierto vas a ver lo fácil

que es aplicarle ese mismo estilo a otro elemento en nuestra página que no tiene nada que ver con este tipo de elementos por ejemplo podemos asignarle esa clase a otro elemento que no tengan nada que ver con una lista no ordenada vamos aquí a nuestra lista ordenada y vamos a agregarle atributo clave lista de datos genial ya tenemos dos elementos con esa clase vamos a volver a cargar la página y puedes ver cómo se aplicó el estilo también a la lista ordenada porque tiene esa clase así estamos re usando nuestro estilo que definimos aquí si

queremos que el elemento tenga este estilo le agregamos esta clase también podemos agregarle la clase a otro elemento que no tenga nada que ver en este caso también podríamos ajustar su nombre claro otro nombre que no sea lista de gatos pero sólo para demostrarte que no tiene necesariamente que ser una lista vamos a volver a cargar la página y puedes ver que el estilo se le aplica al elemento pe al párrafo simplemente porque tenía esa clase general no y si quieres asignarle otro estilo además de eso otra clase escribes un espacio y luego escribes el

nombre de otra clase se puede asignar más de una clase al mismo elemento ya sabes cómo crear una clase en html cómo asignarle una clase un elemento y cómo escribir la clase correspondiente en el archivo css recuerda siempre tienes que seguir esta estructura para escribir la regla cuando estás refiriendo de una clase un punto esto es común que cuando estás comenzando a trabajar con css no coloques el punto el punto es muy importante para que se detecte como una clase luego el nombre de la clase y entre llaves la propiedad dos puntos un espacio el

valor y punto y coma el punto y coma también es importante porque marca el final de esa línea genial ya sabes cómo trabajar con selectores de clase los vamos a usar muy a menudo ahora pasemos en nuestra siguiente parte a ver un aspecto de desarrollo web que es importante cómo puedes aumentar disminuir o en general personalizar el tamaño de la letra eso lo vamos a ver a continuación ahora vamos a ver cómo puedes personalizar el tamaño de la letra como puedes cambiar el tamaño de la letra con una propiedad en css vamos por ahora a

quitar las clases que habíamos asignado en la parte anterior a las listas y a los párrafos volvemos a cargar la página y vemos que está en su estado original también en nuestro archivo css vamos a borrar esa regla que teníamos allí por ahora vamos a volver a usar selectores de tipo es importante que practiques con todos los tipos de selectores digamos que queremos seleccionar todos los elementos de tipo h 2 en este caso sería este título que tenemos aquí pero si la página tuviera varios elementos de tipo h 2 se aplicaría el mismo estilo a

todos porque estamos usando un selector de tipo para personalizar o cambiar el tamaño de la letra usamos esta propiedad font-size font se puede traducir como letra o fuente en español isa es significa tamaño así que es el tamaño de la fuente o tamaño de la letra hay distintas unidades que podemos usar una de ellas es px píxeles una de las más comunes es píxeles y aquí puedes ver como inmediatamente vemos el cambio en el tamaño de la letra podemos colocar un número muy muy grande para que puedas ver el resultado 50 y es obvio el

cambio y también podríamos usar un valor más pequeño y tendríamos un título más pequeño como puedes ver el tamaño de la letra no es fijo podemos personalizarlo con css ahora para practicar es tu turno debajo de esta regla css selecciona con un selector de tipo los elementos de tipo h3 y cambia el tamaño de la letra a 25 píxeles 25 tómate algunos segundos si quieres pausar el vídeo mientras lo haces y luego regresa para que veamos el resultado bueno aquí tenemos el resultado el selector de tipo h3 usamos llaves y luego escribimos font-size y el

valor es 25 píxeles recuerda siempre el punto y coma y recuerda que también aquí se debe dejar un espacio entre la llave de apertura y el selector que esto es importante también y un espacio entre los dos puntos y el valor eso nos ayuda a que el archivo sea más fácil de leer si volvemos a cargar la página aquí podemos ver la diferencia ahora el título principal está más pequeño y el título secundario está más grande así que podemos invertir estos valores y ahora si tiene más sentido también qué es lo que ocurre si usamos

varios selectores de tipo para asignar el mismo estilo por ejemplo si en lugar de tener estas reglas tuviéramos algo así p con 620 píxeles luego el font-size 20 píxeles y luego el font 620 píxeles puedes ver que todos tienen el mismo estilo aplicado para escribir esto de forma más concisa podemos simplemente separarlos con una coma y una línea nueva se recomienda veamos cómo huele y le escribimos una coma luego huele y luego o er y así estaríamos aplicando este estilo que está entre las llaves a estos tres tipos de elementos se pueden escribir en una

misma línea pero la guía de estilo de google recomienda escribirlas en líneas separadas para que sean más fáciles de detectar visualmente si volvemos a cargar la página vemos que no hubo diferencia simplemente nuestro archivo css va a ser más conciso más fácil de leer y tenemos menos repetición así que es más fácil si queremos cambiar el estilo o actualizarlo también vamos a ver un ejemplo de un estilo que tiene más de una propiedad porque hasta ahora los ejemplos que hemos visto solo tienen una propiedad y un balón digamos que queremos asignarle a los elementos de

tipo l y les hay tener un elemento de una lista el color de texto azul y también queremos personalizar el tamaño de la letra 15 píxeles podemos hacerlo sin ningún problema así es como puedes escribir una regla con más de una propiedad una propiedad por línea y cada una de las líneas termina con un punto y una coma y deben estar dentro de las llaves volvemos a cargar la página y ahora el estilo se aplicó a los elementos de la lista puedes ver color azul y un tamaño de letra personalizado también aquí porque son todos

los elementos de tipo l otro truco interesante que seguro que te va a gustar o que lo vas a usar en algún momento mientras trabajes con visión estudio course es que puedes dividir la pantalla en dos para ver los dos archivos a la vez el archivo html y el archivo css ahorita en la presentación que tenemos en nuestro editor de código tenemos que hacer clic en las pestañas para ir de un archivo a otro pero siempre es más práctico tener todo a la vista así que podemos hacer clic aquí nos dice split editar split erector

bite o split héctor drawn podemos dividir el editor pero antes de dividirlo tenemos que estar en el archivo que queremos asignar a la derecha hacemos clic aquí y vemos el archivo aquí en la derecha y lo cerramos a la izquierda y aquí tenemos las dos pantallas en simultáneo eso es muy muy útil cuando estás trabajando en un proyecto porque puedes ver la estructura de la página y el estilo que le estás aplicando otro aspecto de la letra que puedes cambiar es la familia de la fuente el tipo de fuente por ejemplo verdana times new roman

helvética distintos tipos de fuentes que puedes asignarle al texto de tu página eso es lo que vamos a ver en la próxima parte así que te veo allí buen trabajo por llegar hasta aquí ya estás avanzando en el mundo de css pasemos a nuestra siguiente parte veamos cómo puedes cambiar el tipo de fuente del tipo de letra con css vamos a borrar esta regla que teníamos aquí para concentrarnos solamente en esta propiedad digamos que queremos cambiar el tipo de fuente el tipo de letra de los elementos h 2 que en este caso sería el título

principal la propiedad para lograrlo se llama font-family font es fuente y family es familia la familia de la fuente el tipo de letra y le vamos a asignar un valor por ejemplo digamos verdana podemos rodear el valor entre comillas o no en este caso porque solo una palabra si es sólo una palabra no habría problema en omitir las comillas pero si el nombre tiene espacios y debemos incluir las comillas si volvemos a cargar la página puedes ver que este tipo de letra se muestra vamos a ver más sobre esta propiedad en la documentación font-family aquí

tenemos un resumen la propiedad font-family y define una lista de fuentes o familias de fuentes con un orden de prioridad para usar en un elemento seleccionado podemos especificar varias fuentes varias familias de fuentes en orden de prioridad porque si una falla o no es reconocida por el navegador por el browser otras se puede usar como un respaldo eso lo vamos a ver más adelante a diferencia de la mayoría de las propiedades css los valores se separan con comas para indicar que son valores alternativos que el nombre de la familia o un nombre genérico se especifica

como el valor el nombre de la familia es el nombre de la familia de la fuente por ejemplo times y helvética son nombres de familia los que contienen espacios deben escribirse entre comillas por ejemplo aquí tenemos times new roman este nombre debe estar rodeado por comillas pero en el caso de verdad no necesariamente porque es una sola palabra también tenemos nombres genéricos se han definido los siguientes nombres genéricos serif sans-serif course y fantasy monospace los nombres genéricos son palabras clave y no deben ponerse entre comillas ok cuando uses alguno de estos nombres genéricos no deben

ponerse entre comillas aquí tenemos algunos ejemplos from spain tenemos entre comillas este nombre de familia y aquí tenemos otro nombre de familia helvética pero no está entre comillas porque es una sola palabra y finalmente tenemos como el respaldo también un nombre genérico sans-serif que no va entre comillas porque es un nombre genérico aquí tenemos una nota un nombre genérico debería ser siempre el último de la lista en una propiedad fantamady porque si ésta falla por ejemplo tenemos esto y si ésta falla tenemos esto y los genéricos los nombres genéricos normalmente son reconocidos por los navegadores

genial en este caso yo no estoy agregando valor es de respaldo porque eso lo vamos a ver en tan sólo unos minutos durante el curso vas a ver cómo puedes agregar estos valores de respaldo pero ahora vamos a ver cómo puedes determinar que en realidad está fuente es verdad porque uno ve un cambio pero como determinamos en realidad que esta fuente es verdad veamos en google chrome tenemos las herramientas de desarrolladores de chrome y aquí como hicimos clic derecho sobre el título luego un inspector vamos directo a seleccionar este elemento en las herramientas las podemos

ver aquí anteriormente habíamos visto estas herramientas como una forma de visualizar la estructura html de nuestra página pero también este panel que vemos aquí abajo nos presenta el estilo css nos presenta estas reglas que hemos creado en css y que le hemos aplicado a estos elementos vamos a expandir este panel para verlo con más detalle si escondemos html por el momento y podemos ver que tenemos un selector de tipo con familia de fuentes verdad esto lo que nosotros escribimos en este momento pero para determinar si verdad no se está mostrando realmente porque está reconocida por

el browser o no tenemos que ir a este panel que dice configure en configure vamos a ver esta presentación que nos habla de tres términos que vas a ver más adelante en el curso y aquí abajo podemos ver esta parte cita que nos dice render fondo podemos traducirlo como el tipo de fuente que se está mostrando en realidad y vemos verdad esa es la letra que en verdad se está mostrando si hubiéramos asignado un tipo de fuente que no está reconocido por el browser veríamos otro valor aquí aunque lo hubiéramos asignado uno respaldo por ejemplo

cambiamos esto a cualquier otro valor que no sea válido sólo para probar si volvemos a cargar la página aquí vemos otro tipo de letra y cuál es el valor final de la fuente es times new roman se asignó por defecto en el navegador el navegador lo asignó por defecto ahora sí volvemos a asignar verdad volvemos a ver aquí verdad genial ya sabes cómo usar las herramientas de desarrolladores de google chrome para verificar que el tipo de fuente es el correcto que se está mostrando esta pestaña está ellos es muy útil en esta herramienta porque aquí

podemos ver los estilos que se aplican a los elementos de nuestra estructura en html si hacemos clic en el elemento aquí abajo vamos a ver los estilos que se le han aplicado las reglas que se le han aplicado puedes ver todos estos estilos y a medida que le vayamos agregando más contenido a nuestro archivo css vamos a ver como la cantidad de reglas que se muestran aquí genial pero en realidad no estamos limitados a usar un tipo de letra específica una familia de fuentes específicas porque google ya se encargó de crear un catálogo de fuentes

que podemos simplemente descargar y usar en nuestras páginas web vas a aprender cómo usarlas y cómo agregarlas a tu página en la próxima parte continuemos otra opción que podemos usar para personalizar la familia de la fuente que usamos es google phone google se encargó de crear todo una colección de fuentes que podemos importar a nuestra página puede descargarlas y mostrarlas en nuestros elementos vamos a ver cómo lo puedes hacer en lugar de verdad vamos a asignarle una una familia de fuente diferente vamos a colocar el browser en pantalla completa y vamos a ir a esta

página que tenemos aquí fondo punto google.com esperamos a que se cargue y aquí puedes ver cómo se van mostrando los distintos tipos de letra por ejemplo digamos que queremos usar robots en esta fuente que tenemos aquí como la podemos asignar a este elemento que tenemos en nuestra página hacemos clic en ese elemento en robot y podemos ver distintos estilos de esa fuente de ese tipo de letra podemos escoger cualquiera de estos estilos parece tipo de letra y simplemente lo que hacemos vamos a escoger uno que sea como un intermedio aquí hacemos clic en select de

ese estado seleccionar este estilo y luego tenemos dos opciones en este caso vamos a usar esta que es un link un elemento link que podemos agregar a nuestro archivo html lo que debemos hacer es copiar estos elementos que es si los miras detalladamente puedes ver que son elementos de tipo link se deben colocar en el elemento head del html ya lo copié con control se y luego si vamos aquí vamos a el archivo html dentro del elemento head aquí en el medio colocamos los elementos que acabamos de copiar los inventamos adecuadamente para que estén al

mismo nivel para asignarle ese tipo de letra al elemento h 2 en lugar de verdad lo que tenemos que hacer es copiar y pegar esto que tenemos aquí esto incluye la propiedad sounds friendly guardamos el archivo y se asigna roboto y y respaldó el tipo de letra de respaldo sería sans series ahora si vamos a nuestra página y volvemos a cargar la página podemos ver esta letra que tenemos aquí la letra que importamos ahora digamos que queremos usar otro tipo de letra diferente vamos a volver a la página principal hacemos clic en el logo de

google fans y por ejemplo digamos que queremos usar algo como una letra más escrita a mano hacemos clic aquí y podemos seleccionar ese estilo ahora vemos que no se muestra el panel porque sólo se abre ese panel la primera vez que seleccionamos un tipo de letra pero puedes volver a abrir ese panel aquí en este icono que podemos ver aquí dice ver las familias seleccionadas hacemos clic y vemos el panel pero ahora podemos ver que se actualizó este elemento al final así que tenemos que volver a copiar y pegar esto en nuestro archivo html para

actualizarlo así vamos a poder incluir los dos tipos de letras aquí borramos nuevamente pegamos los elementos y ahora puedes ver que están actualizados tenemos dos familias de fuentes dos tipos de letra genial guardamos y luego vamos aquí a nuestro archivo cfs digamos que quiero asignar ese tipo de letra nuevo al título aquí tenemos como especificar la en nuestro css copiamos y pegamos y aquí tenemos nuestro tipo de letra a aplicado a nuestro elemento también podríamos personalizar el tamaño de la letra quizás 50 genial con este enlace que tenemos actualizado estamos incluyendo estamos descargando los dos

tipos de letra o sea que podemos usar ambos tipos de letra en nuestro css digamos que queremos asignar robots a este elemento que tenemos aquí vamos a asignarle ese tipo de letra a los elementos de tipo h3 h 3 vamos a google font aquí vemos cómo lo podemos asignar robot y luego volvemos a cargar la página y puedes ver este tipo de letra robot o asignado exactamente el estilo y también el tipo de letra porque puedes ver que está en negrita que escogimos cuando seleccionamos entre los distintos estilos buen trabajo ya sabes cómo usar grupos

en la próxima parte si vamos a ver cómo podemos lograr que haya un tipo de letra de respaldo lo vamos a ver en acción vamos a verlo más detalles cómo funciona y qué es lo que ocurre si no se puede cargar esta letra en la próxima parte debe oye vamos a ver cómo actúan estos tipos de letra de respaldo cuando usamos cupones por ejemplo esa fuente o ese tipo de letra se va a descargar de internet y digamos que internet falla o por alguna razón ese tipo de letra o ese archivo no está disponible que

es lo que va a ocurrir este tipo de letra va a venir al rescate y se va a utilizar como un respaldo para que igual se pueda presentar la página web vamos a ver un ejemplo de esto pero antes vamos a seleccionar solamente un tipo más de letra para que podamos ver el efecto vamos a escoger este en mundo libre que no sea tan gruesa la letra volvemos a actualizar elemento link para los elementos link en html guardamos y ahora ya podemos usar gemunu libre vamos a asignar selo a los elementos que tenemos aquí a

este elemento que es un enlace vamos a asignar solo los elementos a pegamos esta propiedad y si volvemos a cargar la página puedes ver que tenemos las letras personalizadas esta que tenemos aquí qué ocurre si yo pago o deshabilitó el internet en mi caso yo puedo desactivar el internet en mi computadora voy a hacerlo y vamos a ver el resultado ya de se active el internet vamos a volver a cargar la página a ver qué ocurre aquí puedes ver que si se cargó la página correctamente y vemos las letras por qué porque para mejorar la

experiencia del usuario el navegador ya guardó ese tipo de letra así que se muestra pero si entramos en el modo incógnito en el cual no tenemos esa función de que algo se pueda guardar y hacemos clic en enter vamos a ese mismo archivo puedes ver que se usan otros tipos de letra porque porque estamos usando el tipo de letra de respaldo sans-serif en lugar de el tipo de letra que habíamos especificado porque como no tenemos internet no se pudo descargar ese tipo de letras y esa familia de fuentes se usa como respaldo pero igual el

usuario puede ver la página puede acceder al contenido puedes especificar varios tipos de letra de respaldo por si acaso alguna o algunas no están disponibles sólo tienes que separarlas con una coma y luego un espacio después de la coma y se van a tratar de asignar los tipos de letra de izquierda a derecha genial ya hemos hablado bastante sobre los tipos de letra vamos a volver a nuestra página personalizada aquí en la próxima parte vamos a empezar a hablar sobre las imágenes cómo puedes cambiar o definir su tamaño y cómo puedes personalizar su presentación con

cfs así que te veo allí vamos a comenzar a trabajar con una parte muy importante de las páginas web las imágenes podemos escoger su tamaño para que se presenten como nosotros queremos o como nosotros esperamos en la página para eso hay una propiedad llamada web en español significa ancho probemos qué ocurre si usamos el selector de tipo para el elemento img image imagen y la propiedad web el ancho puede tener varias unidades en este caso vamos a seleccionar un ancho de 200 píxeles si volvemos a cargar la página puedes ver que ahora las imágenes se

muestran más pequeñas y todas tienen el mismo ancho 200 píxeles pero en reajustadas y mantuvieron también sus proporciones genial en este caso estamos afectando a todas las imágenes de la página porque usamos el selector de tipo pero qué ocurre si solo queremos cambiar el ancho o aplicar ese estilo específico a ciertas imágenes por ejemplo si queremos aplicárselo a las imágenes de gatos para eso tenemos las clases vamos a ver cómo podemos usar una clase para este propósito no vamos a afectar o sea no queremos afectar la imagen de la lasaña pero si las dos imágenes

de gatos que tenemos aquí vamos a crear una clase a escribir una clase aquí que se llame imagen de gatos la primera la tenemos aquí como un enlace y podemos por ejemplo antes de out agregar class de esta forma clase imagen de gato y luego aquí abajo aquí imagen de gatos y agregamos la clase a las dos imágenes y ahora nos vamos a dar nuestro archivo css un punto imagen de gatos debe estar escrito exactamente igual si usamos una s aquí en plural la clase en html debe estar escrita de igual forma sino el estilo

no se va a aplicar lo que vamos a hacer es asignarle un ancho de 200 píxeles en él vamos a volver a cargar la página y ahora puedes ver que esta imagen está más angosta tiene 200 píxeles esta imagen no fue modificada pero ya vamos a ver por qué para esta imagen no incluimos la s así que tenemos que agregarlo y si volvemos a cargar la página ahora si vemos que la imagen tiene un ancho de 200 píxeles que coincide con el ancho de la imagen aquí que tenemos abajo esta imagen no fue afectada porque

no tenía esa clase imagen de gatos genial ya sabes cómo controlar el ancho de tus imágenes también podemos hacerla más pequeña por ejemplo digamos 100 píxeles exactamente como queríamos y ves que también la imagen mantiene sus proporciones en la próxima parte vamos a ver cómo puedes agregar un borde alrededor de elementos como las imágenes eso puede ayudar también a resaltar tus imágenes en tu página web o cualquier elemento con el que estés trabajando así que te veo en la siguiente parte con la misma clase que creamos en la parte anterior vamos a ver cómo puedes

agregarle un borde a estas dos imágenes como lo podemos hacer con tres propiedades muy importantes el primero es border with wave es ancho y poner es borde se puede traducir como el borde del elemento le asignamos un valor por ejemplo 5 píxeles cuanto mayor sea este valor más ancho es el borde también debemos especificar el color del borde digamos que es azul y después border style el estilo del borde el primer estilo que vamos a ver es soler sólo significa sólido en español es básicamente una línea continua alrededor del elemento si volvemos a cargar la

página aquí podemos ver el resultado vemos un borde sólido alrededor de la imagen si cambiamos el valor del ancho del borde podemos ver que se hace más pequeño o también podemos hacer que sea más ancho y aquí vemos el borde normalmente tratamos de conseguir un balance depende de la presentación que quieras darle el elemento el color digamos boom y luego el estilo el estilo es algo interesante porque hay muchas opciones para el estilo primero esta norma que se usa para decir que no queremos que haya ningún borde ya no queremos que haya un borde por

ejemplo aquí vemos que si ponemos no no existe el borde ya no se muestra normalmente usamos esto si ya veníamos usando un estilo de borde en ciertos elementos y eso se hubiera aplicado a por ejemplo esta imagen pero no queremos que se aplique esa imagen en particular entonces decidimos que para esta imagen no se aplica o los que tengan esta clase bien otro valor que podemos usar estos tests docter significa punteado eso nos daría un borde punteado como puedes ver aquí también podemos tener una línea que está conformada como por pequeños segmentos de líneas elementos

aquí pequeños como puedes ver hay pequeñas separaciones dentro de la línea este estas otra opción stop un doble y equipo de ver que tenemos como un borde interno y un borde externo y la separación entre ellos depende de este ancho que especificamos otra opción es cruz que el club es como un surco y vas a ver que se se parece un surco aquí podemos ver que con los colores se genera como un efecto visual que hace como si hubiera un surco en el marco o si el marco estuviera en tres dimensiones otra opción es bridge

beige significa cresta en español aquí lo podemos ver y tenemos otras dos opciones insef o out estas son las opciones también podemos personalizar cada uno de los lados del borde no necesariamente porque uno de los lados sea sólido el otro debe ser sólido podemos hacer distintas combinaciones si escribimos un solo valor para el estilo ese estilo se va a aplicar a todos los lados todos los bordes del elemento aquí vemos el resultado de dos valores sólido y potente el primer valor aplica para arriba y para abajo y el segundo valor aplica para la izquierda y

para la derecha si escribimos tres valores vamos a especificar por ejemplo quizás solitas y 12 si volvemos a cargar la página puedes ver esta combinación vemos sólido el primer valor se aplica en la parte superior el borde de arriba dust se explican los lados en la derecha en la izquierda y dos sets se aplica en la parte de abajo en el borde inferior y también podemos simplemente especificar los cuatro valores y se van a asignar en el orden de las agujas del reloj ya vas a ver aquí lo tenemos solé para arriba el borde superior

dust para la derecha dos test para la parte inferior el borde inferior y tapa para el borde izquierdo en el sentido de las agujas del reloj genial ya sabes cómo personalizar el borde de los elementos de tu página web en la próxima parte vamos a ver cómo puedes hacer que los bordes de tus imágenes o de sus elementos en html sean redondeados esto también nos sirve para crear el efecto de que una imagen es circular presentar por ejemplo esta imagen como un círculo en lugar de un cuadrado bien te veo en la siguiente parte del

curso volvemos a nuestra página inicial ahora nuestro archivo css está vacío y queremos crear una clase que se llama bordes redondeados el elemento que tenga esta clase va a tener los bordes ligeramente redondeados normalmente usamos esta propiedad para imágenes la propiedad se llama border beiras radio del borde y dependiendo de su valor cuanto mayor sea el valor en píxeles mayor va a ser el efecto del borde redondeado ya vas a ver a qué me refiero vamos a agregarle esta clase a la imagen del gatito nos vamos para aquí y para mostrarte que no importa el

orden de las propiedades vamos a agregarle aquí bordes redondeados guardamos el archivo y volvemos a cargar la página y aquí puedes ver cómo tenemos este lindo efecto de un borde redondeado en la página cuanto mayor sea el valor más visible va a ser ese efecto de redondear aquí lo podemos ver 150 así lo prácticamente tenemos un círculo perfecto aquí es muy común en internet conseguir imágenes con los bordes redondeados e incluso circulares también puedes especificar este valor como un porcentaje eso lo vamos a ver en la próxima parte si queremos hacer que esta imagen sea

un círculo o que tenga los bordes redondeados como un círculo parecido un círculo usaríamos un valor cercano a 50% si volvemos a cargar la página aquí puedes ver que la imagen como era cuadrada ahora se presenta como un círculo si agregamos esta clase bordes redondeados a las otras imágenes que tenemos aquí por ejemplo la hazaña aquí y le agregamos la clase bordes redondeados puedes ver cómo se redondea también la imagen en este caso como la imagen es un rectángulo en lugar de un cuadrado no obtenemos como tal un círculo perfecto más como un óvalo y

ese ejemplo es aún más extremo en esta imagen le agregamos la clase bordes redondeados y aquí puedes ver la imagen como se presenta como un óvalo también podemos disminuir este valor por ejemplo a 20% y vas a ver que ahora los bordes son redondeados pero nos forman como tal un círculo un óvalo cuanto menor sea el valor menos redondeado van a ser los bordes normalmente usamos 50% si queremos que la imagen sea circular ovalado genial ya sabes cómo redondear los bordes de las imágenes e incluso presentarlas en forma de círculo en la próxima parte vamos

a empezar a trabajar con los contenedores generales los 10 cómo podemos asignarles un color de fondo veámoslo en la próxima parte bien ahora vamos a borrar esta regla y vamos a ver cómo puedes cambiar el color de fondo de un día un día vimos que es como un contenedor con un propósito general lo usamos para actuar como un contenedor para cualquier tipo de elemento y dijimos que los tips iban a ser muy importantes cuando empezamos a trabajar con css porque podíamos asignarles un estilo y ese estilo se iba a aplicar también a los elementos contenidos

en el tiff bien así que aquí tenemos nuestro test que teníamos en html que contiene las listas de las cosas que los gatos amas y las cosas que los gatos odian también podríamos si queremos por ejemplo colocar esta imagen dentro del 10 la imagen que corresponde a los gatitos vamos a empezar usando un selector de tipo vamos a seleccionar todos los elementos de tipo tif y vamos a su color de fondo background significa fondo en español y color color color de fondo le vamos a asignar al color azul si volvemos a cargar la página aquí

podemos ver el color azul de fondo y confirmamos que en realidad si existía ese contenedor lo que es que estaba como transparente allí haciendo su función de generar la estructura de la página pero ahorita ya podemos hacer que sea visible y podemos confirmar que existe en este caso en tip se está extendiendo más allá de la imagen veamos qué ocurre si volvemos a colocar la imagen fuera del dif vamos a copiar este elemento y lo pegamos aquí fuera del contenedor si volvemos a cargar la página puedes ver que ahora en ti es como que se

encogió porque ya sólo cubre hasta esta lista no contiene a la imagen y así puedes ver visualmente qué es lo que ocurre cuando creamos un dif en nuestra página estamos creando algo que está allí presente y que inicialmente es transparente y que sirve como un contenedor para los elementos también podemos agregarle una clase antes vamos a agregarle la clase con tenedor listas y así la vamos a aplicar un estilo específico y vamos a asignarle el color plateado silver en inglés si volvemos a cargar la página aquí puedes ver también funcionan las clases y esto abre

todo un mundo de posibilidades lo vas a ver también más adelante cuando empecemos a ver las variables css como los días pueden ser transformados y como pueden cambiar su forma y su aspecto para crear estructuras increíbles ahorita sólo estamos viendo que ellos existen en realidad y que son parte de la estructura de la página bien hasta ahora hemos trabajado principalmente con las clases en css así que vamos a ver cómo puedes trabajar con un haití en la próxima parte nuevamente comenzamos con el estado inicial de nuestra página y tenemos un archivo css vacío porque porque

vamos a usar idish el haití es un identificador único para un elemento en tu página si vamos aquí a nuestro archivo html podemos ver el elemento h 2 si nosotros queremos asignarle un estilo solamente a ese elemento podemos asignarle un haití y solo se va a aplicar ese estilo a ese elemento específico le tendríamos que asignar un haití por ejemplo título a datos o título principal tu puedes escoger el nombre que te parezca más descriptivo y una de las convenciones es separar las palabras con un guión al igual que hacíamos con las clases vamos a

css y ahora en lugar de escribir un punto como hacíamos con las clases vamos a escribir un símbolo de numeral título up datos ese numeral le dice acs se le dice el navegador o el browser que lo que estamos escribiendo aquí es el nombre de un ied y de un identificador único que vamos a asignarle como estilo a ese elemento vamos a especificar un tamaño de letra de 30 píxeles color del texto va a ser verde wing el tipo de letra va a ser este que tenemos aquí que nos lo auto completo y es con

genial vamos a volver a cargar nuestra página y podemos ver el estilo aplicado solamente a ese elemento vemos un tamaño de letra más grande vemos un color específico y un tipo de letra distinto genial vamos a practicar nuevamente con digamos esta imagen que tenemos aquí abajo vamos a asignarle un estilo específico a ese elemento para eso debemos conseguirlo nuestro archivo si colocamos nuestro editor de código en pantalla completa vamos aquí y este es el elemento de la imagen de los gatitos y ahora le vamos a asignar una imagen de gatos si vamos a nuestro archivo

css escribimos el símbolo de numeral y colocamos el nombre de lady imagen de gatos s ti es único para esta imagen el estilo que vamos a aplicar se va a aplicar solo a esta imagen por ejemplo podemos decir que queremos asignarle un borde y queremos que la imagen sea redondeada podemos asignar un border 22 de 50% para que la imagen sea redondeada podemos asignar un ancho del borde el estilo va a ser sólido y el color digamos que es marrón brawn si guardamos el archivo y volvemos a cargar la página aquí podemos ver el resultado

podemos verlo en pantalla completa también aquí tenemos nuestro borde sólido alrededor de una imagen redondeada y puedes ver que nos afectó a ningún otro elemento en la página genial el uso de haití es muy importante también cuando comiences a trabajar con javascript los haitís además de permitirnos especificar un estilo único para ese elemento también nos permite que javascript seleccione ese elemento y actúe sobre ese elemento de forma única genial vamos a practicar con dos elementos más cómo puedes asignarles un haití y cómo puedes personalizar su estilo vamos a personalizar el estilo de la lista de

las cosas que los gatos aman y la lista de las cosas que los gatos o bien vamos a aquí tenemos que de subir un poquito y llegamos a la lista vamos a asignarle una idea al elemento web y ya vas a ver qué es lo que va a pasar listo gatos aman por ejemplo lista de las cosas que los gatos aman para no hacerlo tan largo el nombre sólo vamos a incluir esas tres palabras y también vamos a asignarle aquí un haití lista gatos odian ya tenemos los dos aires ahora vamos a especificar el estilo

lista gatos aman vamos a asignarle un tamaño de letra de 15 píxeles luego el color vamos a asignarle azul violeta blue bay o led y para lista gatos odian vamos a asignarle un tamaño de letra específico 18 píxeles y el tipo de letra va a ser harian helvética y sans-serif de respaldo si guardamos el archivo y volvemos a cargar la página aquí puedes ver el estilo aplicado a cada una de las listas y algo muy curioso es como el estilo cae en cascada de allí viene el nombre css la cec en inglés significa qashqai link

que cae en cascada representa este efecto que vemos aquí cuando nosotros le asignamos al elemento huele studying estamos asignando selo el elemento huele y ese elemento principal tiene tres elementos internos o contiene tres elementos el e y el estilo como que cae en cascada a través de la estructura que nosotros creamos porque puedes ver que aquí nosotros estamos especificando el color del texto para el elemento l que es el que tiene el haití pero ese mismo color de texto se aplicó para los elementos l y internos aquí lo tenemos así que el estilo está como

cayendo en cascada y eso es precisamente el principio de css genial ya sabes cómo trabajar con haití ccss recuerda que tienes que escribir un símbolo del numeral un hashtag seguido de el nombre de lighting y luego las sintaxis es básicamente la misma llaves y dentro de las llaves en cada línea una propiedad con su valor y al final de cada propiedad un punto y coma genial pasemos a nuestro siguiente tema vamos a comenzar a ver algo muy muy importante en desarrollo web cómo puedes controlar el espacio que hay alrededor de tus elementos para que se

presenten como tú lo deseas así que continuemos te veo allí bien comenzamos viendo el concepto de padding el padre en html es la distancia que hay entre el borde de un elemento html que normalmente es un cuadrado un rectángulo y su contenido porque por ejemplo aquí tenemos una nueva estructura html de nuestro archivo que solo contiene una imagen esta imagen que vemos aquí dentro de un dif st tiene un borde específico vamos a ver cómo podemos controlar el espacio entre ese borde y el contenido de cada uno de los elementos ya lo vas a ver

visualmente vamos a asignarle un color de fondo el 10 que actúa como un contenedor vamos a asignarle el color crimson si volvemos a cargar la página aquí puedes ver dónde está ubicado el tiempo la imagen está alineada su esquina superior izquierda está alineada con la esquina superior izquierda del dif por defecto y aquí podemos ver que todavía queda un espacio del tiff que no está lleno el deber contiene la imagen ahora si queremos ilustrar el efecto de agregarle padding a una imagen primero para ilustrarlo vamos a asignarle un color de fondo amarillo si volvemos a

cargar la página no lo vamos a ver porque en este momento la imagen llena la totalidad del elemento imagen sé que ahorita puede parecer un poco abstracto pero sea aquí piensa como que el elemento de la imagen llega hasta un borde específico que es donde ve desde el borde de la imagen pero este elemento en html su contenido es la imagen como tal vamos a ver lo vamos a ilustrar lo añadimos un color de fondo para visualizar dónde está el borde del elemento de la imagen vamos a asignarle a un ancho luego un color vamos

a asignarle el color negro porque el fondo va a ser amarillo si podemos verlo bien y el estilo va a ser sólido si volvemos a cargar la página puedes ver que ahora vemos un borde negro alrededor de el elemento en este momento la imagen llena la totalidad del elemento de imagen pero si le agregamos una propiedad llamada padding y escogemos un valor por ejemplo 15 píxeles vas a ver qué es lo que ocurre aquí lo tenemos es como su margen interno lo podrías pensar así no es un margen como tal le asignamos el nombre karen

pérez la distancia entre ese contenido y su borde el fondo de la imagen es amarillo por eso vemos aquí el fondo amarillo puedes pensarlo como que el elemento html existe y es transparente y sirve como un contenedor y su contenido como tal es la imagen pero también podemos especificar este espacio si vamos a las herramientas de desarrolladores de google chrome hacemos clic derecho el inspector y sobre la imagen del gatito podemos ver aquí aquí abajo en este panel en styles mientras tenemos seleccionado el elemento de la imagen podemos ver aquí un elemento que se llama

par en ese pared está ahorita seleccionando la parte amarilla que podemos ver y dentro está el contenido hasta la imagen y luego está el borde el padre luego el borde y después viene algo que llamamos el margen que lo vamos a ver en la próxima parte del curso por ahora nos centramos en primero el contenido luego el padre que lo tenemos en amarillo luego el borde finalmente el margen para verlo más claramente creo que si le asignamos el valor morado el color morado aquí y colocamos el cursor sobre parent también se puede ver más claramente

puedes ver cómo estamos seleccionando esa parte y se vuelve violeta más claro ok recuerda el padre entonces es la distancia entre el contenido de un elemento html y su borde para que hay un espacio entre el contenido y el borde del elemento porque el borde del elemento va a ser esencial para determinar la distancia que hay entre un elemento y otro en la página web genial pasemos a la siguiente parte donde vamos a ver cómo puedes asignar distintos valores de parís para cada lado del elemento porque no necesariamente debemos tener el mismo paren en todos

los lados del elemento así que continuemos y pasemos a la siguiente parte ahora veamos cómo puedes asignarle un ar indistinto a cada uno de los lados de tu elemento porque en este momento puedes ver que el park inn en el borde superior es igual al parking en el borde derecho al borde izquierdo y el borde inferior como podemos personalizarlo para cada borde dependiendo de cómo queremos presentar el contenido simplemente en lugar de escribir padding lo que escribimos es para ir seguido de un guión y especificamos el borde al cual nos estamos refiriendo paddington es el

borde superior top es se refiere al borde superior luego podemos colocar marín brain el parking en el borde derecho right significa derecho el par en life lift significa izquierdo por ejemplo 10 píxeles y finalmente padding en el borde inferior varón 10 píxeles ahora puedes ver que la distancia entre el contenido del elemento que es la imagen y su x ven no es la misma en la parte superior que en la parte inferior y no es la misma en la parte izquierda que en la parte derecha hay una forma aún más concisa de especificar esto en

lugar de tomar cuatro líneas para especificar cada uno de los bordes simplemente podemos escribirlos en una sola línea vas a aprender cómo en la próxima parte para especificar el padre indicado uno de los lados del elemento en una sola línea en lugar de cuatro como tenemos aquí solo debemos escribir paren de forma general es estar en y luego especificamos los valores en el sentido de las agujas del reloj comenzando con el borde superior que es 20 en este caso sí que podemos ya borrar esto luego sería el borde derecho recuerda que el reloj hace este

movimiento así que vamos del borde superior al borde derecho el borde derecho debería tener 15 píxeles según nuestras reglas anteriores luego en lugar de ir a la izquierda iríamos al borde inferior sería 5 píxeles y finalmente el borde izquierdo 10 píxeles aquí ya podemos borrar estas dos líneas y tenemos el padre especificado para cada uno de los valores en el sentido de las agujas del reloj si volvemos a cargar la página puedes ver que el efecto fue exactamente el mismo tenemos el parís superior el derecho el inferior y el izquierdo en el sentido de las

agujas del reloj ya sabes cómo trabajar con el paren recuerda que es la distancia entre el contenido de un elemento y su borde pero también podemos especificar la distancia que debe haber entre el borde del elemento y otros elementos que lo contengan o que estén junto al elemento eso se denomina el margen pasemos a la siguiente parte para comenzar a hablar sobre el margen continuamos con nuestro ejemplo con la imagen del gatito y el tic que lo contiene ahora en lugar de hablar del padre vamos a hablar del margen el margen el margen es la

distancia entre el borde de un elemento por ejemplo aquí tenemos el borde negro del elemento de la imagen y el borde de otros elementos que es básicamente cómo vamos a separar los distintos elementos antes estábamos separando el contenido de un elemento de su borde ahora vamos más allá del borde y separamos un borde de otro borde de otro elemento básicamente con el margen logramos la separación entre los elementos de la página un ejemplo es la separación entre esta imagen y su contenedor en este momento vemos que la esquina superior izquierda de la imagen está alineada

con su contenedor en tiff porque no vemos un borde rojo aquí que es el el 10 el contenedor están alineados pero si queremos agregar un borde citó entre la imagen y su contenedor para presentación deberíamos usar el margen para esto escribimos margen en inglés y tenemos 15 píxeles volvemos a cargar la página y aquí puedes ver cómo se separan esas esquinas porque estamos agregando 15 píxeles de distancia en el borde superior en el borde derecho en el borde inferior y en el borde izquierdo aquí lo podemos ver en pantalla completa en este caso es si

estamos agregando los 15 píxeles en el borde derecha pero como el 10 toma todo el ancho de la pantalla no se nota pero si hubiera otro elemento aquí al lado tendría 15 píxeles de separación vamos a cambiar el color del borde a blanco para poder verlo mejor ac puedes ver la distancia que hay entre el borde blanco y el borde del contenedor tenemos una distancia entre ese borde y el borde del contenedor igual que tendríamos entre este borde y cualquier otro elemento que esté alrededor de la imagen del gatito ese es el propósito del margen

veamos en las herramientas de desarrolladores de chrome cómo se presenta esta imagen hacemos clic derecho sobre el elemento luego inspector y aquí en el panel inferior seleccionando la imagen vamos nuevamente a esta presentación que nos habla sobre el contenido del elemento que es la imagen luego sobre el fading que en este momento no existe no tenemos paren porque no lo estamos personalizando en css así que vemos una rayita no existe luego tenemos el borde que es la línea blanca podemos ver cómo pasa de blanco amarillo cuando lo seleccionamos y finalmente aquí tenemos un margen ese

margen que ahorita estás viendo en naranja tiene un valor de 15 píxeles podemos ver el número 15 aquí y básicamente ningún otro elemento va a estar dentro de esa distancia del elemento de la imagen es la distancia entre este elemento y cualquier otro elemento que lo rodee o que lo contenga ese es el propósito del margen en html y es muy importante comprender la diferencia entre el margen y el par en el margen y estar en vamos a ver la diferencia entre martín y padding más adelante en el curso unos minutos en la próxima parte

vamos a ver cómo puedes especificar un margen diferente para cada uno de los bordes así que veamos cómo puedes hacerlo en la próxima parte digamos que en lugar de tener el mismo valor para el margen en cada uno de los lados del elemento queremos que el margen superior sea mayor que el inferior o que el derecho sea más amplio más ancho que la izquierda podemos hacerlo con propiedades específicas las mismas propiedades que teníamos comparen pero ahora tenemos margen margin top 20 margin right 15 por ejemplo sólo un ejemplo valores de muestra margin bottom que si

el margen inferior y margin-left el margen izquierdo como tenemos especificadas cada una de estas propiedades de forma individual no tenemos que colocar esta propiedad si volvemos a cargar la página puedes ver como ahora el margen izquierdo es mucho más angosto mucho más pequeñito porque estamos asignando son los 5 píxeles a ese margen no necesariamente también tienes que especificar todos los márgenes por ejemplo si no quieres que haya un margen superior simplemente no lo incluyes y de esta forma la imagen va a estar inmediatamente alineada con el borde superior de su contenedor no va a haber

separación también puedes colocarlo así y puedes ver cómo simplemente podemos personalizar cómo se va a separar nuestro elemento de otros elementos y de su contenedor genial y también hay otra forma mucho más concisa de escribir el margen en una sola línea al igual que hacíamos con el par y eso lo vamos a ver en la próxima parte vamos a volver a cargar la página y vemos nuevamente el resultado al igual que hacíamos con el park inn podemos especificar el marcha y en el margen en una sola línea de esta forma escribimos margin y en lugar

de especificar cada una de estas individualmente en la misma línea las escribimos en el sentido de las agujas del reloj primero el margen superior luego el margen derecho que sería 15 píxeles el margen inferior 10 píxeles y finalmente el margen izquierdo que sería 5 píxeles vamos de esta forma superior derecho inferior izquierdo ahora podemos borrar estas líneas y puedes ver cómo tenemos css mucho más conciso en una sola línea especificamos esas cuatro propiedades también si queremos asignar el mismo margen arriba y abajo izquierda a derecha simplemente lo que tenemos que hacer es especificar dos valores

este se aplicaría a el margen superior y el margen inferior y éste se aplicaría al margen izquierdo y derecho aquí lo podemos ver podemos comprobar que se está aplicando estos márgenes con las herramientas de desarrolladores de chrome si abrimos nuevamente las herramientas seleccionando la imagen aquí podemos ver el valor del margen superior es 20 derecho es 15 inferiores 20 e izquierdo es 15 le asignamos superior e inferior el mismo valor y derecho izquierdo el mismo valor con dos valores que tenemos aquí genial esta es otra forma también de especificar lo de forma más precisa en

lugar de escribir esto escribir valores repetidos sólo escribimos dos valores superior inferior derecho izquierdo ya sabes cómo trabajar con el margen y con el padre con el margen y con el marín ahora creo que es importante dedicar también algunos minutos a hablar sobre sus diferencias e ilustrar las visualmente así que en la próxima parte vamos a ver en el mismo elemento el martín y atar en y cómo funcionan como están relacionados uno con el otro y sus diferencias vamos a ver la diferencia entre el margin y el karim visualmente con la imagen del gatito en

el mismo elemento vamos a asignar margen y tar en martín y paren vamos a borrar esta propiedad por el momento y vamos a hacer algunos ajustes antes de comenzar a ver las diferencias el ancho del borde lo vamos a colocar en 4 píxeles el color del borde va a ser negro y el estilo sólido ok podemos colocarlo en negro o también dejarlo en blanco pero creo que en este caso el negro nos va a ilustrar más porque vamos a poder ver el borde aquí junto al tigre así que vamos a comenzar a ver la diferencia

vamos a asignar un margen de 25 píxeles y un párking de 25 píxeles a todos los lados del elemento imagen que vamos a volver a cargar este elemento y aquí lo podemos ver en pantalla completa el paren la distancia que hay entre la imagen que es el contenido de ese elemento y su borde el borde negro que tenemos aquí es el borde de el elemento imagen y esta distancia que tenemos aquí amarilla este amarillo es el par en que estamos asignando como tal el padre y no tiene un color no es que el padre es

amarillo el color amarillo es el fondo que le estamos asignando a ese elemento de imagen aquí lo puedes ver estamos asignando le un color de fondo amarillo al elemento imagen y ese es el color que se ve aquí para ilustrar para que veamos que si hay una distancia entre estas dos partes del elemento entre el contenido y su borde este es el padre ahora una vez que llegamos al borde de el elemento tenemos una distancia externa con otros elementos eso es lo que denominamos margen el margen es esta distancia que puedes ver en rojo entre

el borde de la imagen y su contenedor también sería la distancia entre ese borde y cualquier otro elemento que lo rodea ese es el margen puedes ver la diferencia el parís se puede considerar como una distancia interna entre el borde o la frontera del elemento y su contenido y el margen es una instancia externa con otros elementos veamos las herramientas de desarrolladores de chrome seleccionamos la imagen vemos que el contenido es una imagen la imagen del gatito de 281 por 281 su tamaño luego viene una distancia que se llama el área con un valor de

25 a cada lado imagen paren luego vemos el borde el borde tiene un tamaño un ancho de 4 píxeles por eso vemos el valor 4 aquí y se marca el borde en la página imagen estar en borde y luego cuando ya vamos fuera del borde tenemos un margen de 25 píxeles esto lo vemos aquí en naranja en la página y el 25 píxeles a cada lado puedes ver como el mismo elemento puede tener karim que es como un margen interno y el margen que es la distancia entre el elemento y los elementos que lo rodean

veamos qué pasa si quitamos el color de fondo de estos elementos para que no sea tan obvio que es algo que normalmente vamos a hacer en las páginas web vamos a asignarle margen y padre y sin tener necesariamente un color de fondo vamos a quitar esto pero si vamos a asignarle un borde al contenedor antes vamos a copiar estas tres propiedades para que podamos ver la distancia que hay entre los elementos volvemos a cargar la página y podemos ver esto ahora este es este el contenedor que tenemos por fuera tenemos el elemento de la imagen

y no se ve ningún color de fondo pero si vemos el espacio y eso es lo que va a ocurrir en las páginas web normalmente vamos a ver es un espacio en la estructura de la página y eso nos va a permitir personalizar aún más la ubicación del contenido y de los elementos genial ya puedes trabajar con margin y comparen bien ahora que ya sabes cómo trabajar comparen y con margin en css ahora vamos a comenzar a ver un tipo de selector distinto inicialmente trabajamos con los selectores de clase y los selectores de haití en

este momento vamos a comenzar a trabajar con los selectores de atributo veamos la documentación a ver qué nos dice sobre este tipo de selector selectores de atributos los elementos pueden tener atributos que proporcionan un nivel de detalle mayor sobre el elemento que delimitan esto todo lo hemos visto durante el curso los atributos como por ejemplo hr fo out en las imágenes esos son atributos en css puedes utilizar selectores de atributo para seleccionar elementos definidos con unos atributos determinados básicamente vamos a usar los selectores de atributo para seleccionar solamente los elementos que tienen ciertos atributos aquí

tenemos algunos ejemplos selectores de presencia y valor estos electores permiten seleccionar un elemento a partir de la presencia de un atributo por ejemplo a ser rey oa partir de varias coincidencias diferentes con respecto al valor del atributo vamos a ver algunos ejemplos en esta tabla este es un ejemplo de un selector de atributos por ejemplo aquí tenemos a y entre corchetes está el título cuando usamos este selector estamos escogiendo los elementos de tipo a que tienen el atributo tyrone cuando usamos esto que es un poquito más elaborado estamos seleccionando los elementos que tengan un atributo

con un valor específico por ejemplo aquí estaríamos seleccionando todos los elementos de tipo a los enlaces que llevan a esta dirección web específica con este valor del atributo a ser draft también tenemos otras variaciones pero en este curso vamos a trabajar con estos dos ejemplos principales seleccionar los elementos que tengan un atributo específico y elementos que tengan un atributo con un valor específico comencemos a ver nuestro ejemplo tenemos nuevamente nuestra página de los gatitos el mismo archivo html con el que hemos estado trabajando y aquí vamos a ir a nuestro archivo css digamos que queremos

asignarle un estilo por ejemplo a todas las imágenes que tengan el atributo out si sigues las recomendaciones todas las imágenes deberían tener un atributo out pero este ejemplo es simplemente para ilustrar cómo funcionan los selectores de atributo aquí si vamos por ejemplo a la imagen de la lasaña podemos ver que ese elemento tiene aquí el atributo out así que ese elemento debería ser seleccionado al igual que cualquier otra imagen que tenga este atributo definido vamos a asignarle un por rangers de 50% para que sea circular con los bordes redondeados volvemos a cargar la página y

aquí podemos ver que todas las imágenes han sido redondeadas porque todas tenían un atributo out como debe ser pero ahora vamos a probar qué ocurre si le quitamos ese atributo al elemento de la imagen de la lasaña por ejemplo esto es sólo un ejemplo para ilustrar cómo funcionan los selectores de atributos volvemos a cargar la página y ya puedes ver que ahora esta imagen no fue afectada por ese estilo no se le asignó ese estilo porque no tiene el atributo out no fue seleccionada por este selector de css vamos a colocar nuevamente este atributo y

puedes ver como ahora sí fue seleccionado genial ahora digamos que queremos seleccionar todos los elementos de tipo radio ok todos estos elementos de tipo radio que serían estos dos puntitos que tenemos aquí si vamos a nuestro archivo html vamos a colocarlo en pantalla completa y llegamos a nuestro formulario vamos a los botones de radio vemos que para seleccionar esos elementos en realidad sería un poco complicado si no usáramos selectores de atributos por qué porque tenemos varios elementos del mismo tipo por ejemplo input tiempos puede ser de tipo radio pero también puede ser de tipo chef

box y también puede ser de tipo text así que si usamos como tal el selector de tipo input no vamos a obtener lo que queremos que solamente seleccionar los botones de radio lo único que podríamos hacer es asignarle en una clase a todos los botones de tipo radio pero hay una forma mucho más concisa de hacerlo que asignar clases porque queremos seleccionar todos los elementos de tipo input que tienen a tributo con este valor específico el tipo de input es radio entonces lo que podemos hacer es simplemente esto escribir un selector de atributo que seleccione

los elementos que tengan este atributo type igual a radio y así estaríamos seleccionando todos los botones de radio de nuestra página digamos que las queremos asignar un margen de 5 píxeles para que estén separados unos de los otros si volvemos a cargar la página ahora podemos ver que hay más separación entre estos elementos porque si se les asignó el margen alrededor de ellos para exagerar lo solo ver el efecto más claramente podemos volver a cargar la página y aquí puedes ver el efecto se les asignó un margen si usamos las herramientas de desarrolladores de chrome

inspeccionamos este elemento hacemos clic derecho sobre el elemento podemos hacer clic derecho aquí luego vamos a través de la estructura hasta que llegamos al elemento input y aquí abajo podemos ver el panel que veíamos antes cuando estudiamos el primer margen aquí podemos ver el margen que le asignamos 25 y lo puedes ver resaltado en la página en naranja genial no estamos seleccionando todos los elementos que contienen este atributo con este valor también podríamos ser aún más específicos y decir que todos los elementos de tipo input que tenga este atributo con este valor esa es otra

opción si volvemos a cargar la página puedes ver que el efecto es exactamente el mismo pero en este caso también podríamos omitir lo si no es necesario especificar el tipo de elemento vamos a colocar un margen un poco más razonable de 5 píxeles también podríamos seleccionar todas las casillas de verificación y para eso simplemente tendríamos que escribir un selector de atributo para seleccionar todos los elementos cuyo valor del atributo type sea chac vox recuerda que las casillas de verificación tienen este valor para este atributo type igual a check box vamos a asignarles un margen distinto

de 8 píxeles por ejemplo y aquí lo podemos ver ya están separadas y tienen su margen propio genial igualmente podemos omitir input aquí y se va a seleccionar y finalmente vamos a ver algo que va a ser muy muy útil también como puedes seleccionar los enlaces que lleven a un mismo destino a una misma página puedes escribir un selector de atributo como tendríamos aquí primero escribimos el tipo de elemento que a para el anclar los enlaces y luego decimos que queremos seleccionar todos los elementos de tipo a cuyo valor del atributo h3 la página de

frijol camps punto org aquí podemos subir copiamos y pegamos el valor de h red de ese enlace que queremos seleccionar de esos enlaces que queremos seleccionar y listo ya tenemos nuestro selector de atributo en este caso vamos a seleccionar este enlace que lleva áfrica ur camps y este enlace aquí que tenemos abajo que también lleva africano que cambió de estilo le vamos a hacer vamos a asignarle un color verde y vamos a decir quien no queremos que el enlace esté subrayado por ejemplo digamos que no nos gusta este formato por defecto que tienen los enlaces

que es un subrayado para quitar ese subrayado le asignamos a la propiedad text decoration el valor no texto significa texto en español y decoration significa como una decoración decoración del texto ninguna no queremos ninguna decoración y también queremos que el texto se presente en negrita así que podemos asignarle este valor para la propiedad font weight font es como la letra o la fuente weight espeso en español el peso de la fuente de la letra va a ser bone que en español significa negrita queremos que el texto se muestre en negrita si volvemos a cargar la

página o la puedes ver que ahora se le aplicó el estilo a este enlace y también si vamos aquí abajo se le aplicó el estilo a este enlace genial estamos seleccionando los elementos de tipo a en base al valor de su atributo ya que si tenemos muchos enlaces de nuestra página que llevan al mismo destino y queremos que todos sean consistentes podemos seleccionarlos con los selectores de atributo ahora vamos a hablar un poco sobre las unidades relativas y las unidades absolutas porque hasta ahora hemos trabajado con píxeles hemos trabajado con porcentajes y hay otras unidades

que también son importantes para desarrollo web cuáles son sus diferencias y cómo las puedes usar todo eso lo vamos a ver en la próxima parte vamos a ver un ejemplo gráfico de las distintas unidades con las que puedes trabajar css en html este ejemplo está basado en el ejemplo de la red de desarrolladores de mozilla vamos a ir creando tres elementos que nos van a permitir ver la diferencia entre tres unidades importantes píxeles wb que es el view point y m que es otra unidad importante esta es una unidad absoluta porque especifica exactamente el tamaño

del elemento píxeles wv y m son unidades relativas porque son relativas a otros valores en nuestra página por ejemplo b&w view x depende del tamaño de la pantalla del browser y m depende del tamaño de la letra del contenedor ya vamos a ver muchos más detalles sobre esto si vamos al artículo en la documentación de la red de desarrolladores de mozilla el artículo valores y unidades css vamos a leer la introducción todas las propiedades que se utilizan en el css tienen un valor o un conjunto de valores que esa propiedad admite y echar un vistazo

a cualquier página de propiedades en la red de desarrolladores de mozilla te ayudará a comprender qué valores admite una propiedad en particular vamos aquí más abajo nos explican un poco sobre las unidades y podemos aquí ver longitudes tenemos una tabla de las unidades de longitud absoluta todas las unidades siguientes son unidades de longitud absoluta no son relativas a nada más y en general se considera que siempre tienen el mismo tamaño por ejemplo ce m m m q y n pulgadas ps pt o px px es la unidad que hemos estado usando comúnmente hasta ahora que

representa píxeles o píxeles la mayoría de estos valores son más útiles cuando se usan en una salida d en formato impreso que en la salida de pantalla por ejemplo normalmente no usamos centímetros en pantalla el único valor que usarás de forma frecuente es píxeles como has visto hasta ahora en los ejemplos normalmente solo hemos usado píxeles de esta tabla y luego vemos una tabla de unidades de longitud relativa porque son relativas porque son relativas a algo más por ejemplo al tamaño de la letra del elemento principal o al tamaño de la ventana gráfica de la

ventana de tu navegador la ventaja de usar unidades relativas es que con una planificación cuidadosa puedes lograr que el tamaño del texto o de otros elementos escalen en relación con todo lo demás en la página en la tabla siguiente se enumeran algunas de las unidades más útiles aquí las tenemos podemos ver que la tenemos en nuestro ejemplo que vamos a ver ahorita esta unidad es relativa al tamaño de la letra del elemento padre del elemento que lo contienen en el caso de propiedades tipográficas como font-size y el tamaño de la fuente del propio elemento en

el caso de otras propiedades como web tenemos también x h rm l h y esta otra unidad la teníamos en el ejemplo w me representa 1% del ancho de la ventana gráfica por ejemplo si tenemos 20 w sería el 20% del ancho de la ventana gráfica ibh es el 1 por ciento de la altura de la ventana gráfica porque w y h wb en inglés representa un web que significa ancho por eso es el ancho de la ventana gráfica y h representa height que significa altura la altura de la ventana gráfica y también tenemos b

min y b max puedes leer más sobre la descripción de estas unidades en este artículo de la documento aquí vemos un ejemplo que es muy parecido el ejemplo que vamos a hacer nuestro ejemplo está inspirado en este ejemplo que tenemos aquí o que cualquier cosa si quieres referirte a este artículo leer más sobre estas unidades puedes ir al artículo valores y unidades de césar vamos a comenzar con nuestro ejemplo tenemos esta estructura nuestro archivo html el elemento raíz html luego el título app de datos o vamos a cambiarle el título vamos a asignarle prueba de

unidades unidades relativas y absolutas estamos incluyendo nuestra hoja de estilos está el punto css y en el cuerpo tenemos un contenedor principal con un haití contenedor principal y dentro tenemos tres contenedores 310 eso steve en lugar de actuar como contenedores aquí van a actuar como cajas como rectángulos que vamos a personalizar y le estamos asignando a estos rectángulos dos clases una clase recta para las tres y después clases específicas para cada uno dependiendo de su unidad de la clase px para el primero wb para el segundo y m para el tercero bien ahora vamos a

nuestro archivo css puedes ver que en este momento en la página no vemos nada más que el texto porque no hemos empezado a escribir las reglas en css vamos a personalizar el aspecto del contenedor principal el color del texto en el contenedor principal va a ser blanco white vamos a asignarle 5 píxeles de parís recuerda que es la distancia entre el contenido del elemento y su borde un tamaño de letra de 10 píxeles tamaño de fuente el color de fondo va a ser amarillo y el tipo de letra va a ser verdad con estos tipos

de letras de respaldo vamos a cargar nuestra página nuevamente y aquí lo podemos ver este es el contenedor principal lo que luego cada uno de los contenedores va a tener su propio color de fondo por eso es que estamos asignando el color de la letra aquí blanco porque ese estilo se va a asignar va a quedar en cascada a los 3 tips que él contiene si aquí nosotros le estamos asignando blanco al contenedor principal los tres contenedores internos también van a tener la letra blanca si no cambiamos ese valor en sus clases genial ok vamos

a definir cómo se van a ver en general los rectángulos recuerda que cada uno de estos elementos tiene la clase de rectángulo esos tres rectángulos van a tener un valor de pares de cinco píxeles y un margen de cinco píxeles que nos estamos separando y finalmente para cada uno vamos a asignar un color de fondo y un ancho específico con su unidad respectiva píxeles el color de fondo para los píxeles va a hacer crimson y vamos a asignarle un ancho de 200 píxeles si volvemos a cargar la página aquí vemos este rectángulo y ahora en

la próxima clase vamos a asignarle la unidad wb para que veas como esa unidad es relativa al tamaño de la ventana del browser le asignamos un color dark magenta que es como un morado el ancho va a ser 20 wb esto representa el 20% del ancho de la ventana del navegador así que si la ventana del navegador se hace más pequeña ese ancho se va a reajustar y si se expande el ancho también se va a reajustar se va a expandir si volvemos a cargar la página vemos este rectángulo y finalmente vamos a agregar la

clase m le asignamos el color de fondo verde y el ancho 15m volvemos a cargar la página y aquí tenemos nuestro elemento ahora primero que todo vamos a ver cómo funciona los pixeles esta unidad si nosotros reajustamos el tamaño de la ventana del navegador podemos ver que los pixeles se mantienen exactamente igual el tamaño el ancho de ese rectángulo se mantiene igual pero esta cajita este rectángulo a morado que tenemos aquí con las unidades de wb si se va expandiendo no sé si lo notas vamos a verlo poco a poco puedes ver cómo se va

expandiendo porque representa el 20% del ancho de la ventana del navegador inicialmente cuando estaba más angosta la cajita era más pequeña y cada vez se va expandiendo más y si lo colocamos en pantalla completa es incluso más ancho más larga que la caja roja así que puedes ver cómo las unidades relativas son muy útiles cuando queremos crear páginas web responsivas que funcionen tanto para dispositivos móviles como dispositivos como la tops o computadoras de distintos tamaños este es un ejemplo de una unidad relativa pero esta unidad es relativa al tamaño de la ventana del navegador esta

unidad m también es relativa pero es relativa al tamaño del texto el tamaño de la fuente de ese elemento del contenedor para demostrar cómo está afectada por el tamaño de la letra vamos a cambiar el tamaño de la letra aquí digamos 25 este es el tamaño de la letra del contenedor principal así que su estilo se va a heredar o va a caer en cascada y se va a aplicar a este elemento también ya vas a ver puedes ver como si colocamos en pantalla completa nuestro resultado ahora el ancho de la caja verde es mucho

mayor que el ancho de cualquiera de estas dos cajas que tenemos aquí porque porque es relativo el tamaño de la letra como aumentamos el tamaño de la letra aumentó en esa misma proporción el tamaño de la caja el ancho de la caja y también si disminuimos el tamaño de la letra a 5 píxeles por ejemplo puedes ver como el tamaño de la caja se hace también más pequeñito en relación con las demás genial también también puedes usar esa unidad m como una forma de reajustar el tamaño de la letra de los elementos internos déjame explicarte

a qué me refiero si que tenemos el tamaño de la letra con esta unidad m estamos diciendo que el tamaño de la letra debería ser 1.5 veces el tamaño de la letra de su contenedor entonces si tenemos 5 píxeles el tamaño de la letra debería ser 1.5 veces ese valor veamos aquí puedes verlo puedes ver que la letra es mucho más grande con respecto a las otras porque estamos diciendo que en relación con el padre o con su contenedor este elemento debería tener un tamaño de letra mayor porque su valor es 1.5 1.5 veces el

factor si fuera 0.5 el tamaño de la letra debería ser más pequeñita y aquí lo podemos ver o si fuera por ejemplo 5 veces 5 aquí puedes ver un tamaño de letra mucho mucho más grande eso es lo importante de saber cómo usar o cómo trabajar con las unidades relativas porque pueden ser muy útiles para reajustar toda la presentación de tu página genial vamos a volver a colocar aquí un tamaño de letra más adecuado digamos 15 píxeles y ya sabes cómo trabajar con este tipo de unidad hay muchas otras unidades absolutas y relativas estas son

algunas de las más comunes puedes referirte a ese artículo que vimos en la documentación para aprender más sobre las unidades ahora en la próxima parte vamos a probar que en realidad del elemento policy existe y es parte de la estructura de la página eso lo vamos a hacer en tan sólo unos segundos así que te espero allí ahora rápidamente vamos a ver con css que en realidad es elementos boring también es parte de la estructura de nuestra página existe el elemento por y es un elemento y tienes como el elemento principal de la estructura que

vemos en la página vamos a ver que en realidad existe usando un selector de tipo y le vamos a asignar un color de fondo tan fácil como eso así podemos determinar que en realidad existe si volvemos a cargar la página aquí podemos ver podemos colocarlo en pantalla completa y vemos que el cuerpo el por y ese elemento cubre toda la ventana del navegador en este caso le asignamos el color negro pero digamos que le asignamos plateado y así podemos ver también los elementos pues todo esto es el boeing en el elemento bar y también podemos

comprobar que ese es el elemento por y que existe sin agregarle un color específico veamos cómo podemos hacerlo si tenemos nuestro bonito transparente y hacemos clic en inspector se van a abrir las herramientas de desarrolladores google chrome y aquí podemos hacer clic sobre la etiqueta bar y la podemos cerrar con la flechita para sólo mostrar este elemento y podemos ver que cubre toda el área de la página web toda el área donde se muestra la página web si reajustamos el tamaño se hace más grande o más pequeño el bar y ese elemento se reajusta para

cubrir toda el área de la página web genial ya comprobamos que por y en sí y también es un elemento así que podemos asignarle también ciertos por ejemplo estilos a ese elemento y se aplicaría ese estilo en todos los elementos que pertenezcan a bari por ejemplo si le asignamos algún estilo al elemento por y todos los elementos a los cuales se podría aplicar ese estilo a lo largo de toda esta página también tendrían ese mismo estilo comprobemos lo por ejemplo si le asignamos un color de texto particular por ejemplo chocolate hacemos clic aquí para volver

a cargar la página y vemos que ahora todo el texto todos los elementos que podían tener esta propiedad y este color tienen ese estilo esto es muy útil cuando queremos definir ciertos estilos que se van a repetir en todos los elementos a los cuales se puede aplicar ese estilo lo vamos a usar también cuando comencemos a trabajar con las variables en css comenzaremos a verlo ya hacia el final del curso genial ya sabes que por existe y que puedes heredar estilos a partir de esta regla en css a medida que vayamos creando estructuras más complejas

en html frecuentemente vamos a necesitar asignar varios estilos a un mismo elemento así que es importante saber cómo se van a priorizar esos estilos si hay algún conflicto entre uno y el otro cuál va a ser el resultado eso es algo muy común es importante que entiendas cómo funciona esto en css cómo podemos priorizar estilos por ejemplo si yo le asigno dos clases al elemento h1 en este caso hola mundo aquí puedes ver la estructura html y aquí tenemos point tenemos un título un encabezado h1 y aquí tenemos un enlace con el elemento a por

ahora vamos a trabajar con el título con el encabezado h1 aquí voy a incrementar aún más el zoom para que puedas verlo con más detalle o que estoy en un zoom de 250 por ciento en chrome tú lo vas a ver inicialmente más pequeño si estás en 100% sería algo así lo vamos a dejar en 250 ok vamos a asignarle dos clases a este elemento texto azul y recuerda que la segunda clase la podemos escribir sólo separando las con un espacio vamos a colocar el editor en pantalla completa por un segundo para que veas toda

la línea completa que tenemos aquí clase texto azul y texto morado tenemos dos clases distintas que van a tener un conflicto porque el texto no puede ser azul y morado a la vez alguna de las dos va a tener una prioridad y ese va a ser el resultado final pero cuenta las dos va a ser la principal o la que iba a tener el resultado final veamos si nos vamos a nuestro archivo css vamos a definir dos reglas para estas clases para textos son el color del texto va a ser bloom azul y para texto

morado el color del texto va a ser propio redoble de tambores porque vamos a ver cuál es el resultado aquí lo tenemos morado el texto se muestra en morado porque veamos la lógica porque inicialmente si tenemos texto azul como la primera clase en nuestra lista de clases podríamos pensar que esa clase o ese estilo se va a priorizar pero no el texto morado es el resultante y déjame decirte que el orden de las clases es sorprendentemente no importa o no hace ningún efecto en html el orden en que escribas estas dos clases o cualquier número

de clases no tiene efecto en el resultado final y te lo puedo mostrar si simplemente cambiamos el orden invertimos el orden de estas dos clases volvemos a cargar la página y puedes ver que sigue siendo morado así que no hay una prioridad específica entre las clases en html donde si hay prioridad es en css porque la última clase es la que va a tener prioridad la última clase que se encuentre en el archivo css en el orden en que aparezcan en este caso la clase texto azul aparece primero que la clase texto morado y puedes

pensarlo así como que a medida que se vaya generando ese estilo y al final se decide que como esta es la última y hay un conflicto porque ambas quieren asignar un color de texto especie el conflicto se resuelve asignando el último valor que se le asignó a esa propiedad el valor de esa propiedad el último valor asignado está en la última clase que se definió en css podemos comprobarlo invirtiendo el orden si ahora escribimos la clase texto morado primero y luego la clase texto azul vamos a ver el resultado ahora puedes ver que el texto

es azul porque esta es la última clase que se encontró en el archivo css que aplica para ese elemento entre estas dos si hay un conflicto se va a escoger el último valor que se le asignó que es este que tenemos aquí ya sabes que el orden de las clases en html en este atributo en html no tiene ningún impacto sobre el resultado sólo el orden en css vamos a ver otro ejemplo en este caso vamos a aplicarle un estilo una clase a este enlace que tenemos aquí podemos quitar esta clase del elemento del título

y enfocarnos en el enlace que tenemos aquí veámoslo en pantalla completa vamos a asignarle una clase llamada sin subrayado sin subrayado queremos que el enlace no esté subrayado pero vamos a ver cuál va a tener prioridad si escribimos esto en css si usamos un selector de tipo para asignarle un estilo a todos los elementos de tipo a o si esto va a tener prioridad la clase que estamos asignando le a ese elemento en particular cual crees que va a tener prioridad recuerda esa respuesta que acabas de pensar y vamos a comprobar qué es lo que

ocurre vamos a asignarle a los elementos de tipo a un subrayado morado ondulado baby es ondulado y decimos underline subrayado estamos especificando que queremos un subrayado morado ondulado va a ser como algo parecido a este subrayado que vemos aquí y vamos a definir una propiedad que entra en conflicto con lo que acabamos de escribir digamos que queremos que todos los elementos que tengan esta clase sin subrayado no tengan ningún tipo de subrayado así que escogemos el valor no aquí le estamos asignando un subrayado específico y aquí estamos quitando el subrayado cuál creés de las dos

que tendrá prioridad bueno veámoslo volviendo a cargar la página aquí lo podemos ver este enlace ahora no tiene subrayado así que esta clase que tenemos aquí tuvo prioridad vamos a ver qué ocurre si invertimos el orden primero estamos escribiendo el selector de clase y luego el selector de tipo veamos aún así el enlace no tiene ningún subrayado porque porque la clase tiene precedencia sobre el selector más general o más genérico que selecciona todos los elementos de un tipo específico así que ya sabes si asignas una clase a un elemento ese estilo va a tener prioridad

sobre el estilo que asigna este a todos los elementos de un mismo tipo por qué porque este tipo de selector es más genérico más general y esta clase es más específica entonces css la prioriza se prioriza ese estilo sin importar en qué orden estén en el archivo css si borramos esta clase aquí ahora vas a ver el estilo que lo hubiéramos asignado inicialmente un subrayado ondulado morado genial estos son dos principios importantes el orden de las clases en css y también la prioridad de los selectores de clases sobre los selectores de tipo también es importante

que sepas si hay alguna prioridad de los ied y sobre las clases si asignamos un estilo a una idea específico ese estilo va a tener prioridad sobre una clase lo vamos a ver en la próxima parte del cusco vamos a comprobar si existe alguna prioridad para los haitises los identificadores únicos sobre las clases o no veamos y comprobemos nosotros mismos si por ejemplo le asignamos un haití al elemento h1 que tenemos aquí vamos a asignarle el haití título porque digamos que sólo vamos a tener un título y también le vamos a asignar una clase vamos

a mostrar el editor en pantalla completa esa clase se va a llamar texto azul ambos selectores van a tener una propiedad que va a estar en conflicto el título y el texto azul el haití y la clase van a intentar personalizar el color del texto pero un texto no puede tener dos colores a la vez así que vamos a ver cuál se prioriza primero comenzamos con el lighting el lady es título le vamos a asignar el color morado por pu y luego vamos a definir aquí un selector de clase para texto azul y vamos a

asignarle el color azul al texto cuál va a ser el resultado entre el haití o la clase cuál crees que va a ganar recuerda tu respuesta y veamos el resultado aquí lo tenemos el texto es morado porque el haití tiene prioridad sobre la clase como puedes ver estamos yendo como a selectores más específicos antes teníamos selectores de tipo que eran como los más genéricos que seleccionaban todos los elementos de un tipo específico luego fuimos a clases que nos permiten asignarle un estilo a uno o más elementos y luego vamos a un selector que es aún

más específico que es el haití y como es el más específico es el que tiene mayor prioridad sobre las clases inclusive y sobre los selectores de tipo no importa el orden en el cual escribas estas reglas en ccs vamos a comprobarlo vamos a cambiar el orden y volvemos a cargar la página y vemos que el haití sigue teniendo prioridad general ahora vamos a ver otro ejemplo con este enlace como hicimos en la parte anterior podemos ya aquí borrar este de esta clase del elemento h1 ahora vamos aquí el elemento del enlace y vamos a agregarle

un haití y una clase el haití se va a llamar enlace principal y la clase se va a llamar sin subrayado tenemos un haití y una clase vamos a ver nuevamente cuál se prioriza el haití y se llamaba enlace principal vamos a asignarle un color verde y vamos a personalizar el subrayado con text decoration tenemos green verde baby para que sea ondulado y android line que es subrayado después de definir nuestra regla para el haití también tenemos nuestra regla para el selector de clase sin subrayado vamos a tratar de asignar estilos que entren en conflicto

el color del texto y vamos a tratar de quitarle subrayado con texto gration norma veamos cuál se prioriza veamos cuál es el resultado verde o azul si volvemos a cargar la página vemos que es verde con un subrayado verde ondulado exactamente lo que definimos aquí en nuestra regla para el haití puedes ver que en este ejemplo se sigue priorizando el haití porque es un selector más específico así que si hay alguna propiedad que entre en conflicto con otras clases que tiene el elemento siempre se van a priorizar las que están en el haití que en

el selector del aire bien ya sabes que los haitises siempre se priorizan sobre clases y que las clases se priorizan sobre los selectores de tipo vamos priorizando los selectores que son más específicos en la próxima parte también vamos a ver qué ocurre si le asignamos un estilo en línea a un elemento directamente en html y si tenemos en esa misma propiedad en nuestro archivo css cual será priorizado lo veremos en la próxima parte veamos cuántas las tres opciones se priorizan cuando el mismo elemento tiene una clase un haití y un estilo en línea probemos a

nuestro encabezado de nuestro título le vamos a asignar un haití título le vamos a asignar una clase texto azul y luego le asignamos un estilo en línea con la propiedad de estadio que aprendiste cuando recién estábamos comenzando la parte de css le vamos a asignar ese estilo en línea el color morán por paul ok y dentro de estos electores en css en esas reglas también vamos a tratar de cambiar el color del texto y vamos a ver cuál es el color final que se presenta vamos a definir un selector de clase texto azul y vamos

a asignarle al color duro también para el lighting título vamos a asignarle el color negro también tenemos el estilo en línea que le asigna el color morado así que veamos cuál gana azul negro o morado listo redoble de tambores si volvemos a cargar la página vemos que el ganador es morado porque nuestra clase era azul nuestro haití era negro y finalmente el estilo en línea enamorado el estilo en línea se prioriza aún por encima de los high de seal asignas alguna estilo en línea al elemento ese estilo se va a priorizar pero hay una forma

de cambiar también ese comportamiento que hay por defecto o ese resultado que por defecto si nosotros queremos que todos los elementos que tengan esta clase por ejemplo tengan el texto de color azul sin importar cualquier otro conflicto que tenga con idish o con estilos en línea o con cualquier otro selector podemos agregar aquí es un signo de exclamación y escribir importantes que significa importante en español eso no le va a decir al browser al navegador que es muy importante que asigne este valor para esa propiedad sin importar cualquier otro conflicto ahora si volvemos a cargar

la página puedes ver que ahora el resultado es un texto azul porque estamos indicando explícitamente que ese valor se debe asignar a esa propiedad y vemos el resultado general no osea que si tenemos el control en nuestras manos en realidad si queremos que sin faltas sin faltas sin importar cualquier conflicto que pueda ocurrir este debe ser el valor si el elemento tiene esta clase simplemente agregamos importante también lo podemos agregar en un haití si lo agregamos aquí mira el resultado ahora es negro el yang si volvemos a la normalidad tenemos morado porque los estilos en

línea tienen la mayor prioridad genial esta parte del tema es muy muy importante porque a medida que crees estructuras y estilos más complicados va a empezar a surgir este tipo de conflicto y este tipo de contradicciones en los estilos entonces es importante que sepas cómo se van a resolver y cuál va a ser el resultado ahora vamos a comenzar a hablar y en las próximas partes vamos a seguir hablando sobre los colores en css como puedes escribir un color específico en css sin que sea una palabra específica como blue green la primera opción es usar

un código hexadecimal un código hexadecimal en inglés exotismo code es un código en base 16 normalmente nosotros tenemos base 10 en el sistema hexadecimal base 16 que ocurre tenemos estos posibles dígitos del 0 al 9 en cuanto a números y luego de la a a la f como letras la representaría algo parecido al 10 en el sistema decimal tenemos estas posibles opciones 16 posibles opciones para cada dígito en nuestro código y vamos a usar ese sistema extra decimal para de escribir nuestro color tiene tres componentes principales cada color este por ejemplo de un número en

el sistema hexadecimal tiene seis dígitos 1 2 3 4 5 6 comienza con numeral y cada uno de esos dígitos va a estar entre 0 y 9 o en 3 efe tenemos 16 posibles opciones para cada uno de los dígitos si te estás preguntando que se refiere que estos símbolos que tenemos aquí estos son los símbolos que podemos usar en css para escribir un comentario ok una barra inclinada con un asterisco y luego un asterisco y una barra inclinada para cerrar el comentario que así es como podemos escribir comentarios en css pero retomando nuestra charla

sobre los códigos hexadecimal es este es un ejemplo de un color en esta representación todos los colores tienen tres componentes rojo verde y azul y estos valores que les vamos a asignar para determinar cuánto de cada color tiene el resultado cuánto de rojo cuánto de verde y cuánto de azul 00 para esta componente representa la ausencia total de ese color y el mayor valor que le podemos asignar es f o sea que sería efe efe efe efe y ff en total podemos crear 16 millones de códigos para representar colores usando los códigos extra decimales vamos

a ver cómo los podemos usar con el ejemplo de nuestra página de gatos digamos que queremos asignarle un color de fondo a todos los dif para eso necesitamos la propiedad background color que ya la hemos usado anteriormente pero ahora en lugar escribir una palabra como por ejemplo blue o blue butler puedes ver que aquí tenemos también sus códigos hexadecimal es correspondientes por ejemplo el blog tiene de componente roja 00 luego de componente verde 00 y de componente azul efe efe vamos a probar el código que acabamos de ver para negro si volvemos a cargar la

página ahora vemos que los tips tienen un fondo de color negro este es el único tips que tenemos en la página también vamos a probar qué ocurre si le asignamos a los títulos un color de texto específico por ejemplo es vea 234 que es como un naranja amarillento volvemos a cargar la página y aquí vemos ese color así podemos ir asignando los colores personalizados a cada elemento de nuestra página también por ejemplo podemos personalizar el color del borde de algún elemento como una imagen digamos que seleccionamos una imagen y queremos que la imagen sea circular

o redondeada va a tener un borde de ancho de 3 píxeles el estilo va a ser sólido y el color efe 4 034 de esta forma y así podemos ver que se le asignó un borde de ese color específico que tenemos aquí a la imagen a todas las imágenes también podemos asignarle un color específico a los enlaces por ejemplo si le asignamos el color a 73 03 aquí tenemos un color como un morado claro que podemos ver aquí y aquí para todos los elementos de enlace y cómo podemos conseguir estos códigos hexadecimal es como speaker

lo puedes escribir en inglés aquí lo puedes ver es muy muy útil no estás trabajando con desarrollo web aquí puedes escoger el tono del color y luego puedes personalizar lo aún más arrastrando este circulito que ves por acá y aquí tienes el código hexadecimal de ese color simplemente lo puedes copiar y pegar aquí claro siempre debe tener un solo numeral antes del código y volvemos a cargar la página y aquí puedes ver que ese color se le asignó a ese elemento también hay una forma de abreviar ciertos códigos hexadecimal es para que sean más concisos

porque aquí puedes ver que tienen seis dígitos pero podemos reducir ese número en algunos casos a tres dígitos nada más vas a ver cómo lo puedes hacer en la próxima parte también podemos en ciertos casos para ciertos colores abreviar su código hexadecimal a sólo tres dígitos esto es recomendado también es recomendado en la guía de estilo de google y si se puede usar se recomiendo usarlo por ejemplo si nuestro código es este que tenemos aquí vamos a escribir un comentario tenemos 6 dígitos los cuales están repetidos de a pares cuando esto ocurre cuando los dígitos

del mismo par son iguales para cada uno de los pares simplemente podemos escribir uno por cada par de esta forma otro ejemplo sería efe efe efe efe efe este color podría abreviar se de esta forma y tendríamos exactamente el mismo color otro ejemplo 0 0 efe efe 0 0 puedes ver que los dígitos están repetidos en su par correspondiente en su componente correspondiente en este caso 0 0 corresponde a rojo luego ff a verde y 0 0 azul en este caso podemos escribir sólo 3 dígitos otro ejemplo efe efe 0 0 efe efe aquí eliminamos

los dígitos repetidos y tenemos este resultado ahora veamos estos colores en vivo y pensamos que en realidad son equivalentes a los originales algo que sí me gustaría resaltar en este momento es que hasta ahora hemos estado usando los códigos hexadecimal es en minúscula no los hemos escrito de esta forma también es válido escribirlos en mayúsculas efe efe efe efe efe y probablemente también los consigues de esta forma cualquiera de estas opciones es válida que es lo importante ser consistente en tu archivo css no mezclar mayúsculas con minúsculas si escogiste usar minúsculas debes usar minúsculas y

escogiste usar mayúsculas continúa usando mayúsculas o que genial vamos a comenzar viendo nuestro primer ejemplo en vivo en nuestra página de gatos tenemos nuestro tips y vamos a asignarle un color de fondo con un valor extra decimal 0 0 efe efe efe efe aquí lo tenemos es como un azul clarito si volvemos a cargar la página vemos el color del dif y si quitamos uno de esos dígitos repetidos de cada par lo dejamos con sólo tres dígitos volvemos a cargar la página y puedes ver que se sigue viendo exactamente igual el color no hubo ningún

cambio genial vamos a ver ahora el titulo h2 vamos a asignarle el color efe efe 0000 que es como un color ladrillo hacia rojo si volvemos a cargar la página vemos el color y podemos quitar uno de esos dígitos repetidos y aquí seguimos viendo el mismo color exactamente lo que tenemos es un código más conciso y es recomendable usarlo a la imagen podemos asignarle un borde específico de un color específico vamos a hacer que la imagen sea redondeada con un ancho de 3 píxeles estilo sólido y color va a ser 0 0 efe efe 0

0 que es como un verde volvemos a cargar la página y vemos el color verde aquí y luego vemos aquí con 3 dígitos nada más y el color se mantuvo exactamente igual genial finalmente vamos a ver un enlace vamos a cambiar el color de texto a efe efe 0 0 efe efe y podemos cargar otra vez la página vemos el color pero ahora podemos borrar uno de esos dígitos por cada par y seguimos viendo el mismo color es equivalente genial no es una forma más concisa de escribir estos códigos en css sólo cuando están repetidos

en cada par o que sólo en este caso aplica a reducir el código a tres dígitos bien también hay otra forma de representar un color en css usando rgb en lugar del formato del código hexadecimal ambos son muy importantes y puedes usarlos en cfs ahora vamos a ver otro formato que podemos usar para especificar un color en css hasta ahora hemos usado códigos extra decimales para referirnos a un color específico pero esos colores también tienen otra representación llamada rgb r braun g green y be good básicamente vamos a especificar lo mismo pero en lugar de

usar dígitos vamos a usar tres números el valor de cada uno de esos tres números va a estar entre 0 y 255 0 indica que no hay nada de ese color en el resultado y 255 es el mayor nivel para el resultado por ejemplo este color que tenemos aquí 0 efe efe en hexadecimal tiene un valor equivalente en rgb podemos verlo aquí si vamos al color pica en google aquí podemos colocar el código hexadecimal 0 efe efe y podemos ver su equivalente y rgb área de red creep lo ves que son 3 números 0 255

y 255 estos tres números representan este color al igual que estos dígitos representaban este color 0 representa el componente rojo 255 y representa el componente verde y 255 representa el componente azul escribimos rgb y luego entre paréntesis indicamos los tres valores 0 255 y 255 en lugar de incluir un numeral seguido de los dígitos para cada componente escribimos rgb y luego dentro de los paréntesis escribimos el valor para cada componente rojo verde y azul aquí tenemos otro ejemplo si vamos al color piquer y aquí copiamos y pegamos el código hexadecimal tenemos su equivalente en rgb

podemos copiar y pegar estos tres números por ejemplo y luego ir a nuestro archivo css escribir rgb y pegar estos números recuerda que los números deben estar separados por una coma y un espacio y tenemos exactamente el mismo color si volvemos a cargar la página puedes ver que los colores se mantienen intactos porque son equivalentes veamos aquí también otro ejemplo el verde que tenemos en el borde de la imagen tenemos su código en hexadecimal y este es su cover rgb escribimos rgb paréntesis y dentro de los paréntesis los tres valores y aquí tenemos nuestro color

resultante y finalmente para el enlace vamos aquí vamos aquí copiamos ex y copiamos y pegamos rgb rgb y entre paréntesis los tres valores volvemos a cargar la página y vemos que todo se mantiene igual pero ahora estamos especificando los colores el formato rgb en lugar de usar un código hexadecimal también si quieres seleccionar un color de esta herramienta si colocas el cursor sobre estos cuadraditos puedes acceder a una herramienta que es muy parecida al color piquer que estamos usando en google aquí puedes escoger el tono del color y luego puedes personalizar lo aún más arrastrando

el circulito y también puedes escoger su transparencia eso le agrega un cuarto componente un cuarto elemento aquí dentro del paréntesis un valor entre 0 y 1 cuando es 1 exactamente no se coloca 1 significa que el color está allí presente y a medida que nos acercamos a 0 el color se va volviendo más transparente creo que lo podemos ver mejor con un tono rojizo aquí lo podemos ver puedes ver este de grade es que tenemos aquí si nos acercamos al valor 1 puedes ver el resultado un color opaco que cubre la superficie pero a medida

que vamos disminuyendo el valor puedes ver 0 90 0 80 0 70 0 50 0 40 vamos haciendo que el color sea más y más transparente entonces si por ejemplo escogemos 0 30 aproximadamente podemos escribir aquí 0 30 como el cuarto valor el color va a ser transparente volvemos a cargar la página y puedes ver que ahora el color es más transparente y se puede ver más clarito porque el fondo es blanco entonces si omitimos este valor el color sin transparencia en este caso cuando tenemos transparencia rgb se convierte en rgb ah ok cuando especificamos

un cuarto valor como por ejemplo 0.4 significa alfa en inglés alfa es el cuarto componente que se usa para especificar la transparencia del color que tan transparente es genial ya sabes cómo trabajar con los colores rgb y hexadecimal es ellos son muy muy muy útiles y también puedes usar esta herramienta simplemente sin añadirle transparencia para escoger cualquier color y puedes ver que es su código en rgb se va a actualizar aquí lo puedes ver se va a actualizar al color que escogiste esta herramienta es muy útil genial buen trabajo en la próxima parte vamos a

hablar sobre las variables en css vas a aprender por qué son muy importantes y cómo las puedes usar en cfs ahora quiero presentarte a un miembro muy especial del curso este es pingüinito tan bonito que tenemos aquí lo creas o no este pingüino fue creado con html y css veamos los archivos porque vamos a usar este pingüinito como un ejemplo de cómo podemos usar las variables en css y por qué son importantes aquí tenemos los archivos html y css que crearon a nuestro pingüinito podemos verlos aquí lado a lado en el archivo html tenemos la

etiqueta raíz de etiqueta principal tenemos nuestro link nuestro elemento link a nuestra hoja de estilos style ss y también tenemos nuestro elemento por y dentro de por y tenemos una secuencia de tips que van creando cada una de las partes del pingüino este es el dif principal que tiene la clase pingüino y luego tenemos dos dips que representan la parte inferior y superior del pingüino para la parte inferior tenemos 410 su mano derecha su mano izquierda el pie derecho y el pie izquierdo esto que tenemos aquí estas cuatro partes la parte superior del pingüino está

representada por esta secuencia de ventyx tenemos la mejilla derecha la mejilla izquierda la barriga el ojo derecho el ojo izquierdo y cada uno de los ojos tiene dentro un pequeño reflejo luego el color de la mejilla y el pico superior y el pico inferior que es la parte superior e inferior del pico genial no estos elementos mejilla derecha y mejilla izquierda se refieren a estas partes de la cara que es la parte derecha y la parte izquierda de la cara del pingüino podemos ver cada uno de ellos en el diseño final en el resultado final

con las herramientas de desarrolladores de chrome aquí tenemos el sporting tenemos el 10 principal del pingüino y luego tenemos el pingüino inferior y el pingüino superior aquí lo tenemos el pingüino inferior está compuesto por la mano derecha la mano izquierda el pie derecho y el pie izquierdo el pingüino superior está compuesto por la mejilla derecha que estamos diciendo mejilla pero en realidad sería como la parte derecha de la cara luego la mejilla izquierda la parte izquierda de la cara luego su barriguita su abdomen el ojo derecho el ojo izquierdo y cada ojo tiene un reflejo

puedes ver el diseño increíble que podemos crear simplemente usando tiempo y aquí tenemos el color de la mejilla derecha y el color de la mejilla izquierda y el pico superior el pico inferior ya más o menos sabes cómo es la estructura de pingüino ahora para lograr que cada uno de estos tipos se vea de la forma que se ve tenemos muchas reglas en css tenemos un archivo bastante extenso comparado con nuestros ejemplos anteriores en css y que hace algunas propiedades sobre las cuales quizás te gustaría expandir tus conocimientos en la documentación por ejemplo top left

estas propiedades nos ayudan a ubicar ese elemento o ese tipo donde lo queremos respecto a su borde y a su contenedor y estos archivos nos puedes descargar en el repositorio de qinghai que puedes encontrar en la descripción del vídeo que así que puedes verlos con calma y ver cómo se crea cada uno de los componentes en esta parte del curso me gustaría que nos enfocaremos en las variables css esto es nuevo para nosotros estamos usando variables css para definir el estilo del pingüino esta es una variable en css y esta también cuando le agregamos dos

guiones y lo puedes ver con más detalle dos guiones antes del nombre de la variable estamos creando una variable donde veas dos guiones ahí tienes una variable en css y puedes ver que el color del texto tampoco es del mismo color que tenemos para las propiedades del css sino que se ven blancas en el tema de fito acá que es una variable una variable es básicamente un nombre que le asignamos a un valor para poder usar ese nombre a lo largo de nuestro archivo donde necesitemos esa variable o ese valor podemos usar simplemente el nombre

de la variable y vamos a poder usar ese valor indirectamente por ejemplo si necesito usar este valor en muchos lugares diferentes del archivo puedo simplemente definir una variable y usar ese nombre de la variable y escribir el valor una sola vez cuál va a ser la ventaja de hacer esto que si yo necesito cambiar este valor solo lo voy a cambiar en un lugar específico donde defino esa variable y donde aparezca esa variable el valor se va a actualizar automáticamente al igual y lo mismo ocurre con esta variable la definimos una sola vez y ese

valor se va a poder reutilizar solo con el nombre de la variable veamos qué ocurre si yo cambio este valor a blanco way y el pico quiero que sea naranja hay dos componentes que conforman el pico del pingüino así que yo puedo reutilizar ese valor en dos lugares distintos y solo tengo que hacer un solo cambio puedes ver aquí abajo que si bajamos a las clases del pico pico superior y pico inferior los dos componentes del pico estamos usando aquí la variable pingüino pico y pingüino pico ya vas a ver cómo las podemos usar formalmente

y por qué especificamos este valor pero lo importante en este momento es ver que estamos usando la variable para definir el fondo de ese elemento el color de fondo después de la actualización si volvemos a cargar la página puedes ver que ahora el pingüinito cambio de color los componentes que usan el mismo color que en la barriga del pingüino fueron actualizados la mejilla derecha y la mejilla izquierda y el pico también cambio de color al igual que sus pies también podemos crear otra variable nueva esa variable va a definir el color de la piel del

pingüino esta piel negra que tenemos aquí la podemos cambiar por ejemplo a gris en la próxima parte vamos a usar esta variable vamos a agregar esta variable a las propiedades que van a hacer que cuando cambiemos este valor de negro a gris va a poder cambiar o actualizar ese valor donde sea necesario para que todo el cuerpo del pingüino se muestre gris en lugar de negro eso lo vamos a hacer en la próxima parte así que te espero allí vamos a iniciar con el valor negro para esta variable este color va a definir la piel

del pingüino y vamos a usar esta variable donde sea necesario para definir el color de la piel del pingüino así podemos cambiarlo rapidito cuando tengamos todo implementado para usar el valor de esta variable simplemente vamos a los componentes que necesitan esta variable esos componentes son aquí pingüinos superior en lugar del valor blanco vamos a usar nuestra variable para que el valor que le asignemos a esa variable sea el color de fondo de esa parte del pingüino para eso escribimos var y dentro de los paréntesis escribimos el nombre de la variable incluyendo los dos iones que

hacemos exactamente lo mismo aquí abajo bar con el nombre de la variable pingüino inferior luego mano derecha también debería ser del mismo color así que vamos a usar nuestra variable mano izquierda también debería ser del mismo color pingüino piel las mejillas son del mismo color de la barriga así que no necesitamos usar esa variable ya estamos usando otra variable los ojos si son negros y creo que ya con eso cubrimos todos los componentes que necesitan ser del mismo color de la piel del pingüino así que sólo para comprobar que todo está correcto cargar nuevamente la

página no vemos ninguna diferencia hasta ahora porque le asignamos el color negro pero veamos lo fácil que va a ser cambiar el color de la piel del pingüino vamos a asignarle un color gris grave en inglés así con sólo cambiar el color en un solo lugar de tu archivo css puedes actualizar el valor en muchos lugares diferentes del archivo cf ya vas a ver en donde específicamente solo vas a poder usar esta variable en los elementos que son descendientes de donde fue definida o creada pingüino en este caso es el contenedor principal así que vamos

a poder usar estas variables en todos los elementos que descienden de pingüinos todos los elementos que están contenidos dentro de el elemento con la clase pingüino probemos nuevamente si queremos cambiar el color del pingüino a rosado por ejemplo también lo podemos hacer o azul quien sabe cualquier color que te imagines se puede asignar al pingüino y cambiarlos así de fácil las variables son muy importantes en css porque nos permiten escribir archivos que son mucho más fáciles de mantener puedes ver lo fácil que fue hacer un cambio si no hubiéramos usado una variable tendríamos que hacer

este cambio en cada uno de los elementos que quisiéramos adaptar o actualizar y esto nos tomaría mucho más pues sería mucho más difícil y además también tendría mucho más que cometiéramos errores pero qué pasa si hay un error por ejemplo digamos que por error en lugar de escribir el nombre de la variable lo escribimos mal introducimos un error de tipeo si volvemos a cargar la página aquí puedes ver que ahora el pobre pingüinito no tiene cabeza no tiene parte superior existe una forma de especificar un respaldo un valor de respaldo para esa variable por si

acaso la variable no está disponible o si no se puede leer o encontrar al momento de presentar el resultado eso lo vamos a ver en la próxima parte por ahora vamos a devolverle su cabecita al pingüino antes de continuar ok te veo allí para asignar un valor de respaldo veamos cómo puedes asignarle un valor de respaldo a tus variables en css en la parte anterior vimos lo que ocurriría si en lugar de escribir el nombre de la variable escribimos ese nombre pero con un error de tipeo por ejemplo en este caso olvidamos la voz y

el pobre pingüino quedó sin cabeza entonces para prevenir este tipo de error podemos asignar un valor de respaldo para que en caso de que esa variable no se consiga o no esté correcta el valor de respaldo se va a usar para eso solamente tenemos que escribir una coma un espacio después de la coma y el valor de respaldo en este caso como la variable representa un color escribimos el color que esa variable representa o el valor de respaldo que queremos asignarle en este caso vamos a asignarle el valor negro y si volvemos a cargar la

página puedes ver que ahora el pingüino tiene una cabecita negra pero en este caso debería ser ahora vamos a cambiar el color de la variable a negro y puedes ver que ahora sí todo se actualizó si volvemos a escribir bien las variables se va a usar el valor de la variable cuando la variable se pueda usar o reconocer adecuadamente también deberíamos agregar este valor de respaldo en todos los otros lugares donde usamos nuestra variable pingüino piel pingüino piel y aquí ya teníamos valores de respaldo para las otras variables puedes ver que teníamos color blanco para

pingüino barriga y color naranja para pingüino pico en caso de que esas variables no se detecten o no sean reconocidas por el navegador o por el browser entonces se usa el valor de respaldo ahora para practicar aún más cómo puedes usar las variables en css vamos a crear otra variable pingüino mejillas y vamos a asignarle el color rosado porque si ves aquí abajo nuestro archivo un poco más arriba la clase color mejilla derecha y color mejilla izquierda estos circulitos que tenemos aquí usan el color de fondo rosado pero digamos que queremos reemplazar este color fijo

con una variable para poder actualizarlo fácilmente definimos esta variable pingüino mejillas podemos copiar y pegar ese nombre para no tener errores de tipeo posibles luego vamos a la clase específica y en la propiedad reemplazamos el valor por bar dentro de los paréntesis escribimos el nombre de la variable y luego le asignábamos el valor de respaldo y aquí hacemos lo mismo el nombre de la variable y el valor de respaldo genial ahora si volvemos a cargar la página todo está igual pero si cambiamos actualizamos el valor de la variable digamos a verde ahora el pingüinito va

a tener mejillas verdes vemos el cambio inmediatamente y se aplica a ambas mejillas porque estamos usando la variable css genial no si la variable no es detectada porque digamos que tenemos un error de tipeo o por alguna razón no se detectó se va a usar el color de respaldo en este caso era rosado pero también lo podemos cambiar genial no vamos a volver a asignar mejillas rosadas buen trabajo ya sabes cómo trabajar con variables en css recuerda simplemente las defines aquí en alguna clase y todos los descendientes de ese contenedor van a poder tener acceso

a esa variable escribimos dos guiones y luego el nombre de la variable dos puntos espacio y su valor y como siempre terminamos en punto y coma luego para usarlas escribimos var y entre paréntesis el nombre de la variable si lo deseamos una coma un espacio y un valor de respaldo las variables son muy útiles en css pero lamentablemente no todos los navegadores o browsers reconocen las variables así que tenemos que recurrir a ciertas medidas de prevención en nuestro archivo css para estos casos si el usuario está ingresando desde un navegador que no reconoce las variables

css en la próxima parte vamos a ver cómo se ve nuestro pingüino en internet explorer es un navegador que no reconoce las variables css y luego vamos a solucionar ese problema con respaldos otro tipo de respaldos que podemos usar así que te veo allí es muy importante también pensar en la compatibilidad de tu página web con distintos browser veamos cómo se ve nuestro pingüino en un navegador que no reconoce en las variables css veamos el resultado si voy a mi carpeta donde tengo el archivo index html y abro ese archivo con internet explorer aquí puedes

ver el resultado el pobre pingüinito sólo tiene ojos porque son los únicos componentes en nuestro archivo css que no usa una variable como podemos solucionar esto porque si ésta es nuestra página web y esto ocurre vamos a limitar a nuestros usuarios que están usando internet explorer no van a poder usar nuestra página en este navegador y siempre como desarrolladores web es importante pensar en la compatibilidad de nuestra página con distintos navegadores o browsers cómo podemos solucionar esto lo que podemos hacer es especificar el valor negro el valor que usamos como respaldo antes de usar la

variable de esta forma si queremos que el fondo el color de fondo sea negro como un respaldo en lugar de colocarlo aquí como un respaldo dentro de board lo vamos a escribir arriba así si el navegador a interpreta esto correctamente pero luego no puede interpretar esta propiedad porque la variable no se reconoce simplemente este valor es el que se va a asignar el último que fue reconocido o interpretado así es como funciona css si defines dos veces una propiedad con distintos valores el último valor que se asignó es el definitivo el que se va a

mostrar en este caso si usamos internet explorer este valor se va a asignar porque se va a reconocer pero cuando lleguemos a esta línea la variable no se va a reconocer se omiten no se modifica el valor que se había asignado anteriormente en este caso también podemos omitir aquí el valor de respaldo si la variable no se detecta este valor se va a asignar podemos hacer lo mismo que en todas las reglas que usan la variable por ahora vamos a concentrarnos en la variable pingüino piel para ver cómo aparece la piel en internet explorer cuando

hacemos estos cambios ya hicimos los cambios y ahora vamos a abrir nuestro pingüinito ahora si vemos a nuestro pingüinito solo que hasta el momento sólo podemos ver su cuerpo con el color de piel negro y sus ojitos que están aquí escondidos y camuflados entre el negro vamos a hacer lo mismo con las otras reglas para que veamos nuevamente a nuestro pingüinito aquí abajo tenemos la variable pingüino barriga y queremos asignarle el valor de respaldo blanco para eso le asignamos aquí el valor blanco antes de referirnos a la variable si la variable se detecta si estamos

usando por ejemplo cron google chrome que si detecta las variables css entonces este valor ya no se va a asignar sino que se va a asignar el valor de la variable ahora vamos a seguir agregando este color aquí abajo aquí en la regla tenemos aquí y de una vez vamos a hacer lo mismo con las partes de color anaranjado aquí aquí y en este caso no estamos usando variables para los ojos ni para los reflejos de los ojos si estamos usando para las mejillas así que le asignamos el valor pink rosado aquí aquí borramos los

valores de respaldo y para el pico superior e inferior también estamos usando variables así que vamos a agregar el respaldo y listo ya llegamos al final del archivo vamos a guardarlo si lo volvemos a cargar en google chrome oops una de las mejillas desapareció aquí porque tenemos un error de tipeo aquí ya tenemos nuevamente nuestra mejilla puedes ver a nuestro pingüinito aquí ahora sí podemos ver el resultado final porque estamos dando la internet explorer una alternativa a las variables css porque no las reconoce y en google chrome también el resultado se mantuvo exactamente igual genial

también probemos qué ocurre si estamos en un navegador en un browser que si detecta o interpreta las variables css pero digamos que usamos esta técnica y la variable tiene un error de tipeo que va a ocurrir si volvemos a cargar la página podemos ver que ahora la cabecita del pingüino desapareció porque anteriormente dijimos que en ese caso podríamos omitir el valor de respaldo pero esto es lo que podría ocurrir si lo hacemos porque inicialmente uno puede pensar eso que se puede omitir el valor de respaldo pero si lo hacemos si el browser interpreta las variables

css corremos el riesgo de que pase exactamente esto porque se va a asignar este valor y luego se va a interpretar esa variable y si no se detecta la variable porque hay un error de tipeo vamos a tener este tipo de error en internet explorer esto no ocurriría porque ni siquiera interpreta las variables pero en google chrome si las interpreta y no muestra ese elemento así que si agregamos el valor de respaldo ahora sí podemos ver el resultado como lo queremos así que es recomendable incluir ese valor de respaldo aquí también embargo vamos a agregar

solo a cada uno de estos elementos la acc va a estar a white estar a white white orange naranja ahora en naranja aquí agregamos pink aquí agregamos pink también orange orange y llegamos al final ya tenemos nuestros valores de respaldo y también tenemos un respaldo en caso de que el navegador nos detecte o no interprete las variables css genial buen trabajo ya sabes cómo trabajar con variables en css también es importante que comprendas cómo se heredan las variables css porque no necesariamente vas a poder utilizar todas las variables en todas las clases o todos los

selectores de tu archivo css hay una jerarquía una herencia que va a ocurrir cuando defines una variable en css vas a aprender más sobre esta herencia en la próxima parte del curso vamos a volver a ver nuestro querido pingüinito para ilustrar cómo funciona la herencia de variables en css si vamos a nuestro archivo css ahora puedes ver que estamos usando una variable la variable pingüino barriga para definir el fondo el color del fondo del elemento boring el elemento principal de la página así tenemos todo el fondo de la página de un color específico pero qué

ocurre nosotros estamos definiendo la variable pingüino barriga dentro de la clase pingüino eso significa que sólo este elemento que tiene la clase pingüino va a tener acceso a esa variable ese elemento y todos sus descendientes pero boris no es un descendiente de este tipo más bien dif es un descendiente de bonnie porque boris es el elemento principal es el elemento que los contiene a todos entonces cuando usamos la variable aquí vemos que el resultado es que se usa el color de respaldo que asignamos el azul claro que tenemos aquí porque la variable no se reconoce

podemos lograr que esa variable se reconozca en vor y podemos simplemente agregar la pseudo clase route y en lugar de definir esta variable aquí dentro de la clase pingüino podemos definirla en bruto de esta forma la variable va a ser global porque el root va a referirse o va a seleccionar el elemento html el elemento raíz de la página así que todos sus descendientes todos los elementos de bori van a poder tener acceso a esa variable todos los estilos que usemos van a poder tener acceso a esta variable todas las reglas que definamos entonces ahora

si volvemos a cargar la página vor y ya debería tener acceso a esa variable y el fondo debería ser rosado veamos y vuela aquí tenemos nuestro fondo rosado la variable pingüino barriga ahora es global y la podemos usar en nuestro elemento o parís en la próxima parte vamos a ver cómo puedes cambiar el valor de esta variable solo para un área específica o para un elemento específico de tu página web y sus descendientes porque no necesariamente queremos que el valor de esta variable se ha rozado en todo el documento puede ser que necesitemos usar esa

variable en otro elemento y que tenga otro color podemos hacerlo en css muy fácilmente eso es lo que vas a aprender en la próxima parte vamos a ver cómo puedes cambiar el valor de una variable solamente para un área específica de tu estructura de tu página volvemos con nuestro pingüinito tenemos el mismo archivo html y ahora en css tenemos las variables en la pseudo clase brut definimos pingüino piel pingüino barriga pingüino pico y pingüino mejillas estamos también usando esa variable pingüino barriga para seleccionar el color de fondo de la página para el elemento bonnie pero

como esta variable pingüino barriga es global se está usando el valor rosado para todos los elementos que usan esta variable pingüino barriga eso incluye aquí a la barriguita del pingüino y las mejillas que tenemos aquí las partes de la cara izquierda y derecha si nosotros queremos cambiar ese valor de esa variable por ejemplo blanco para que estas partes solamente se muestran en blanco podemos volver a definir esa variable aquí por ejemplo en pingüino que era el elemento principal del cuerpo del pingüino si lo definimos aquí vamos a poder usar esa variable y su valor nuevo

actualizado en todos estos elementos llamados sus descendientes en todos los descendientes de ese tipo principal del pingüino veamos el efecto volvemos a definir la variable pingüino barriga y ahora le asignamos el valor weight blanco si volvemos a cargar la página ahora puedes ver qué lindo nuestro pingüinito que tiene su barriga blanca y sus mejillas también blancas esto simplemente está reemplazando el valor global el valor que tenía esa variable hasta que llega a este elemento con esta clase y luego los elementos descendientes de pingüino que tenemos aquí del elemento que tenía la clase pingüino también heredan

ese nuevo valor simplemente hay que definir la variable nuevamente ok y la herencia de ese valor como se va a heredar está determinada por la estructura en html felicitaciones completaste el curso y ya sabes los fundamentos de html y css buen trabajo espero que te haya gustado el curso te invito a suscribirte a nuestro canal ya seguir aprendiendo con los cursos que tenemos publicados en nuestro canal te veo en próximos cursos