CSS en acción: cómo añadir estilos, formato y funcionalidad

1. Introducción: Oigan a todos. Bienvenido a la inacción CSS. hoy vamos a estar viendo las hojas de estilo CSS o en cascada y cómo se pueden aplicar al contenido. A veces pueden parecer magia negra, pero vamos a pasar por ahí y mirar las reglas básicas que subyacen CSS y hacer que sea fácil para ti aplicarlas a tu contenido. Ya sea desarrollador o diseñador, haya experimentado o no, esta es una buena clase para usted. Vamos a cubrir los conceptos básicos rápidamente para que todos estén al día y vamos a avanzar desde ahí. Estaré brindando todo lo que necesites para la clase, in-links, recursos y espacio de trabajo online y si tienes experiencia, van a haber archivos que podrás descargar y trabajar de la manera que prefieras. Todo el trabajo que estamos haciendo hoy va a ser en CSS. Te estaré proporcionando un documento HTML, pero no vas a tener que preocuparte por editarlo. Todos estamos empezando con el mismo contenido y terminando con algo singularmente completamente tuyo. Por el punto medio del proyecto, todos vamos a estar trabajando hacia la misma página web. Tendrá pulido, y estilizado y un gran punto de referencia para comparar y hacer preguntas a otros alumnos de la clase para ver qué podrías haber hecho mal. Después de eso, te voy a entregar unas herramientas más y luego te vas a poner por tu cuenta. Usa tu imaginación y ve qué puedes hacer con esta página web. Es increíble ver lo que con el mismo contenido exacto, un poco de CSS y creatividad puede crear. Me emociona ver qué puedes hacer al final de la clase de hoy. 2. Cómo empezar el proyecto: Vamos a usar CodeSandBox.io para hacer que el proyecto de hoy sea rápido y fácil de saltar. Si tienes suficiente experiencia en desarrollo, entonces prefieres trabajar en tu propio entorno local, siéntete libre de descargar los dos archivos proporcionados y editarlos como te sientes más cómodo. Una vez terminada la clase, puedes subirlas a CodeSandBox o ponerlas en otro lugar enteramente para compartir tu progreso. De aquí en adelante sin embargo, estaré asumiendo que estás siguiendo conmigo. CodeSandBox nos permite empezar todos en la misma página utilizando el enlace proporcionado para el proyecto de inicio. Tan pronto como hagas una edición a cualquiera de esos archivos, tu proyecto obtendrá una URL completamente nueva y se convertirá en único para ti. Estaremos usando ese hecho para que sea fácil compartir nuestro proyecto siempre que tengas dudas o cuando estés listo para mostrar tu propio resultado final. Así debe ser tu proyecto una vez que hayas seguido nuestro enlace de inicio. Sólo hay unos cuantos archivos en el proyecto, package.json, que vamos a ignorar por completo por hoy, no te preocupes por ello, index.html, que es donde vive todo nuestro contenido, y styles.css, que vive en la carpeta de estilos por si acaso está oculto. Ahora, vamos a estar viendo el contenido del archivo HTML en breve, pero primero, quiero recordarle a todos, no vamos a estar editando nada en index.html. Todo nuestro trabajo de hoy se realiza en styles.css. Significa que no importa lo diferente, complejo o completamente único que sea el proyecto final de todos, todos están basados literalmente en el mismo contenido. Ver lo variada que su presentación CSS podría hacer una página ayuda a ilustrar lo poderoso que es lo que estamos aprendiendo hoy. 3. Una mirada rápida del contenido: Si bien no vamos a cambiar nada en este archivo HTML, vamos a estar refiriéndonos a él, mucho. El CSS tiene muchas herramientas para peinar contenido de formas tanto generalizadas como muy precisas. Pero todos se basan en cómo se escribe realmente tu contenido HTML. Echemos un vistazo rápido a cómo se presenta nuestro contenido, ahora, no te preocupes por memorizar todos estos detalles solo vamos por una comprensión de imagen grande en este momento, actualizaré detalles específicos más adelante para ti a medida que se vuelvan relevantes. Siempre puedes referirte al archivo HTML a tu propio ritmo. El contenido en sí también contiene pistas y detalles que podríamos no cubrir directamente en estos videos. Adelante y lee mientras estamos trabajando, Es importante recordar que todo en HTML está anidado. Por ejemplo, aquí abrimos el elemento Header y aquí lo cerramos. Todo lo que hay entre sí se considera dentro del Encabezado, aunque no haya nada visual en la página, para realmente contarte sobre eso aún sin mirar el código, sangrar correctamente HTML sí te da pistas sobre anidar por empujando elementos anidados de más y más allá con el fin de que sea fácil juzgar de un vistazo, como se ve aquí, tenga en cuenta que los elementos pueden ser anidados múltiples niveles de profundidad. Justo debajo del encabezado, tenemos un elemento de navegación que contiene un elemento de lista UL o Unordenadas, el cual contiene un montón de elementos LI, List, cada elemento cual contiene un montón de elementos LI, List, de lista incluso tiene un enlace dentro de ellos, pesar de que no están divididos en dos líneas separadas y sangradas. Para evitar que los archivos HTML increíblemente grandes sean inútilmente largos. Muchas veces, el contenido simple, como un enlace dentro de un elemento de lista, se mantiene en una sola línea, como se ve aquí. 4. Caja de herramientas de CSS: elementos de clases y identificaciones: Existen tres métodos primarios de aplicación de CSS que vamos a utilizar hoy, elementos, clases, e ID. Estos tres métodos de escritura de instrucciones CSS se pueden utilizar juntos para aplicar nuestros estilos con precisión y lógica una vez que entendamos cómo funcionan. Pero no te preocupes por agregar ninguno de los CSS que estoy escribiendo en esta sección, todos modos lo vamos a borrar en un momento. Te avisaré cuando empecemos a escribir código que querremos conservar. En primer lugar, hablemos de elementos. Un elemento es la forma más generalizada de aplicar CSS al contenido. Apenas cualquier contenido de una página HTML puede considerarse un elemento estilizable. Echemos un vistazo al primer párrafo de la página bajo el encabezado de contenido R. El texto está envuelto en una etiqueta p para párrafo. Esta etiqueta p es nuestro elemento. Si escribiéramos CSS para hacer más grandes todos los párrafos de la página, podríamos usar este elemento general para hacerlo así. A continuación, tenemos clases. ¿ Y si quisiéramos agregar algunos estilos a sólo algunos de nuestros párrafos pero no a todos ellos? Las clases son nombres reutilizables que podemos aplicar a nuestro contenido pieza por pieza. Nos dejan escoger y elegir de manera más selectiva que solo apuntar a cada elemento de la página. He agregado clases a lo largo del contenido HTML, pero veámoslas en acción. El primer párrafo de cada sección tiene una clase de primer párrafo. Podemos usar eso para girar selectivamente esos párrafos, y sólo esos párrafos, en rojo. Nota, para CSS, usamos un punto antes del nombre de la clase para decirle a nuestro archivo que es específicamente una clase a la que estamos llamando. No agregamos nada extra a nuestro elemento. Por último, tenemos identificaciones. Piensa en una identificación como una clase que solo consigues usar una vez por página. Bueno, una clase es útil porque es reutilizable y flexible y la identificación se trata de ser única. Puedes estar seguro de que cualquier estilo que apliques a un ID solo se aplicará a ese contenido exacto. Entraremos en detalles más adelante, pero los ID son increíblemente útiles cuando necesitas asegurarte de que cierta pieza de contenido tenga un estilo único, incluso si otros estilos de clase están en conflicto. tanto que las clases obtienen un punto para diferenciarlas, los ID usan un símbolo hash, como este. 5. Diseño de imágenes grande: De hecho, empecemos a peinar nuestro proyecto ahora viendo algunos de los cambios más amplios que podemos hacer. Debería haber un elemento ya en tu hoja de estilo el único CSS que escribí para ti antes de que comenzara la clase. Selecciona el elemento body, que es un elemento que contiene todo lo visible en la página y establece la fuente para que sea Arial,, con un respaldo a cualquier fuente Sans Serif si Arial falta de tu sistema por alguna razón. Empezaremos sumando a este elemento. Por ahora agrega CSS a mi lado, pausando el video como sea necesario como una forma de aprender y practicar tus nuevas habilidades de codificación. Una vez que lleguemos a cierto punto de la clase, te haré saber que ha llegado el momento de agregar tu propio toque creativo y hacer que el proyecto sea completamente tuyo. Hasta entonces, todos estamos trabajando hacia el mismo objetivo. Por defecto, nuestro navegador agrega un poco de espacio en blanco alrededor de nuestro contenido, para que no se frote directamente contra los bordes de la ventana. Si bien eso es útil, sí queremos escribir nuestras propias reglas para cómo dispensar este contenido, eliminemos el margen y el relleno del elemento del cuerpo así. Esto no va a quedar genial de inmediato, pero estamos construyendo hacia algo. Ahora hay algún contenido esparcido por toda la página que sentí merecido un poco de énfasis, podemos usar el énfasis del nombre de clase, que ya he agregado a esos bits para hacerlo. Hay muchas maneras de enfatizar tu contenido, pero por ahora, hagámoslo audaz, hagámoslo cursiva, y hagamos que se subraye, ahí, eso debería ser más difícil de perderse. También tenemos algún contenido que hace referencia al código real como ejemplos para ayudarte a aprender. El CSS es un poco más complicado aquí y lo estamos desglosando más a fondo en las próximas lecciones. Por ahora sigue y toma notas sobre cualquier cosa que no tenga sentido de inmediato. Vamos a agregar dos clases, código y código comentario. Queremos que el código parezca que está directamente fuera de nuestro editor de códigos, así que vamos a darle forma y colorearlo para destacarlo. Ahí vamos, eso se parece un poco más a nuestro editor de códigos para que se destaque. Ahora los comentarios de código no son funcionalmente código sino pequeños consejos o notas para mí sobre lo que debería estar yendo dentro de tu código fuera de los ejemplos. Para asegurarnos de que no nos confundamos, pongamos esos verdes y hacerlos fácilmente separados visualmente. 6. Personalización del encabezado: A continuación, hagamos que nuestro encabezado se vea un poco más como un encabezado real. En la última lección, aplicamos algún diseño y colores a los elementos de nuestro contenido con una clase de código y código de comentario. Vamos a traer algunos detalles de color y diseño a nuestro encabezado también. En primer lugar, centrémonos en el título de la página, el elemento H1. HTML utiliza una serie de elementos de encabezado: H1, H2, H3, etc. Por lo que el contenido puede contener muchos niveles de importancia para sus encabezados. Por lo general verás un solo H1 en una página aunque no hay ninguna restricción obligatoria al respecto. H2 podría utilizarse para anotar una sección particular del contenido. Cada una de las secciones más grandes de nuestra página, igual que nuestro contenido, está en H2. Si son secciones más dentro de ese tema, podría usar H3s y así sucesivamente. Al igual que la etiqueta body, los navegadores suelen tener un espaciado predeterminado agregado a estos encabezados sobre los que recaen si no escribes reglas específicas en tu CSS. En este caso, vamos a decirle a nuestros elementos H1 exactamente cuánto margen queremos que tenga. Queremos estar centrados, y queremos tener un color particular. Ahora queremos que el subtítulo más pequeño coincida. No está dentro del H1, sino más bien su propio elemento de párrafo. Vamos a apuntar a ese elemento como lo hemos hecho anteriormente y recoge algunos estilos. Queremos un poco más grande así que obviamente es parte del título visualmente. El unidad que estoy usando aquí ems es uno de tamaño relativo para elementos tipográficos. Estaré aportando recursos para profundidad adicional para investigar esto, pero por ahora, solo considera 1.2 em significa 120 por ciento del tamaño que normalmente sería el texto. También estaremos configurando aquí el margen y el relleno explícitamente para anular el espaciado de párrafos predeterminado. Añadamos un poco de color azul de aspecto fresco, y añadamos un borde para que podamos separar la parte superior de la parte inferior del título. Ahora el encabezado se ve bastante bien, pero creo que nuestro CSS tuvo algunas consecuencias no deseadas abajo. 7. Entender el fallo.: ¿ Qué pasó? Fuimos capaces de poner nuestro encabezado y título justo como los queríamos, pero los estilos para el subtítulo se han llevado a cabo y se han aplicado a cada párrafo de la página. Eso hace que nuestro contenido sea difícil de leer y echa de menos por completo el punto de tener estilos de encabezado únicos en primer lugar. Lo creas o no, este masivo grado de estilo ampliamente aplicado es una de las características más grandes del CSS, no un error. Por eso se llaman hojas de estilo en cascada. Siempre y cuando conozcas las reglas, es mucho más fácil darle estilo a un 1000 párrafos en una página con esta cascada de lo que sería hacer manualmente todos y cada uno. ¿ Cómo contenemos esa cascada? Hay algunas formas que consideraremos a lo largo de la duración de este curso, pero la más simple es con algo llamado especificidad. Aparte de ser un gran trabalenguas para decir cinco veces rápido, especificidad es uno de los mayores métodos de escribir CSS para comportarse exactamente como quieres que funcione. ¿ Recuerdas cómo hablamos de anidar hace unos minutos? CSS es muy consciente de cómo está anidado tu contenido, y así podemos usar la especificidad para seleccionar solo los elementos anidados que queremos. ¿ Ves cómo nuestras etiquetas h1 y párrafo están anidadas dentro de nuestra etiqueta de encabezado? Así es como reflejamos eso en nuestro CSS. Usa un espacio entre elementos para apuntar a cualquier h1 que esté dentro de un elemento de cabecera y a cualquier párrafo que esté dentro de un elemento de cabecera. Solo tenemos un elemento de cabecera en nuestro contenido. Este CSS apunta exactamente a lo que queremos de forma rápida y eficiente. 8. Inmersión en la especificidad: Antes de seguir adelante, hablemos un poco de especificidad. Manos fuera del teclado otra vez, no hace falta agregar ninguno de los CSS que te estoy mostrando aquí. Sólo va a ser un código ficticio para explicar de qué estoy hablando. Recogeremos de nuevo escribiendo CSS real de la siguiente sección. Hemos visto dos ejemplos de cómo escribir especificidad, ambos restringiendo nuestros estilos a cualquier H1 o cualquier párrafo que se encuentre dentro de cualquier elemento de encabezado. Recuerda, si tuviéramos 10 encabezados diferentes en esta página, todos seguirían estas nuevas reglas, pero ¿qué otras herramientas hay disponibles dentro de la especificidad? En primer lugar, con qué nivel de anidación comienzas es arbitrario. Si bien tenemos el encabezado H1 aquí, también podría escribirse como HTML, body, header, H1. Todo en esa página de contenido está dentro de las etiquetas HTML y body, pero no necesitamos hacer eso. Es en gran parte el mismo efecto para nuestro CSS actual. Es importante saber sin embargo, que cuanto más específico sea tu CSS, más importancia se le da. Por ejemplo, puedo establecer el tamaño de fuente de nuestro H1 anterior y luego anularlo por completo aquí con CSS más específico y ahora, no importa cómo cambié la regla menos específica, no importa. No hay muchas situaciones en las que especificidad como esta debería ser tu herramienta de referencia para resolver conflictos de estilo, pero puede ser un gran lugar para empezar a buscar errores no intencionados. A continuación, veamos cómo encajan las clases y los identificadores en esta imagen. Los presenté en el orden de elemento, luego clase, luego ID, por alguna razón. Si escribes un estilo para un elemento de párrafo, entonces un estilo diferente para nuestra clase en ese elemento de párrafo, la clase gana en importancia. Además, cualquier estilo adscrito a un ID gana tanto sobre el elemento como sobre la clase. Mira aquí, puedes usar una combinación de elementos, clases e identificaciones cuando construyes un orden de especificidad único, como vemos aquí arriba. No vamos a estar abriendo esos gusanos hoy sin embargo, hay múltiples metodologías para lo que parece escribir un buen CSS, pero hoy solo lo estamos manteniendo simple. Si quieres jugar con la especificidad complicada como parte de tus personalizaciones, solo recuerda esto, los elementos individuales son menos importantes y las clases que son menos importantes que los ID. Cuanto más específico permita su CSS algo como esto, mucho más importante se considera. Agregar más especificidad a un estilo si algo es confuso o conflictivo, es la opción nuclear, no debe abusar de ella. Por último, una nota sobre algo que parece especificidad, pero no lo es. Usar una coma como esta, no está apuntando a un H3 dentro de un H2 dentro de un H1. comas hacen de esto una lista, diciéndole a CSS que todas las reglas escritas deben aplicarse a todo en esa lista. Es una forma de mano rápida en lugar de escribir H1, H2, H3, te ahorra tiempo y espacio y puedes aplicar código uniforme de esta manera. Ahora, apenas estamos arañando la superficie de todos los matices en especificidad, así que asegúrate de hacer preguntas y mirar a través de los materiales extra provistos con el curso para tener una mejor comprensión de este tema tan importante en el futuro. 9. Trabajar con las listas y la navegación: Armados con una nueva comprensión de la especificidad, presionemos hacia adelante para darle estilo a nuestra navegación de páginas. Las listas son forma muy común y muy poderosa de estructurar la navegación para páginas web y recursos. Dicho esto, vienen con aún más estilos de navegador por defecto que la mayoría de los elementos. Tenemos que asegurarnos de deshacer eso para nuestros propios propósitos. Al igual que antes, vamos a empezar con un elemento contenedor más grande y trabajar nuestro camino hacia abajo hacia la especificidad anidada. Estamos a punto de hablar de lo que realmente significa este estilo de bloque de visualización en la siguiente sección, pero ayuda a establecer el escenario para nuestras listas en este momento. Cuelga apretado por solo un poco más de tiempo en esa. Llegaremos a ello, te lo prometo. Queremos que esta navegación sea amplia pero no muy tocando los bordes del navegador como lo es ahora. Estaremos ajustando el ancho al 98 por ciento y luego usaremos el soporte de márgenes en el centro así. Específicamente, acabamos de decir al navegador que nuestro elemento nav debería tener margen cero en la parte superior, margen automático en ambos lados, y 40 píxeles de margen en la parte inferior. Por último, por si acaso, sí necesitamos decir explícitamente que no queremos ningún relleno. Los estilos básicos para la lista desordenada en sí son bastante simples. El último estilo que acabamos de escribir para este elemento dice que no queremos viñetas, ni círculos, ni otros iconos de estilo lista aplicados a nuestros elementos de lista. Nos encargaremos de ese diseño nosotros mismos. Muchas gracias. Por último, vamos a añadir una serie de estilos a los propios enlaces dentro de la lista. Aquí es donde la navegación comenzará a cambiar de una lista a un diseño de sitio web adecuado. 10. Diseño y cambios de visualización: A medida que salimos del ámbito del texto plano, los puntos de viñeta, y otros detalles tipográficos, necesitamos mirar otro aspecto del CSS, el diseño de contenido y los formatos de visualización. Hay un par de tipos principales de valores de visualización que utilizamos regularmente. Si miramos atrás a nuestro CSS ya escrito, incluso tenemos los dos primeros. En nuestro menú de navegación, configuramos los enlaces para mostrar valor llamado bloque. Sin ningún otro estilo explícito, eso significa que esos elementos ahora comienzan naturalmente en las nuevas líneas escritas y ocupan tanto ancho como puedan en esa línea. Empezaremos a restringir eso pronto con más estilos, pero un elemento con su conjunto de display de bloque es muy común para muchos diseños modernos. En la clase de código, utilizamos para mostrar valor llamado inline-block. Esta pantalla es similar al bloque y cómo podemos agregarle márgenes y patrón junto con un color de fondo. Sin embargo, difiere, al no arrancar naturalmente los elementos en una línea completamente nueva a la anchura máxima. Es genial para agregar estilos y diseños personalizados a partes a través contenido sin romper la línea de texto o las complejas características de diseño, exactamente donde lo usamos cuando lo hicimos para nuestros fragmentos de código. Hay muchos valores de visualización adicionales que se pueden establecer manualmente, incluyendo tabla, elemento de lista y más. Muchos de estos son el valor predeterminado con su respectivo elemento, por lo que no tienes que preocuparte por usar el manual muy a menudo. Puede ser bueno estar familiarizado con ellos aunque por si acaso. En la siguiente lección, estaremos viendo dos de las opciones de visualización más recientes y cómo cambian poderosamente el juego cuando se trata de diseño CSS. 11. ¡Floats vs. Flex (¡la cuadrícula!): Para entender las poderosas nuevas herramientas que tenemos disponibles en CSS, es importante saber qué ha estado en uso hasta ahora. En las edades oscuras del CSS, absolutamente todo estaba en tablas. Imagina visitar tu sitio web moderno favorito y luego intentar reconstruirlo en una hoja de cálculo de Excel. No es un pensamiento feliz. Bueno, las tablas aún tienen su lugar para datos tabulares, información. No deben utilizarse para estructurar el diseño general de una página. Para dejar atrás ese terrible momento, empezamos a usar algo llamado carrozas. El uso previsto para un valor flotante en CSS era hacer un diseño simple, como tener un envoltorio de párrafo grande alrededor del lado de una imagen relacionada. Piensa como un libro de texto, para bien o para mal sin embargo, son capaces de hacer mucho más que eso. Veamos qué sucede cuando agregamos float left a nuestros enlaces de navegación. Para una sola línea de CSS, eso no está mal. Se parecen mucho más a botones y caben en una fila. El principal problema con las carrozas es que debido a que no estaban destinadas a la planificación del diseño estructural, hay muchas capturas y gotchas que tienes que cubrir cada vez que las usas. Mira lo que pasa cuando cambiamos el tamaño de nuestra ventana sólo un poquito. En lugar de cubrir cómo manejar todos los pequeños detalles para usar carrozas de manera semi en forma oficial, vamos a seguir adelante y mirar una de las herramientas más nuevas que tenemos por ahora. Sin embargo, si sigues persiguiendo el aprendizaje en CSS, podría que algún día tenga que trabajar en mantener el código de otra persona. Aprender los entes-out de las carrozas será importante. Todavía están en uso generalizado en grandes proyectos a través de internet. TOMANDO tiempo para familiarizarte con los materiales del curso extra te servirá bien. Ahora hablemos de flexbox. Este valor de visualización fue uno de los más poderosos que se agregaron a CSS en algún tiempo, y es el primer paso en una nueva era de métodos de diseño y diseño. Así es como funciona. Declaras display flex en el padre de los elementos anidados que quieres diseñar, así. Parece que nuestras carrozas. Pero nuestro contenido se mantuvo mucho mejor al espaciar, y ver qué pasa cuando encogemos la ventana ahora? [ inaudible]. Eso es mucho mejor. Aún más importante, flex nos da acceso a algunas herramientas de diseño muy importantes. Para nuestra navegación, vamos a establecer la alineación del elemento, que es el centrado de arriba a abajo, y la justificación del elemento, que está centrado de izquierda a derecha. Estamos usando el espacio entre para nuestra justificación, que es un valor engañosamente poderoso. Toma el primer y último enlace y los pone en el mismo inicio y muy final del espacio respectivamente. A continuación, calcula el espacio en blanco restante y lo coloca uniformemente entre todos los elementos restantes en el medio. Intentar recrear que vía carrozas sería complicado y probablemente bastante frágil código de mantener. Hay muchos más valores para flexbox que los animo a investigar pronto dentro de los materiales extra de los cursos. Estaremos cubriendo algunos usos más avanzados justo al final de la clase. Pero un entendimiento fundamental es invaluable para un diseñador y desarrollador moderno. 12. El poder de CSS: Hoy hemos cubierto mucho. Buen trabajo colgando ahí hasta ahora. Usando lo que hemos aprendido, sorprendentemente queda poco trabajo por hacer para que la gran mayoría del contenido que todavía está en página caiga en su lugar. Estaremos usando elementos en clases para aplicar rápidamente estilos de amplio alcance en toda nuestra página. Si nos fijamos en index.html, la mayor parte de nuestro contenido se envuelve en secciones y artículos, así que empecemos por peinar esos. La mayor parte del CSS debería parecer bastante familiar. Estamos configurando un valor de visualización de bloque, un ancho de 90 por ciento para asegurarnos de que nuestras secciones no estén completamente a través de la página, y tenemos el margen configurado incluyendo auto en ambos lados, por lo que flotarán en el centro de la página en lugar de estando a la izquierda o a la derecha. Todos los artículos se ven bastante bien, vamos adelante y manejemos el contenido dentro de ellos. ¿ Y si separáramos esos primeros párrafos en cada artículo para que realmente se vea un único en comparación con el resto de nuestro contenido? Ahí vamos, una sección inicial para cada artículo de contenido. Ahora, podemos ordenar rápidamente los diversos encabezados también. En lugar de dejarlos como texto plano sin embargo, vamos a divertirnos un poco y realmente estilizarlos. Vamos a ir por una ficha de carpeta tipo de apariencia por lo que es obvio de un vistazo rápido qué títulos están conectados a qué secciones de contenido. Ahí vamos, eso se ve mejor. Démosle un poco de atención a los sub-encabezados h3 también. Tenemos una última cosa en la que hay que parar. Ese segundo bit de texto en la parte superior de la página, si comprobamos index.html, en realidad no es parte de una etiqueta de párrafo, su bajo span. No es de extrañar que no se aplicaran nuestros estilos. Yo he puesto una identificación ahí sin embargo, así que vamos a retocar usando eso. Ahí vamos, eso se ve mejor. Si bien no los usaré para esta clase, asegúrate de tener en cuenta que todas y cada una de las secciones de contenido tienen asociado un ID único. Usa eso como herramienta de especificidad mientras trabajas en tus propias personalizaciones, y puedes hacer que todas y cada una de las secciones se vean completamente diferentes. 13. clases de Pseudo-Classes: Nos estamos acercando al final. Hay un poderoso conjunto de herramientas más. Yo quiero mostrar una acción sin embargo, Pseudo Clases. Hay suficientes pseudo clases y trucos increíbles para llenar dos o tres cursos completos. Pero vamos a cubrir lo básico. utiliza una pseudo-clase para definir el estado de un elemento. Hay dos pseudo-clases que estaremos viendo hoy para ayudar a aclarar esa definición. El primero es hover. Vamos a utilizar la pseudo-clase de hover para decirle a nuestros enlaces de navegación que cambien sus estilos cuando detecten el ratón del usuario que se cierne sobre ellos. Eso significa que el estado predeterminado de los enlaces es deshovered. Cuando entonces cambia para pasar el cursor, queremos hacer algunos cambios en los estilos. El CSS en sí es bastante simple. Todo lo que estamos haciendo es cambiar el color de fondo, orden y el color de la fuente y terminamos con un botón bastante cool que interactúa directamente con el usuario. El pseudo clase es justo, colon y luego el tipo de pseudo-clase, En este caso hover. Ahora, la segunda pseudo clase es un poco menos emocionante, pero es muy importante para la presentación. Esta pseudo-clase se llama visitada. Un navegador web realiza un seguimiento de los enlaces que visitaste antes. Por defecto, los enlaces no visitados son un azul brillante mientras que los visitados son morados. Para asegurarnos de que nuestros botones azules no tengan repentinamente un ojo cruzando sombra de texto morado, cuando nuestro usuario empieza a hacer clic alrededor, usamos visitado, así para asegurar que el texto se mantenga blanco. Ahí vamos. Ahora, cuando estás reforzando una regla como esta con una pseudo-clase, donde los enlaces ya son blancos por defecto, hay una forma aún más rápida de hacerlo. En lugar de escribir la regla fresca, simplemente agréguela con una coma. Al igual que esto. Asegúrate de echar un vistazo extra a los recursos de la clase y ver qué otras pseudo-clases puedes rastrear para realmente llevar tu proyecto al siguiente nivel de personalización. 14. Flexbox de lujo: Para ayudarte a pensar en algunas adiciones creativas a tu versión de este proyecto, he preparado una demo, algunas personalizaciones divertidas por mi cuenta. Para mantener las cosas simples, debes agregar tu CSS personalizado al fondo del archivo styles.css en el que hemos estado trabajando una vez que estés listo para comenzar a codificar. Sin embargo, para su referencia, he agregado todos mis nuevos estilos a custom.css. No te preocupes demasiado por la mecánica de agregar otra hoja CSS. Sólo tienes que saber que todo lo que he escrito en custom.css está hecho para sobremontar los estilos que construimos juntos en styles.css. Eso hace que sea fácil para ti comprobar, y ver cuál es la diferencia que realmente transformó mi versión personalizada. un buen vistazo a través del contenido, y mira lo que he cambiado, el diseño del encabezado, las pestañas de navegación animadas, y mucho más. ver si puedes escoger al menos un cambio, y luego rastrear cómo lo hice en custom.css. Una cosa importante que quiero mostrarles es cómo reordené por completo el contenido de la página. Lo primero que vemos en mi versión personalizada son recursos adicionales, que es el último contenido de un proyecto compartido, entonces ¿cómo haría eso sin cambiar realmente el HTML? Con el poder de flexbox. En primer lugar, configuro todo el cuerpo para mostrar flex, lo que me permite controlar en gran medida cómo están dispuestas todas las secciones individuales. También es importante tener en cuenta, agregué una propiedad flex wrap con valor wrap. Por defecto, flexbox querría mantener todo en una fila, y hacer que esta página tenga una enorme barra de desplazamiento horizontal. Flex wrap apenas colina nuestro contenido que efectivamente quisimos envolver, y permanecer en la página. Después usé identificadores únicos en cada sección para darle un color de fondo, y un valor de orden. Cualquier elemento anidado dentro de un flexbox, como estas secciones en el cuerpo de flexbox se puede reorganizar utilizando este valor de orden. Como puedes ver, he mezclado y emparejado el contenido en un nuevo orden enteramente a través de CSS. Animo mucho a buscar más en flexbox antes de comenzar su propio trabajo personalizado. Si de verdad quieres hacer un chapoteo, la tarea de crédito extra es echar un vistazo a algo llamado grilla CSS. Ignora cualquier artículo que discuta sobre flex versus grid. Flex maneja el contenido que va en una fila. A pesar de que esa fila puede envolver como lo estamos haciendo aquí. Grid abre la puerta a diseños complejos con múltiples filas, y posiciones pero suele ser exagerado para contenido simple como lo estamos haciendo. No te dejes chupar en la trampa de pensar que es tampoco o. Al entender cómo usar cada uno en conjunto es la mejor ruta hacia adelante. El CSS grid class by Rachel Andrews aquí en skill share es un gran lugar para empezar. 15. Tu turación y conclusión: Hay mucho más que aprender sobre todas las herramientas que CSS tiene para ofrecer, pero ahora estás equipado con una comprensión fundamental de las reglas. Es hora de mirar a través de los materiales del curso, para obtener guías de referencia, ideas de diseño y más, para ayudar a empoderar sus propios diseños creativos. Si realmente te gustó trabajar en CSS y te interesa sumergirte en aplicaciones e ideas más reales, hay muchos lugares para empezar. Dos fundamentales importantes que puedo sugerir investigar, son la accesibilidad y el diseño responsive. La accesibilidad se trata de asegurarte de que ninguno de tus diseños divertidos y atrayentes dificulte accidentalmente que los usuarios disfruten realmente de tu contenido, mientras que el diseño sensible o el diseño responsivo móvil, es cómo planificar y implementar diseños para lucir bien en todas partes, desde un teléfono hasta a través de un monitor gigante o TV. Recuerda, si tu proyecto alguna vez se queda tan atado en nudos que parece irrecuperable, siempre puedes volver a los enlaces proporcionados e iniciar una copia fresca del proyecto. Hay enlaces para ambos como un primer lugar de partida sin CSS, así como la versión que todos escribimos juntos. No tengas miedo de sumergirte en lo profundo y aprender rompiendo cosas. Poder ver tu código en acción y compartir el proyecto, significa que puedes pedirte ayuda a mí o a cualquiera de los demás alumnos. Una vez que estés contento con el aspecto de tu proyecto, asegúrate de mostrarlo. Tengo muchas ganas de ver qué pueden hacer todos y cada uno de ustedes con las lecciones que cubrimos hoy.