This video provides an introduction to CSS (Cascading Style Sheets), focusing on CSS version 3. It explains the evolution of CSS from its early versions, highlighting how it separates presentation from content, which is managed by HTML. The video details various new features and advantages of CSS3, including improved selectors, styling options like shadows and opacity, typography enhancements, transformations, multi-column layouts, advanced color management, and responsive design considerations using media queries. It also touches upon pseudo-classes, advanced selectors, and provides resources for learning more.
max-width, min-width) are crucial in CSS3 for optimizing the display of web pages across different devices and screen sizes.Here's the text from the transcript:
"buen día para todos y sean bienvenidos a la semana 5 en esta semana vamos a comenzar a hablar sobre la unidad 3 y vamos a hablar específicamente sobre el diseño web que tiene que ver un poco sobre lo que es css versión 3 además vamos a hablar sobre xml que es el padre del html xml presenta los fundamentos bajo los cuales se rige el html versión 5 como de todos es conocido html nos da la estructura y el contenido de las páginas web es necesario utilizar otra tecnología como lo es css3 para que nosotros podamos dar una mejor vistosidad a las partes de nuestra página web es decir es necesario tanto la parte de la pista como vamos a observar y va a ser agradable hacia el usuario esta página web como el contenido para que los buscadores logren encontrar los recursos de nuestro sitio en toda la red un poco de historia sobre css es este comenzó allá por 1996 como la primera versión se le denominó css versión 1 donde pues ya se separaba la parte de la vista y el contenido entre los entre el navegador por un lado teníamos páginas html que aunque se podía y aún se puede incrustar código css dentro de nuestras páginas html no es lo recomendado allá por 1998 un par de años después se crea la versión 2 ya donde pues se le hacen muchas mejoras pero estas mejoras tienen un impacto en el rendimiento de las páginas web se tardan mucho en cargar y eso viene aunado a que el usuario pues abandone las páginas web debido a la carga lenta de estas páginas para esa misma época entonces ya se piensa en crear un nuevo estándar al cual se les va a denominar css versión 3 luego pues se plantean ciertas mejoras como el rendimiento de las páginas web utilizando css versión 2 y se genera allá por el año 2000 el primer borrador para la versión 3 del css sale otra versión 2.1 allá por 2002 como lo pueden ver donde pues se consideró en ese momento el primer estándar que se seguiría a partir de ese momento por todos los navegadores y para el año de 2005 pues se comienza con el desarrollo del estándar del css versión 3 en 2009 comienza la implementación por algunos navegadores dentro de lo que es la diversidad de navegadores que existen en internet por lo que según los ejemplos que hemos visto en algunos casos es necesario agregar ciertas palabras para que el navegador pueda reconocer de una manera más explícita qué es lo que debe de hacer con los comandos css3 qué ventajas tenemos de utilizar el css pues hay una mejora en los selectores que nosotros utilizamos dentro de lo que es el código html hay un nuevos estilos que se pueden aplicar como lo son las sombras hasta las al texto opacidad para los fondos es decir que serán más transparentes y otros tipos de cuestiones que mejoran la visibilidad de la página web la parte de atrás de tipografías también es importante porque hay muchas páginas web que al no tener el usuario instalado el fondo entonces parece que se distorsionan ciertas partes de la página web entonces la tipografía es importante y ahora sí se puede incluir dentro de lo que es nuestro sistema web hay transformaciones se reduce también la petición de imágenes esto hace que la carga de las páginas web sea mucho más rápida y se tenga un mejor rendimiento en cuanto a la carga de las mismas qué novedades hay dentro de lo que es el css3 pues como primero tenemos los bordes antes era imposible pensar que con css pudiéramos hacer redondos los bordes de un cuadrado por ejemplo para los jefes o cualquier otra sección de nuestro sitio web ahora si es posible hacerlo a través de css versión 3 vamos a ver un poco de ejemplos más adelante se puede manejar no solamente un fondo dentro de lo que es el css se pueden tratar hasta tres fondos uno al principio uno intermedio y otro al final de cada uno de los elementos que nosotros deseamos agregar los fondos hay una diversidad para el manejo de colores así como efectos en los textos para subrayar los para ponerlos como negritas etcétera los layout también permite que nuestras páginas web tengan párrafos en forma de columnas podemos definir tres cuatro columnas dependiendo de las necesidades que se tengan dentro de lo que es nuestra página web también hemos dicho que hay transformaciones ya es decir podemos hacer una especie de simulación en la cual pues se vaya una especie de juego por así decirlo y de hecho hay muchos ejemplos en internet que podemos descargar sobre las transformaciones las animaciones que se hacen también a partir de transformaciones plantar pero hay comandos un poco más específicos para poderlas hacer y una mejora como habíamos dicho verdad en los selectores crear clases nuevas subclases etcétera veamos algunos ejemplos del uso de el bordes en ciertos elementos que nosotros tenemos por ejemplo el primero que tenemos allí verdad donde hemos aplicado un radio de 15 píxeles para este cuadrado que tenemos ahí recordemos que en la sintaxis del css cuando nosotros te ponemos un valor y si es el elemento requiere de cuatro o tres valores ese valor se replica para los demás elementos que lo necesitan en este caso pues son cuatro esquinas las que están redondeadas entonces implica que hay 15 15 15 comenzando por en el sentido de las agujas del reloj arriba a la derecha abajo y a la izquierda ese es el sentido en el cual se colocan cada uno de los 15 píxeles para redondear las esquinas en el segundo ejemplo pues un borde que tiene un color entonces eso también era un poco difícil hacerlo antes a no ser que era alguien experto en javascript entonces si era bastante fácil poderlo hacer otro de los ejemplos que pueden observar a y es que el borde puede ser una imagen ya utilizando el atributo del url url permite traer o cargar una imagen para que el borde sea utilizado en esta imagen y en este último ejemplo pues hemos creado una especie de sombra para el rectángulo que está ahí en esa dirección web que ustedes pueden ver pueden encontrar algunos ejemplos o incluso formar el css a partir de ciertos requerimientos que ustedes tengan esta es otra página bueno es la página que les mencionaba verdad en la cual pues ustedes a partir de los botones esos que observan ahí pues le dan el número de píxeles que quieren redondeados verdad cambian los colores ancho de borde etcétera entonces es una herramienta bastante útil para la parte de la creación de sombras bordes y colores dentro de lo que es el css sobre todo en aquellos casos en los cuales los desarrolladores pues tienen muy poco que ver con la parte creativa el diseño verdad web este es un ejemplo de cómo podemos utilizar hasta tres imágenes utilizadas en este cuadrado que tenemos acá verdad se observa en el atributo url ya está cargado tres veces como background en la imagen entonces ahí pueden ver que hay una top imagine punto jpg la jpg es el formato que se recomienda utilizar dentro de lo que son las páginas web verdaderos esto podemos tener tres secciones para está y en cada sección tener una imagen pues va a depender verdad del requerimiento que no se haya dado en las transformaciones pues podemos rotar es decir darle vuelta en sentido 360 grados como máximo verdad a una figura podemos alargar la oa tachar la verdad en este caso 30 grados de la deformación la podemos escalar es decir hacerla más grande o más pequeña o la podemos trasladar es decir pasar de una posición x 11 a una posición x sub 21 que hay aquí pueden ver otra herramienta el arte de la web puntocom ya en el cual ustedes pueden acceder para poder ver este tipo de transformaciones y crearlas dentro de lo que es el css en la parte de la administración del color pues tenemos estos ejemplos que ustedes pueden observar acá la opacidad verdad se refiere a la capacidad de qué tan transparente puede ser un elemento respecto a un fondo por ejemplo no la cuestión acá de saberlo tomar en cuenta verdad es si ustedes quieren que todos los elementos de que están contenidos ahí pues tengan la opacidad porque se aplica a todos los elementos dentro de lo que son por ejemplo un h1 o dentro de lo que es un vivo dentro de lo que es una todos esos elementos se les aplica la opacidad la parte de manejo de color utilizando rgb h s l también es otra de las técnicas que se tienen como para poder hacer una mejor transformación del color verdad que tenemos o utilizando saturación y luz verdad dentro de lo que es el elemento que se quiera colorear en la parte del formato de multi columna verdad entonces tenemos los elementos como el con un count ya que dice cuántas columnas voy a requerir yo dentro de lo que es mi página web en este caso pues tendría que ser tres para el ejemplo que estamos observando luego tenemos el ancho de la columna verdad lo pueden observar ver lo que cuantos espacios cuántos píxeles bo qué porcentaje yo quiero de la página para que se le aplique el ancho luego pues el gap con un gap la separación que hay entre el final de un párrafo y el inicio verdad el otro párrafo el columbus verdad indica o sea la separación que hay desde la línea que los separa verdad al siguiente elemento hemos dicho que la parte de los fondos es importante verdad porque muchas veces el usuario no tiene instalada la fuente bajo la cual fue creada la página web en ese sentido pues es necesario que se incluya dentro de lo que es el css dentro de lo que es los códigos html alguna forma de poder contrarrestar esto uno de eso puede ser incluir la fuente con la cual nosotros estamos trabajando esas fuentes pueden ser fruta y verdad como lo tenemos acá verdad de tf1 pueden ser también del open pero opentype verdad sea que se maneja también verdad font para poderlo incluir por tanto de lo que es el cs este es un pequeño código verdad que permite pues la inclusión de algunos tipos de fuentes hay muchas páginas web en las cuales se pueden encontrar fuentes de verdad como la que tenemos por ahí www.ntt.com y se pueden descargar verdad para poder tenerlas dentro de lo que es nuestra página web con la parte de los fondos también es importante ver que el usuario o si el usuario le gusta que las páginas o sus palabras estén cortadas por ejemplo o que se alineen a todo el ancho de la columna que ha sido dado o no que tengan o no tengan una sombra entonces es importante para resaltar ciertos aspectos dentro de lo que es la visibilidad de la página web acá pueden observar algunos formas o sea que tenemos dentro de lo que es el css para darle sombra a las cada una de las letras que tenemos verdad si queremos o no queremos que se corte en las palabras ya y pues si hay un flujo verdad continuo de esa palabra es decir que cuando yo voy hacia abajo verdad si ese elemento se termina entonces si es posible seguir bajando o no verdad dentro de lo que es ese elemento para poder observar que más texto existe dentro de lo que es ese elemento hay uno que se llama pseudo clases que se ocupa por lo general para la parte de formularios podemos definir de una sola vez verdad si un uno de los elementos está habilitado o está deshabilitado esto es muy común utilizarlo cuando nosotros creamos formularios por ejemplo si el usuario no ha digital el correo electrónico por poner un ejemplo entonces no se habilita el botón de envío por ejemplo o en algún caso verdad vamos a pedir el sexo de la persona masculino o femenino entonces podemos dar por descontado que pues hay uno de sus elementos que debe de estar marcado con la parte del cheque ya entonces algunos de estas pseudo clases se aplican a unos elementos y otros se van a aplicar a otros elementos por ejemplo a botones a radio botón a xbox a campos de texto etcétera va a depender del requerimiento o sea que se haya dado de colocarlos o no colocarlos estos son otros ese lector es verdad que nosotros podemos encontrar por ejemplo en el ejemplo que tenemos ahí verdad att asterisco y world vale quiere decir que si en todos los elementos sea que contiene la palabra por así decirlo vale ya entonces nosotros podemos observar acá verdad él h ref ya igual http dos puntos web ya entonces lo que me está buscando verdad ahí es la parte de todo lo que está marcado con web el otro es todo lo que finalista con ese hilo 3 ok si tiene en la parte de un pdf ya si contiene si comienza por un valor verdad o si finaliza por un valor esto algunas veces es necesario utilizarla porque no conocemos con exactitud los nombres que le hemos dado a las clases ya entonces debemos de colocar este tipo de sentencias para poder abarcar las todas y lógicamente si a todas hay que darles algún tipo de tratamiento especial la parte de media query es verdad y del max with them in which verdad tiene que ver con los diferentes tipos de pantallas o sea que se van a utilizar en nuestra página web debemos de pensar que los usuarios osea no van a tener un solo tipo de pantalla con el cual van a observar la página web entonces es necesario o sea utilizar este tipo de atributos que permitan maximizar u optimizar verdad el ancho de cada uno de los dispositivos con los cuales se está viendo la página web como el uso del css es bastante complicado sobre todo cuando comenzamos a utilizar este tipo de tecnologías algunas de las herramientas que ustedes pueden utilizar y que se encuentran en la web es esta verdad la primera es css3 generator ustedes tienen ahí cada una de las etiquetas sobre las cuales ustedes pueden generar código css tomarlo copiarlo y pegarlo dentro de lo que su archivo css y por supuesto el w3c ya que contiene toda la información sobre el estándar no sólo de el css3 sino que de la otra tecnología como html y también de javascript gracias por la atención nos vemos en el siguiente vídeo"