 bueno y un poquito de css que tal para seguir bueno pues mira nada menos que Jan Arles Vallejo, él es de la comunidad de WarPrestulua en Colombia y nos va a enseñar principios y fundamentos del css, o sea que no le cogeis miedo y vamos a aprender mucho y bien. Hola qué tal amigos bienvenidos a esta nueva ponencia donde vamos a tocar css y si lo que están viendo en pantalla es netamente html y css, algo sorprendente ¿no? Bueno en esta ponencia vamos a tratar de dejar las bases bastante claras para que en un futuro y con bastante trabajo podamos llegar a esos resultados. Mi nombre es Jan Arles Vallejo, soy de Tulua Valle en Colombia y actualmente soy fundador de la comunidad llamada Aprendiendo Bando, también soy co-organizador de la comunidad de WarPrest en mi ciudad y en mis ratos libres también soy instructor en la plataforma Udemy donde doy cursos relacionados sobre WarPrest y majestación. Me pueden seguir en todas las redes sociales como Arroba Vallejo, vamos a ver entonces cosas maravillosas de css, esta charla muchacho se va a componer de cuatro grandes pilares que son la introducción, vamos a ver algunos conceptos fundamentales que debemos manejar sillos, también vamos a ver algunas buenas prácticas y para finalizar vamos a ver algunas cosas hermosas que nosotros podemos lograr con css ¿listo? entonces vamos a empezar por su introducción que css en español significa hojas de estilo en casca, es lo que nos permite a nosotros decirle al sitio web, hey tú te vas a ver de esta forma, es el maquillaje de nuestro html, para de contar ¿listo? ahora eso se compone de algunas cosas, tiene una propiedad, un valor y en conjunto se llama declaración y qué más tiene, debe tener algo que se selecciona a lo que nosotros le vamos a aplicar esa declaración, nosotros tenemos un ejercicio bastante práctico donde vamos a ver la parte introductoria y bueno vamos a empezar entonces con los selectores y antes de vamos a ver qué están agrupados en diferentes categorías, lo primero está por etiqueta, entonces nosotros en css podemos decirle hey yo quiero darle un color al header, yo quiero darle algo unos estilos al h1 ¿cierto? entonces si yo vengo y analizo esto de acá, mire que nosotros tenemos header, las llaves, tenemos la propiedad y tenemos el valor, pasemos a uno mejor, entre comillas, footer, por id, en css nosotros colocamos ese signo del gatito, signo enumeral como le llamas en su país y tenemos, le colocamos este nombre, mire este nombre, todas esas propiedades con esos valores se le van a aplicar aquí al footer, viene lo más usado y lo más recomendado, los selectores por clases, si nosotros nos fijamos tenemos en id tenemos el signo del gatito y en clases tenemos el puntico ¿listo? vuelve juega, tenemos en html, tenemos el atributo llamado clas con un nombre para ir a contar, nosotros venimos a nuestra presentación y nos vamos a encontrar con que tenemos una serie de links de interés, esto ahora otro paréntesis cada vez que nos encontremos este título en la presentación es porque me lleva a un pause donde me explican esto a profundidad, yo recomiendo la documentación de mozilla, es para mí es una de las mejores, ahora vamos a pasar con unos conceptos fundamentales muchachos que debemos manejarlo, ojo si o si, vamos a iniciar con la cascada, css funciona de arriba hacia abajo, ¿qué quiere decir esto? ejemplo, vamos por ejemplo a abrir esto y vamos a ver qué pasa, según lo que yo les indiqué que css funciona de arriba hacia abajo, ¿qué creen que va a pasar? a la clase caja o mejor al selector de clases llamado caja, ¿qué color de fuente se le va a dar? el verde, el azul o el rojo, bueno vamos al sitio, se les va a aplicar el rojo, ojo, aquí hay que tener en cuenta algo muchachos, la cascada funciona de arriba hacia abajo, siempre y cuando su especificidad no sea mayor, ahora bien vamos a explicar el tema de especificidad, los electores de tipo elemento y pseudo clases valen un punto, las clases y los atributos valen 10, los id valen 100, los estilos en línea valen 1000 y los importan siempre ganan, ahora otro paréntesis, estos dos, estos dos últimos muchachos tratenos siempre de evitarlos, ¿listo? ahora, ¿qué querrá decir sobre estos valores? bueno vamos a ver por acá, vamos a llevarnos esto un poquito por acá para que veamos esta parte, tenemos dos ejercicios, listo entonces vamos a ver qué pasa acá, este selector de clases según esto me vale 10 puntos y este me vale body, que es un elemento que vale un punto y esta caja que vale 10 puntos, eso quiere decir muchachos que eso tiene 11 puntos, ¿listo? entonces según eso qué, pues lógicamente se va a aplicar esto así este por encima de la cascada, así este por encima del comportamiento normal de qué de la cascada y el último punto que vamos a hablar es el U, es el que se llama herencia, vamos a ver algo algo interesante, nosotros le aplicamos algunos valores al padre y esta propiedad con este valor se le va a aplicar a sus hijos, ¿listo? eso es muy importante que lo tengamos en cuenta, entonces lógicamente eso se lo deben leer un poco más, trabajarlo, pero pues esa es la explicación más básica con que nosotros nos podemos identificar a la hora de ver estos términos y este link de interés para que lo visite y ahora vamos a tocar entonces la parte de buenas prácticas, vamos a ver que en CSS tenemos unas cosas prohibidas que no podemos hacer, estilos en línea se refiere a por ejemplo colocar style y aquí dale un color green, pues el estilo en línea, mírelo acá, pero estas dos no se recomiendan, entonces son cosas prohibidas que nosotros tratemos de evitar siempre, darle styles a los ID, ya se los dejé como tarea, usar arroba import, eso es prohibido muchachos cuando estemos utilizando CSS de forma normal, ¿listo? ¿por qué muchachos? porque nosotros si nos fijamos acá en el archivo link, en el archivo HTML, tenemos el main.css y tenemos buenas prácticas, pero cuando nosotros estamos utilizando este arriba arroba import, el nombre del archivo con su extensión, no estamos cargando o haciendo dos peticiones al servidor, estamos haciendo tres. Usar flots para construir un layout, en ese momento nosotros deberíamos estar utilizando como mínimo flesbos, pero si quieren estar en el top deberíamos estar utilizando grid, grid layout, eso es todo en las cosas prohibidas y algunas recomendaciones, vamos a usar algunas convenciones de nomenclatura apropiadas para darle los nombres a nuestras clases, en este link les dejo un artículo bastante interesante de algo llamado BEM, block element modifier, ¿listo? utilizar shorthand de CSS es combinar elementos y crear clases de ayuda, y lo último que vamos a ver es se llama cosas hermosas de CSS, aquí únicamente vamos a mostrar algunos lindes de interés que me parece muy interesante que empezamos a conocer, por ejemplo las animaciones, mire eso se hace únicamente con CSS, tenemos esto, mire tan interesante y uno de los más interesantes muchachos es lo que les mostré al inicio, se llama eso se conoce como arte en CSS, tenemos varias ustedes pueden darle una miradita, mire lo que tenemos acá es tan interesante, eso es únicamente CSS muchachos, no es más, muchas gracias por ver esta ponencia y espero que les haya gustado