Hola a todos, bienvenidos de nuevo. Una de las cosas que realmente quiero enfatizar en este curso de Introducción a CSS es que existe esta necesidad de detenerse y practicar y revisar lo que hemos aprendido hasta ahora. Así que voy a asegurarme de incluir pequeñas cosas que voy a llamar Código Juntos. Por lo tanto, si estás viendo esto ahora mismo, y no tienes tu portátil a tu lado o lo que sea que estés usando para codificar, realmente espero que te detengas, vayas a buscar eso y codificar junto a mí porque solo escuchar conmigo no te da la verdadera experiencia que necesitas para escribirlo y cometer errores a medida que avanzamos juntos. Bien, entonces vamos a empezar. Lo que voy a hacer en este video es que voy a volver a un viejo pero una golosina que hicimos en HTML cinco. Y quiero que vayamos juntos a darle estilo. Muy bien, empecemos haciendo nuestro archivo CSS. Voy a seguir adelante y crear uno nuevo ahora, ir aquí a archivo, nuevo archivo, o puede hacer el comando N. Y lo primero que quiere hacer es guardar esto como un archivo.CSS, así que de esa manera su editor sabe colorear las cosas de la manera que desea que se coloreen. Ahora, cada vez que estoy diseñando páginas, guardo todos mis archivos HTML en una carpeta y mis archivos CSS en otra carpeta. Y realmente te animo a hacer lo mismo. Entonces, voy a seguir adelante y entrar en mi carpeta CSS. Y voy a llamar a esto, vamos a llamarlo together-1.css. Es muy importante que recuerde poner esa extensión de archivo, o las cosas no van a funcionar. Muy bien, así que aquí está mi vieja y aburrida página. Lo que suele hacer la gente es que hace estilo desde la parte superior de la página y trabaja su camino hacia abajo. Por lo tanto, quiero que elijas tus propios valores, pero vamos a seguir adelante y darle estilo a mi encabezado. Vaya, cosa equivocada aquí. Y podemos darle un fondo. Voy a probar B3B3B3. Podemos darle una fuente más grande si lo desea. Voy a decir tamaño de fuente. Hagámoslo 150%. Sólo un poco diferente. Voy a guardar esto, y siempre realmente animo a los estudiantes a hacer pequeños cambios en su código y luego verificar y ver qué pasó. Así que vamos a ver si hemos cambiado algo por aquí. Y ahora voy a recargarlo y ver qué pasó, y si te das cuenta, no pasó nada. Bueno, el problema es que no vinculé la hoja de estilo correctamente al archivo HTML. ¿ Recuerdas cómo te dije que siempre pienso poner las cosas en una carpeta llamada CSS? Necesito incluir eso. Muy bien, regresa. Recargar. ¡ Oh, hola! Tengo un poco de algo pasando ahí. ¿ Todo bien? Entonces, ahora sigamos adelante y simplemente agreguemos algunas cosas más. Sé que no se parece exactamente a mi ejemplo. Pero una de las cosas que quiero hacer a continuación es, quiero seguir adelante y estilo, vamos a ver, mi cabecera. Vamos a darle a todo el encabezado un color de fondo. Muy bien. Puedes elegir lo que quieras. Y voy a elegir el fondo: creo que tengo 66666, de acuerdo. Y vamos a seguir adelante y realmente quiero alinear ese texto. Así que voy a llamarlo text-align: center. Guardar, actualizar. ¡ Oh, vamos a llegar! La página está empezando a verse ligeramente diferente todo el tiempo. Ahora lo único que me confunde es que no parece gustarle mis antecedentes. Así que si vuelvo, me voy a dar cuenta, oh, olvidé ese signo de # justo delante. Y hacer uno, dos, tres, cuatro, cinco, seis. Guárdalo aquí. Actualizar. Ahí vamos. Ahora estos colores son muy feos y muy difíciles de ver. Y me doy cuenta de eso. Así que vamos a seguir adelante y jugar con las cosas para que esto sea un poco más fácil de ver. Vamos a seguir adelante y ponerlo. Cambiemos el h1 para que sea un color diferente y sigamos adelante y cambiemos la navegación. Para que tengamos, voy a cambiar la fuente, vamos a probar la variante de la fuente. Me gusta la variante de la fuente. Te permite poner las cosas en mayúsculas, minúsculas, diferentes cosas como esas. También tenemos tamaño de fuente. Todavía no estoy contento con el tamaño, así que voy a hacerlo 150%, y el último que voy a hacer es la familia tipográfica. Ahora, si recuerdas, con font-family es muy habitual darle más de un valor porque no todos los navegadores admiten todas las familias de fuentes. Así que en mi caso, voy a seguir adelante e intentar poner en Arial, Times New Roman. Si tienes una fuente que está compuesta de varias palabras, debes ponerlas dentro de las comillas. Y luego, finalmente, sólo Serif. Ahora así es como codifico. Codigo cometiendo errores. Codigo con errores tipográficos. Para ser honesto, rara vez codifico en una camisa con botones que parece tan incómoda. La forma de codificar es cómodamente con una coca y una barra Hershey para que cuando termines tengas estos pequeños bocados de chocolate de celebración. Pero por ahora, voy a hacer lo mejor que pueda para guiarte. Cambié muchas cosas. Veamos qué pasó. Puedes ver que voy a hacer un poco más grande, estamos empezando a llegar allí. Tenemos los colores de fondo, tenemos cosas así. Así que vamos a seguir adelante y simplemente diseñar algunas cosas más juntos, y luego vamos a seguir y aprender un poco más. Me gustaría verte elegir tus propias cosas para H2. Así que h2 voy a elegir un color diferente, vamos a probar el mismo color 666666 y un fondo diferente. Voy a usar 00B7EA. Entonces, ¿importa? ¿ Importa si lo escribo como EA en mayúsculas o minúsculas? No importa en absoluto. Lo importante es que por lo general seas consistente para que no te arruines mientras vas de ida y vuelta. ¿ Todo bien? Volveremos a refrescarnos. Muy bien. Está empezando a verse muy diferente. Esto no es mucho estilo. Es sólo uno, dos, tres, cuatro, cinco. Cinco reglas y ya tenemos un aspecto muy diferente. Voy a seguir adelante y hacer la pantalla más pequeña porque cuando pongo ese tamaño de fuente 150%, hace una gran diferencia. Muy bien. Una clase de última cosa genial que me gustaría que trataras de hacer es seguir adelante y tratar de diseñar el resumen en los detalles. Porque si quiero hacer sólo el, crecí en Ashtabula Ohio parte, ¿cómo puedes hacer que cursiva pero no el resto? Muy bien, así que si recuerdas cómo se ve el código HTML, déjame mostrarte un ejemplo rápido, es que aquí abajo tengo mi etiqueta de detalles y si no lo has visto antes, puse la palabra abierta en lo que significa por defecto mostrar que está abierto, así que nadie tiene que hacer clic en él. Tengo mis datos. Tengo mi resumen donde surgió la parte Mi infancia, y luego tengo toda esta parte. Así que si quieres hacer esa cursiva, y sólo eso, ¿cómo lo haces? Muy bien. Con lo que vamos a empezar, es que vamos a diseñar la etiqueta de detalles. Y voy a desplazarme hasta aquí un poco para que puedan ver un poco mejor, con suerte. Y lo que voy a decir es que quiero poner todo en cursiva, y la forma en que lo haces es ir y poner en estilo de fuente: cursiva. ¿ Lo tienes? Esto no va a ser exactamente lo que queríamos porque lo que he hecho es que lo he curtido todo. Así que ahora quieres volver y decir, ¿pero sabes qué? No quiero el resumen. No quiero que el resumen esté en cursiva. Ups, regresa aquí. Resumen y puedo decir fuente. Vaya, estilo de fuente. Bueno, cómo lo haces para que no sea cursiva, por defecto la mayoría de las cosas no lo son, en realidad puedes poner la palabra normal. Muy bien. Así que eso es todo. Ahora tenemos esta parte en cursiva y esta parte en negrita. En su mayor parte hemos terminado, pero voy a añadir una pequeña cosa, porque es muy común que la gente diseñe su encabezado y su pie de página de una manera muy similar. Así que vamos a añadir estilo a mi pie de página. Y lo que quiero hacer es darle el mismo color de fondo que tenía mi encabezado. Así que fondo, uno, dos, tres, cuatro, cinco, seis, boom. Y ahí lo tienes. Así que lo que hemos hecho ahora es que hemos pasado de un archivo HTML muy simple y básico y hemos empezado a agregar un poco de color, un poco de tamaño de fuente, cosas un poco diferentes como esas. Permítanme mostrarles cómo era el archivo original de nuevo y los veremos uno al lado del otro. Voy a comentar mi hoja de estilo. Lo abriré y verás que son dos páginas de aspecto muy diferente. Pero son exactamente el mismo HTML. Muy bien, estas son las cosas que vas a necesitar hacer para la tarea en esta sección. Así que practica aquí, vuelve y mírame, si te ayuda a superar un poco las jorobas. Pero lo importante es, código, código, código, buena suerte.