introducción a CSS: agregar estilos básicos a un portafolio web

1. Avance: Las hojas de estilo en cascada nos permiten agregar presentación a nuestra página solo HTML de otro tipo bland. En esta clase, vamos a tomar nuestro sitio de portafolio solo HTML de cuatro páginas y vincularlo a un nuevo documento CSS. Aplicaremos estilos básicos a nuestros elementos y veremos cómo esos surten efecto en nuestro documento HTML. Empezaremos desde el principio mismo de CSS, y cubriremos todos los fundamentos necesarios para conseguir la capa de presentación en nuestros proyectos. Si nunca has oído hablar de hojas de estilo en cascada antes o buscar un refresco en CSS, esta clase es para ti. Cubriremos los conceptos básicos de cómo escribir CSS conectado a nuestras páginas y también hablaremos de solución de problemas. Debes conocer los conceptos básicos del HTML antes de tomar mi clase. Si tomaste mi intro a la clase HTML, este es el seguimiento perfecto. Estaré brindando el HTML con el que estaré trabajando para que descargues y sigas junto con. Nuestros estilos CSS se pueden aplicar a cualquier HTML que queramos aunque sea un sitio sobre perros porque también son lindos. 2. ¡Hola!: Ah. Hola, nuevos amigos. Genial tenerte aquí. Yo soy Jenn, y hoy, vamos a estar hablando de CSS, también conocido como Cascading Style Sheets. CSS es el gran seguimiento para si ya has tomado mi clase HTML u otra clase HTML en algún lugar, o si necesitas un refresco sobre CSS, cómo funciona, y qué puede hacer. CSS es tan impresionante como proporciona estilos a todas nuestras páginas web. Entonces, las cosas se ven un poco más bonitas, y oye, a todos nos gusta eso. Antes de empezar, pensé que te contaría un poco sobre mí, y pensé que lo haría jugando dos verdades y una mentira. Entonces te diré tres cosas. Una cosa será una mentira. Número uno, el primer sitio web que hice fue en 1999. Número dos, vi dos veces a Bon Jovi en concierto. Número tres, una vez fui en Price is Right y gané 700 dólares jugando a Plinko. Está bien. Entonces, no gané 700 dólares jugando a Plinko. Todavía no de todos modos. Digrego. Bajemos con el CSS. Oye, esa es la única vez que voy a rimarme toda esta clase. Yo en especie de promesa. CSS significa Cascading Style Sheets, y en esta clase, vamos a estar construyendo un proyecto basado en una base HTML para nuestro portafolio. Tenemos un sitio web de portafolio de cuatro páginas, con el que estaremos trabajando, y encima de ese HTML simple, estaremos agregando CSS para agregar textiles, colores, y nos hace las cosas un poco más agradables a la vista. Entonces, tomaremos aquí el HTML para el portafolio de Jon Arbuckle, que con HTML solo se ve un poco así, y tomaremos eso, y agregaremos estilos usando CSS. Entonces, llevaremos nuestro HTML de esto a esto emparejado con CSS. Aprenderemos un poco sobre cómo los colores del texto, los colores de fondo, las familias de fuentes y los tamaños de fuentes, así como la decoración del texto, pueden ajustar nuestras páginas en consecuencia para agregar más interés visual a nuestro HTML plano. Entonces, una vez que estés listo para empezar, vuelve a la siguiente lección, y hablaremos de qué herramientas necesitamos para comenzar a construir nuestro sitio web con CSS. 3. Estas son nuestras herramientas: Vamos a empezar descargando algunas herramientas que necesitaremos para escribir nuestro CSS. Al igual que un HTML, podemos usar cualquier editor de texto con el fin de escribir CSS. El beneficio de usar un editor de texto para código es cosas como el resaltado de sintaxis, los atajos de teclado y la ayuda de formato, para ayudarnos a escribir código más eficiente. Si tomaste la clase de Introducción a HTML conmigo, entonces estarás familiarizado con Sublime Text 2. Vamos a estar usando Sublime Text 2 para otra vez. El que es genial de Sublime Text 2, es que puedes usarlo para Windows y Mac, y también tienen prueba gratuita ilimitada, lo que te llevará a comprar el software que, si lo disfrutas, deberías, pero mientras lo estás probando puedes usarlo de forma gratuita. Esto lo vas a encontrar en sublimetext.com/2 y a partir de ahí podrás descargar la última versión en función del sistema operativo en el que estés. Entonces, ¿por qué no vas adelante y descargas eso si aún no lo has hecho, luego instalarlo y volver. Después de haber instalado Sublime Text, lo siguiente que vamos a necesitar es un navegador moderno. Voy a estar usando la última versión de Chrome para esto. Puedes usar cualquier navegador que desees, te recomendaría usar lo último ya que suele ser el más fácil de trabajar y tienen muchas más herramientas para desarrolladores en versiones posteriores. Voy a estar usando Chrome específicamente porque me encanta el Inspector Web de Chrome. El Chrome Web Inspector, lo veremos un poco más tarde, pero esencialmente nos permite inspeccionar cualquier elemento de la página y poder ver el HTML y CSS para ellos. Entonces, es realmente aseado. Muy recomendable usar Chrome para esto. Si estás usando Firefox, Firefox tiene algo similar en que puedes inspeccionar elementos de la página. Eso estará muy cerca de lo que estamos haciendo en Chrome. Internet Explorer también cuenta con herramientas para desarrolladores al igual que Safari. Entonces, de nuevo, tienes algunas otras opciones, pero voy a estar usando Chrome para esta clase. Si quieres seguir con eso, eso estará aquí. Lo último que vamos a necesitar es HTML para esta clase, que podrás encontrar a partir de los pasos del proyecto y descargar este archivo jon-arbuckle-site.zip. Aquí vas a descomprimir tu archivo y luego guardarlo algún lugar donde puedas encontrarlo fácilmente. A veces eso está en tu escritorio, a veces carpeta de documentos, a veces una carpeta de sitios, lo que sea que funcione para ti, donde no te olvidarás de ello y puedes encontrarlo fácilmente por ahora. Entonces, consigue toda esa configuración y luego sigamos adelante y empecemos a ver la visión general de los archivos con los que estaremos trabajando. 4. Vista general de nuestros archivos HTML para la clase: En la intro a la clase HTML, creamos un sitio para el portafolio de Jon Arbuckle, nuestro cliente ficticio. Vamos a estar usando el HTML para esa clase como base para aprender CSS. Si has hecho tu propio portafolio ya sea desde esa clase, o hay algún otro HTML con el que quieres trabajar, eso está totalmente bien. Si quieres seguir exactamente lo que estoy haciendo aquí, entonces adelante y agarra este archivo y vamos a trabajar con eso. Entonces, después de descomprimir el archivo y sabes dónde está tu carpeta sigamos adelante y abrimos Sublime Text. Cuando abres por primera vez Sublime Text, no vas a ver mucho. Sublime text no abrirá ningún archivo en el que estuviste trabajando por última vez, así que vas a tener que decirle a Sublime Text que te gustaría que abriera la carpeta o archivo en el que nos gustaría trabajar. Otra cosa que vamos a querer hacer es personalizarla un poco a nuestras preferencias. Entonces, lo primero es que voy a dar clic, Ver, Barra lateral, Mostrar barra lateral, y la sección Barra lateral se abrirá de nuevo. De nuevo, eso es Ver, Barra lateral, Mostrar barra lateral. Ahora, podremos ver los archivos con los que estamos trabajando. A partir de ahí, voy a ir a abrir archivo y navegar a la carpeta en este caso, la carpeta Jon Arbuckle con la que me gustaría trabajar. Entonces, Archivo, Abrir o Control o Comando O, si quieres usar el atajo de teclado. Después veré la carpeta del sitio Jon Arbuckle. Ahora, sólo podría abrir uno de los archivos, pero me gustaría ver todo con lo que estamos trabajando. Entonces, voy a mantenerlo resaltado en el sitio de Jon Arbuckle y luego voy a dar clic en Abrir. Una vez que haga eso, verá sitio de Jon Arbuckle con todos los Archivos y carpetas que tengo dentro de esa carpeta. Otra cosa que notarás, es un poco indeciso sobre Sublime Text es, esto en realidad se abre frente a esa ventana en escamas que acabamos de ver. Siempre que acabas de File Open, abre una ventana o navegador completamente nuevo Chrome, lo que solo puedes seguir adelante y cerrar uno viejo porque ya no lo necesitamos. Entonces, una vez más para pasearte, Abro Sublime Text, voy a Archivo, Abrir y luego navego a la carpeta que quiero Abrir y Click Abrir. Otra opción que tienes para ver los archivos, es si tienes tu carpeta por aquí en la barra lateral por aquí, solo tienes que seguir adelante y arrastrar eso y los Archivos se Abrirán ahí mismo sin abrir otra ventana. Entonces, ahora que tenemos eso abierto, echemos un vistazo a algunos de los Archivos con los que tenemos que trabajar para el portafolio de Jon Arbuckle. Voy a Abrir esto en el navegador para ver visualmente lo que tenemos. Entonces, voy a Abrir esta carpeta, y voy a Click en el índice HTML, que recuerdan es nuestra página de inicio. Ver aquí puedes ver es la página principal del portafolio de Jon Arbuckle. Tenemos un logotipo, que enlaza de nuevo a la página de inicio o a la página de índice del sitio. Contamos con navegación principal que enlaza a tres subpáginas que trabajan el sobre y el contacto. Tenemos nuestro rumbo sobre Jon Arbuckle, freelance Ilustrador y autor. Tenemos nuestra imagen de héroe la cual será reemplazada más adelante una vez sepamos cuál será esa imagen. Tenemos algunos encabezamientos, basados en las cosas que Jon hace por su vida y tiempo libre como sus cómics web, junto con la descripción y un enlace para ver más. Su música encabezando junto con una imagen, para su cd Polkaholic y voy a enlazar para comprarlo. Tenemos otro rubro sobre Jon en Twitter con un párrafo, lo que podemos leer sobre Jon en Twitter siguiendo su cuenta de Twitter, que el enlace está aquí. Tenemos un elemento blockquote. Este elemento blockquote es un testimonio de un cliente de Jon's. Entonces, tenemos otro párrafo con un llamado a la acción para ponernos en contacto el cual va a la página de contacto. Entonces, tenemos nuestra foto la cual aparecerá en cada página con los derechos de autor, junto con nuestra entidad HTML copyright. Nos metemos en algunas de estas sub páginas, podemos ver la página de trabajo tiene el ejemplo de Jon Web Comics como las CRONICLAS DE LASAGNA y CAT TOWN. Además, podemos ver que estos son los retratos que Jon se ha ofrecido hacer. Nuevamente, su música, a Jon le gusta mucho promocionar su música. A continuación, tenemos el About Page. En la página Acerca de. Podemos aprender un poco más sobre el de Jon también. Entonces, agregamos una imagen de Jon, un encabezamiento y luego tenemos dos párrafos para describir a Jon. También tenemos otro rubro para describir la lista de servicios profesionales que ofrece junto con lista desordenada que describe las cosas que hace Jon. De nuevo, verás nuestro contenido de filtro debajo de esto. Por último, tenemos nuestra página de contacto la cual acaba de explicar que puedes Contactar a Jon a través de su correo electrónico con un correo para enlazar, y luego también un enlace a su presencia social en Twitter, Facebook o Pinterest bajo el rubro En otra parte de la Interwebs. Entonces, veamos este sitio en el navegador. Recuerda si quieres abrir alguno de tus archivos solo puedes hacer doble clic para Abrirlos siempre y cuando tengan that.html al final de ellos, y se Abrirán en tu navegador preferido. Volvamos a Sublime Text y echemos un vistazo al HTML. Entonces, para abrir una carpeta, recuerda que si solo haces clic una vez, realidad no se abrirá, pero si haces doble clic, verás que aparece la pestaña, que dice que es Abrir. Se puede ver el pequeño icono de x aquí que significa que no hay cambios que guardar en este momento. También verás que mi fuente es bastante pequeña. Entonces, voy a reventar eso un poco. Yo puedo hacer eso con el comando o control plus. Hay atajo para eso. También puedes ver que tengo este minimapa aquí, y lo que hace esto, simplemente nos muestra un pequeño mapa de todo nuestro código. Encuentro que ese tipo de se interpone en mi camino. Entonces, voy a hacer ver, ocultar minimapa, para deshacerme de eso, otra vez ver ocultar minimapa y verás que desaparece lo cual soy fan de hacer desaparecer eso. Entonces, echando un vistazo a nuestra página de inicio, nuevamente tenemos nuestra etiqueta doctype o HTML. Dentro de nuestra cabeza, establecemos el atributo meta y charset, tenemos el título de nuestra página que es el portafolio de Jon Arbuckle, y luego nos dirigimos al cuerpo, donde tenemos nuestra información de cabecera. Marcamos que apagado con los comentarios HTML, nuestro enlace de anclaje de nuevo a la página de inicio porque queremos que esa imagen sea capaz de enlazar de regreso a casa. Las listas desordenadas para nuestra navegación, y luego tenemos el contenido de nuestra página. En el contenido de nuestra página, nuevo se puede ver eso marcado por el comentario solo para mantener nuestro código agradable y organizado. Tenemos nuestro nivel de encabezado uno que explica de qué se trata el sitio, la imagen del héroe, el encabezado web Comics, eso es un h dos debajo de la h uno. Nuestro párrafo vincula, de nuevo siguiendo la misma fórmula, otro encabezamiento, otra imagen. A rumbo nivel tres porque anida bajo el rubro nivel dos de la música. Vimos al Jon en Twitter. Cuando lo miramos en el navegador, podemos verlo aquí también. Tenemos nuestra sección blockquote, y dentro de nuestra blockquote, tenemos nuestras etiquetas de párrafo nuevamente con nuestras entidades para asegurarnos de que obtenemos las cotizaciones rizadas para las cotizaciones correctas en una entidad dash para conseguir eso. Entonces, tenemos nuestro párrafo con un enlace a la página de contacto y a nuestro pie de página. Esa es nuestra página de inicio. Echando un vistazo a la página Acerca. Nuevamente, el encabezado debería ser el mismo porque lo copiamos de página a página, y solo el contenido de la página será un poco diferente con una imagen h1. Par de párrafos en la lista desordenada aquí. A continuación echemos un vistazo rápido a la página de contacto. Las páginas de Contacto son página bastante corta. Nuevamente, lo único diferente en todas nuestras páginas es la sección de contenidos de la página, y que uno tiene de nuevo un h1, que deberíamos tener en cada página y es el rubro más importante. Nuestro párrafo, y luego nuestro en otros lugares de la web junto con nuestra lista desordenada. Última es la página de trabajo. El trabajo página otra vez, los contenidos de la página diferentes. Tenemos nuestros encabezamientos, tenemos subtítulos para web Comics, los encabezados dentro de eso para los diferentes tipos de cómics. Debajo del Comics está el enlace de imagen, y debajo de la música es el mismo tipo de material aquí. Entonces, solo echa un vistazo a través de eso. Si no hiciste este portafolio de Jon Arbuckle en el otro sitio, no hay problema. Tan solo tómate unos minutos para familiarizarte con el código si quieres usar esto. De lo contrario, siéntase libre de utilizar cualquier base HTML que le gustaría utilizar para el sitio. Vamos a estar hablando de CSS y eso se puede aplicar a cualquier HTML. Entonces, no te preocupe en absoluto si no te gustaría ayudar a Jon Arbuckle. Seguro que no lo sostendrá en tu contra y empecemos en la siguiente sección mirando exactamente qué es CSS, y cómo se aplicará a nuestro HTML. 5. ¿Qué es CSS?: Entonces, ¿qué es CSS? Bueno, CSS es sinónimo de Hojas de estilo en cascada y Hojas de estilo en cascada son lo que usamos para agregar estilos a nuestros elementos HTML. Entonces, cosas como diseños, colores, fuentes, todo eso se controla usando CSS o Hojas de estilo en cascada. Eso es bocado y difícil de decir cinco veces rápido así que vamos a ir por CSS de aquí en adelante. CSS es lo que se conoce como la capa de presentación. Cuando se trata del front-end de un sitio web que es lo que llamamos básicamente cómo cambias un diseño en código antes de golpear la tecnología backend, por lo que cosas como bases de datos, el front-end maneja HTML, CSS, y JavaScript también conocido como las capas de contenido, presentación y comportamiento. Por lo que CSS es la capa de presentación ya que maneja toda la presentación. CSS fue creado para que pudiéramos separar el contenido del formato, así que si alguno de ustedes hizo un montón de diseño Web en los años 90 o principios de 2000 podría recordar cosas como etiquetas de fuentes e hicimos muchas cosas dentro de HTML para hacer el estilo para ello. Cosas como audaz, usar etiquetas negritas solo para obtener un look audaz pero queremos hacerlo con CSS ahora porque usar CSS para manejar el estilo significa que nuestro HTML es más portátil. Significa que podemos reutilizarlo para cosas diferentes. Ayuda con la accesibilidad y podemos formatear más de un documento súper fácilmente y poder actualizar los estilos realmente fácilmente cuando mantenemos las cosas separadas. El sitio csszengarden.com es un gran ejemplo de todo lo que CSS puede hacer. La idea detrás del sitio cuando fue lanzado es tomar el mismo HTML y ver cómo aplicando una hoja de estilo diferente podemos obtener diseños muy diferentes y mira la estética al mismo código. Entonces echemos un vistazo a algunos de los diseños que tienen aquí y veamos cómo a pesar de que todos usan el mismo HTML se ven bastante diferentes. Si miramos el archivo HTML viendo fuente de la página podemos ver que este mismo HTML se utiliza para crear esta página principal y es lo mismo crear esta página, mismo HTML pero CSS diferente, para crear esto o esto y esto. Se puede ver que a pesar de que el HTML es el mismo, se ve completamente diferente. Podemos hacer que nuestros sitios web luzcan sin embargo queremos que se vean solo cambiando el CSS y los estilos que estamos aplicando a la página. Entonces no te preocupes de nuevo si no quieres usar el mismo marcado, cualquier marcado lo hará, podemos usar el CSS encima de eso pero estaremos viendo cómo aplicar estilos tendrás todo el control sobre cómo se ve tu página. Lo que está realmente aseado es que si usamos nuestras DevTools de Chrome, de nuevo podemos ver algo que está pasando aquí. Entonces si inspecciono elemento haciendo clic derecho o control-click, tal vez recuerdes en la clase HTML lo usamos para mirar nuestros elementos HTML pero también en el lado derecho verás aquí está el CSS que se utiliza en para crear los estilos para el sitio. Entonces, si vuelvo a la cima y le echo un vistazo a este encabezado CSS ZEN GARNS, puedo ver que es un H1 y luego por aquí verás que estos son todos los estilos CSS que se están aplicando para que esto suceda. No te preocupes si algo de esto no tiene sentido ahora mismo lo hará para cuando terminemos. Pero así es como usas a tu inspector y va a hacer esto, así que verás aquí por ejemplo color, y es de color azul. Pero si echamos un vistazo a uno de los otros diseños e inspeccionamos su H1, veremos que el H1 sigue siendo el mismo que CSS Zen Garden. Vamos a tirar esto hacia arriba para que puedas ver eso un poco mejor. Se puede ver que los estilos por aquí se ven bastante diferentes a lo que vimos por allá incluyendo el color que es una especie de este color negro más oscuro. Entonces, eso empieza a darte una idea de cómo solo retocar estilos CSS podremos conseguir looks diferentes. Entonces, vamos a entrar en cómo escribimos CSS y la sintaxis y terminología en el siguiente video. 6. Sintaxis y terminología de CSS: CSS está conformado por dos partes, el selector, y la declaración. El selector nos va a decir el objetivo del que estamos peinando. Entonces, algo así como un párrafo o un encabezamiento. Cualquiera que sea el elemento u objeto, queremos darle estilo. A eso nos referimos como el selector. En la declaración se va a especificar el inmueble en valor. Entonces, lo que realmente vamos a cambiar sobre ese objeto. Entonces, si queremos cambiar el color, o si queremos cambiar el tamaño de algo, hay algo que habíamos especificado dentro de nuestra declaración. Entonces, ¿qué significa eso exactamente? Bueno, digamos que queríamos todas las etiquetas de párrafo en nuestra página. Entonces, todos nuestros párrafos los cuales están marcados con una etiqueta p en HTML, ¿y si queremos que todos sean azules? Bueno, esencialmente los párrafos se convierten entonces en nuestro selector, y el valor del azul se agrega dentro de nuestra declaración. También tenemos que precisar la propiedad a la que se está aplicando el azul. En este caso, estamos diciendo el color. Entonces, en inglés llano, queremos cambiar la propiedad de color para que sea azul de todos nuestros párrafos. Bueno, ¿cómo escribimos eso? Quiero decir ciertamente podemos gritar a la computadora, pero probablemente no nos escuche. Entonces, en cambio, lo vamos a escribir con CSS. Entonces, lo que vamos a necesitar hacer es decirle a nuestro CSS, cuál es nuestro selector, y luego le vamos a decir la propiedad que estamos cambiando, y el valor al que la estamos cambiando. Se ve exactamente así con selector, y luego dentro de la declaración está contenida dentro de las llaves. Escribimos la propiedad, y luego un colon, luego el valor, y un punto y coma. Todo el formato CSS se ve así. Entonces, para sub-en un ejemplo del mundo real como de lo que solo estábamos hablando para el selector de párrafos. Decimos p porque ese es el equivalente HTML a una etiqueta p. El inmueble se convierte en color porque esa es la propiedad CSS que estábamos cambiando. El valor se vuelve azul porque ese es el valor que queremos asignar a la propiedad. Entonces, esencialmente, siempre estás deseando sub en esta fórmula con para lo que estás tratando de cambiar en tu HTML con CSS. Entonces, cualquier selector puede entrar aquí tus párrafos, tus cada uno un código de bloque. Cualquier cosa puede saltar aquí, y lo veremos un poco más adelante. También es importante tener en cuenta que nuestras declaraciones pueden tener más de un par de valor de propiedad. No queremos limitarnos a decir texto que puede ser azul. Entonces, digamos también si queríamos que el color de todos nuestros párrafos fuera azul y todo el tamaño de la fuente fuera de 14 píxeles, podemos hacerlo. Todo lo que necesitas hacer de nuevo es escribir tamaño de fuente: 14 píxeles; Así que de nuevo, property: value; El punto y coma básicamente le dice a tu CSS, que estás a punto de empezar a decir una nueva propiedad, o es el final de la propiedad. No tiene que ir en una nueva línea al igual que el espacio en blanco HTML no importa. No obstante, me resulta más fácil leer sobre todo al empezar. Cuando mantienes todas tus diferentes propiedades en una nueva línea. Pero ahora que sabemos escribir CSS. ¿ Cómo conseguimos que esto se aplique realmente a nuestro HTML? En el siguiente video, hablaremos de vincular cosas como nuestros párrafos azules a nuestro HTML real para que eso funcione. 7. Cómo agregar CSS a nuestras páginas: Entonces, agreguemos el CSS a nuestras páginas que ya hemos creado con nuestros proyectos HTML. Si estás usando tu propio proyecto, adelante y abre eso en Sublime Text, si estás usando jon-arbuckle porfolio, vamos a querer abrir eso también. Entonces, abre Sublime Text si aún no lo has hecho, y abre archivo, y navega a esa carpeta, en este caso, jon-arbuckle-site, y haz clic en “Abrir”. Si tienes tu barra lateral puesta, verás todas tus carpetas y archivos en ese lado izquierdo, igual que nos gusta. Tenemos tres opciones a la hora de agregar CSS a nuestras páginas y eso es a través de estilos en línea, en hoja de estilo interna y en hoja de estilo externa. Alerta de alerón, vamos a querer usar el último. No obstante, quiero guiarte a través de cada uno para explicar los pros y los contras de ellos y por qué son diferentes, y por qué tal vez quieras usar algunos de ellos y qué hacer si los ves. Entonces, el primero con el que voy a empezar es estilos en línea. Voy a abrir cualquiera de nuestras páginas. En este caso, sólo voy a empezar con la página sobre. Abre la página sobre en texto Sublime haciendo doble clic. Sólo un recordatorio, así es como se ve nuestra página sobre actualmente. Entonces, todo está peinado básicamente con lo que se llama los valores predeterminados del navegador. Los valores predeterminados del navegador son cómo se ve nuestra página sin ningún CSS. Entonces en este caso, dice que debido a que se trata de un H1 el navegador dice: “Bueno, haz esto más grande y más audaz que otras fuentes de la página”. Nuestro párrafo es que un texto que es bastante legible en una fuente Serif. Nuestro H2 vuelve a ser más audaz porque es un rumbo, pero un poco menos grande que nuestro H1 porque no es tan importante. Nuestra lista ya tiene balas como marcador para ello. Estos son los que se llaman los estilos predeterminados del navegador. Entonces, siempre que no agreguemos un estilo cualquier texto o HTML que pongamos en nuestra página recibirá los valores predeterminados del navegador. Vamos a anular eso con nuestro CSS para decir específicamente cómo queremos que se vea nuestra página. Entonces, la primera forma que haremos eso con esos estilos en línea. Voy a desplazarme hacia abajo hasta mi texto de párrafo, y dentro de mi etiqueta de párrafo voy a agregar algo, y lo que voy a agregar es un atributo. Recuerda de nuestra lección HTML que los atributos proporcionan más información a la etiqueta. Entonces por ejemplo, en nuestras etiquetas vinculadas nuestro H ref no era atributo, o aquí arriba en nuestra imagen se puede ver la fuente es lo que se llama un atributo, y el texto alt es un atributo. Entonces el valor siempre va dentro de las comillas después del signo igual. Entonces, nuestros estilos en línea esencialmente van a ser otro atributo y ese atributo es el atributo de estilo. Al igual que cualquier otro atributo, comenzaremos diciendo lo que es en este caso, estilo, luego iguala cita. Dentro del valor de atributo vamos a decir cuál es el estilo que queremos que sea. Entonces en nuestro último video echamos un vistazo a las declaraciones que están emparejadas con selectores, y en ese caso, nuestra declaración tenía una propiedad y un valor. Vamos a escribir la propiedad y el valor dentro de nuestro atributo de estilo. Entonces, en este caso, color, y al igual que hicimos en el ejemplo de sintaxis CSS, colon, azul, semi colon, entonces voy a guardar el archivo. Recuerda siempre es importante guardar, puedo decir que mis archivos no guardados porque tiene el círculo ahí. Entonces archiva, guarda, o controla S, o comando S. Voy a dejar que eso abra eso sobre la página en un navegador entre, si no lo tienes abierto de nuevo recuerda solo navega hasta él. En tu buscador y tus documentos, dondequiera que lo tengas guardado. Abre esa carpeta, y luego haz doble clic para abrir. Entonces, aquí estamos en la renovada página abierta, y hey, ahí tienes. Mira que nuestro texto ahora es azul al igual que le dijimos que fuera con un estilo en línea. Si querías agregar algo más, si no recuerdas en nuestro ejemplo anterior, hablamos de tener múltiples propiedades y valores en nuestra declaración. Eso lo podemos hacer en estilo en línea también. Entonces, justo después de ese semi colon, que indica que el par de valor de propiedad está hecho podemos escribir otra propiedad. En este caso, vamos a cambiar el tamaño de la fuente. A la propiedad CSS para hacer eso se le llama tamaño FAAB. Entonces, escribimos font-size, dos puntos para decir que vamos a dar el valor para esta propiedad, y simplemente cambiaremos a algo así como 18 píxeles. Decir que ya terminamos de declarar nuestro valor, un punto y coma. De nuevo, vamos a querer guardar esto, volver a pop, refrescar la página, y ahora puedes ver que nuestro tamaño de fuente está cambiado. Este es el CSS que aplicamos para cambiar el color y el tamaño de la fuente, y eso lo hicimos con lo que se conoce como un estilo en línea. Entonces el estilo en línea está diciendo: “Usemos un atributo de estilo en una etiqueta para obtener el color, o tamaño, o cualquier otra propiedad CSS que queremos cambiar”. Entonces, ¿qué pasa si queremos que todos nuestros párrafos sean azules y tamaño de fuente 18? Bueno, tendríamos que ir a todos nuestros párrafos en una página y escribir en otros atributos de estilo. Por lo que el estilo es igual a color, colon, azul, semi colon font-size, colon, 18 pixels, semi colon. Puedo guardar esto, volver a Chrome, refrescar, y ahora ese párrafo es azul y 18 píxeles también. Eso es genial, quiero decir, es genial que tengamos tanto control, pero ¿puedes ver lo tedioso que se pondría esto si tienes más de dos párrafos en tu sitio, que probablemente lo harás? Si piensas en sitios grandes, imagina tener que pasar por y declarar todas las propiedades CSS que quieres que estén bien en la etiqueta? Eso realmente apestaría, y apuesto a que tienes mejores cosas que te gustaría hacer con tu tiempo. Entonces, eso se convierte en un problema con el estilo en línea. Otro problema con el estilo en línea es digamos que al final del camino decides que freakin odias el azul. El azul es solo un imbécil y ya no quieres que tus párrafos sean azules. Digamos, en cambio tus nuevos colores favoritos rojo. Para cambiarlo a rojo, puedes entrar aquí, borrar el azul, escribir rojo. Por supuesto, esto funcionará y si volvemos atrás y refrescamos puedes ver que es rojo, pero ahora tienes que encontrar cada lugar donde dijiste azul y cambiarlo a rojo. Eso sería un proceso muy tedioso, y muchos cambios y sería realmente fácil para ti perderte uno. Entonces, la buena noticia es que tenemos una mejor solución. Entonces echemos un vistazo a las hojas de estilo internas a continuación. Entonces, voy a seguir adelante deshacer estos estilos en línea porque no son la forma preferida que me gustaría escribir nuestro CSS. Entonces sólo voy a retroceder eso. Lo que voy a hacer es esencialmente, quiero decirle a nuestro CSS que se aplique a todo. Deseo brindar información sobre los estilos del documento. ¿ Eso suena un poco familiar? ¿ Recuerdas dónde definimos otra información para el documento general y qué significaba? ¿ Acaso nuestra metainformación? Eso lo guardamos en la cabeza, ¿verdad? Recuerda, el cabezal describe los meta datos para la página. Entonces, con en Nuestra cabeza en realidad es donde vamos a definir nuestro documento de estilo. Para crear una hoja de estilo en línea, vamos a necesitar una etiqueta de estilo. Voy a añadir el elemento de estilo dentro de nuestra cabeza. Sólo voy a hacer unos cuantos, mira, demasiados espacios. Apenas dos espacios abajo solo para que yo pueda ver esto un poco mejor, y cuándo empezar escribiendo y abriendo etiqueta de estilo. S, como se puede ver, en Sublime texto una de las cosas que hace porque es un editor de texto HTML es que empieza a sugerir autocompletado para lo que estamos tratando de escribir. Entonces, me ve tipo S, T, y asume que me gustaría escribir una etiqueta de estilo. Por supuesto, son correctos que pueden ser realmente buenos si golpeo enter, se autocompleta eso para mí. No obstante, voy a apagar eso por ahora. Eso se puede apagar en preferencias, y yo lo voy a hacer porque va a ser un poco más fácil para ti ver qué estoy haciendo si lo escribo todo, y porque a veces creo que es importante escribir las cosas cuando empiezas a aprender por primera vez. Entonces, para hacer eso, voy a ir a mis preferencias de Sublime Text y establecer mis preferencias de usuario. Ahora mismo, puede o no ver nada aquí, mi tamaño de fuente está ahí porque yo acerqué el tamaño de fuente antes y me guardó esa preferencia. Entonces, contex te permite agregar tantas preferencias como quieras. Puedes obtener más información sobre las preferencias de texto Sublime simplemente por Google. Entonces, digamos que quiero apagar la autocompletar y no estaba seguro de cómo. Podría hacer una rápida autocompletar Google for Sublime Text, y obtendrás los resultados para esto. Siéntete libre de hacer eso, y si no, solo podemos copiar lo que estoy haciendo aquí, que sería coma, porque estamos a punto de acercar una nueva propiedad, entonces solo voy a escribir, auto_complete, colon, false. Voy a guardar eso, y ahora cuando regrese y empiece a escribir, autocompletar estaría apagado. De nuevo, recuerda, si quería ver eso, o si olvidaba cómo escribir algo así, solo podía ir al Google y buscar Sublime Text para autocompletar. Ya verás aquí mismo, te darán esa información. En cuyo caso, podrías simplemente copiar y pegar eso fuera de ahí si lo deseabas, controlar C o comando C para copiar o editar copia, entonces podrías volver a tus preferencias y simplemente pegarlo allí en su lugar. Por supuesto, no necesitamos hacer eso porque ya lo escribí, así que voy a guardar eso y cerrar eso. Ahora, de vuelta a nuestras etiquetas de estilo, hago estilo abierto y recordarás de HTML que si voy a abrir una etiqueta, también quiero cerrarla. Entonces voy a cerrar eso para allá. Entonces, con etiqueta de estilo en línea es donde voy a escribir mis selectores y declaraciones CSS. Entonces, recuerdas cuando miramos la sintaxis, la sintaxis se ve esencialmente así, selector, corsé rizado, y luego la propiedad, colon, valor, semi colon. Todo lo que tenemos que hacer es si queremos aplicar propiedades y valores reales a nuestros selectores es reemplazar esta fórmula por lo que realmente estamos tratando de manipular. Entonces, en este caso, en el selector lo voy a hacer una P para la etiqueta P, la propiedad que estoy cambiando es de color, y los valores a los que lo estoy cambiando es azul. Sublime Text nos está dando color de sintaxis resaltando aquí, por lo que reconoce que los valores que acabamos de poner son propiedades y valores CSS reales, y ese es un elemento real o selector de etiquetas. Por eso cambié del color blanco al rosa y al azul para que registre que en realidad es una propiedad CSS que funciona. Entonces, tenemos nuestro selector de tipo, en este caso, el tipo es un párrafo, un P. Nuestros colores son propiedad y nuestro azul es nuestro valor. Vamos a guardar esto, pop de nuevo a Chrome, refrescar la página. Ahora, todos nuestros párrafos son azules. Recuerda, nuestro contenido de pie de página es en realidad un párrafo con nuestra información de copyright, por lo que eso también se volvió azul. Todo lo demás debe quedarse como fue porque no es un párrafo, y así es como empezamos con hojas de estilo internas. Lo mismo, si quiero aplicar más propiedades y valores lo puedo hacer. Voy a una nueva línea, voy a escribir ese tamaño de fuente, propiedad, así que tamaño de fuente 18 pixels. Echaremos un vistazo tanto a la propiedad color como a la fuente un poco más adelante, pero solo quiero que vean esto en acción para que ustedes vean cómo se conectará a nuestra página. Voy a guardar esto, refrescar la página, ahora todos mis párrafos son de 18 píxeles. Por lo tanto, nuestra hoja de estilo interna es definitivamente mejor que nuestros estilos en línea. Más fácil de escribir, no necesitamos copiarlo a cada elemento de párrafo. Estamos bastante cool, ¿verdad? Se ve bastante bien. Donde surge el problema con los estilos en línea es que lo más probable es que tu sitio web no sea solo una página. Lo más probable es que quieras que cada página de tu sitio web tenga un aspecto similar para que la gente sepa que pertenece al mismo sitio web. Si quisiéramos que los estilos de nuestra página Acerca también estuvieran en los estilos para nuestra página de trabajo, tendríamos que copiar nuestro elemento de estilo, abrir la página de trabajo, pegarla aquí, guardar esto. Abre esta copia de seguridad, ve a nuestra página de trabajo, y ahí nuestros párrafos son azules y 18 píxeles. No sé cuántos párrafos de esta página, pero se puede ver lo que empieza a ponerse molesto, ¿verdad? Ahora, necesito copiar y pegar esto en el elemento principal de cada página de mi sitio web. Si tienes una página web de 40,000 páginas que no va a ser una experiencia agradable. Entonces, eso nos deja con nuestra tercera opción, nuestras hojas de estilo externas. El estilesheet externo es un archivo separado que va a contener nuestro CSS. Entonces, hagamos nuestra hoja de estilo externa. Cómo hacemos eso es que vamos a crear un nuevo archivo, así que puedes archivar un nuevo archivo o puedes hacer clic derecho y hacer clic en nuevo archivo en la carpeta. Voy a hacer archivar un nuevo archivo. Lo que puedo hacer aquí ahora es empezar a escribir mi contenido CSS. Entonces, en este caso, voy a copiar todo lo que tenía aquí sin la etiqueta de estilo dentro de lo que será mi documento CSS. Entonces, recuerda que voy a decir: “Quiero que todos mis párrafos sean de color azul”. Entonces, P, llaves, color, azul, punto y coma, y guardar. Ahora, cuando guarde, me va a preguntar con el cuadro guardar, el cuadro de diálogo guardar, Va a decir, “¿Cómo quieres guardarlo?” Ahora bien, no golpees retorno demasiado rápido porque de lo contrario se ahorrará como “P rizado brace” que es la primera línea de nuestro documento. Por supuesto, no queremos eso. De lo que queremos que guarde como, es algo así como, “Estilos”. Ahora, la parte realmente importante es nombrarla as.CSS. Entonces, al igual que nosotros los archivos had.HTML, para decir que es un archivo HTML, tenemos archivo got.CSS. Esto le dice al navegador que se trata una hoja de estilo en cascada y que tendrá estilos para nuestro HTML. Entonces, puedes guardar esto como, styles.css. Me gusta llamarlo styles.css es un nombre bastante corto para escribir, es fácil de recordar. Algunos nombres como JohnArbucklestyles.css que es mucho tipo vamos sólo con styles.css. Vamos a guardarlo bien en el mismo nivel que todas nuestras páginas HTML, así que ahorra. Ahora, ya verás en cuanto guarde, la sintaxis de color resaltado comenzó porque Sublime Text 2 sabe que es archivo a.CSS, lo que significa que sabe resaltarlo en base al texto CSS. Entonces, ahora, voy a volver atrás y sacar esta hoja de estilo interna. Voy a borrar eso, voy a guardar esto de nuevo arriba. Ve a Chrome, estoy en la página de trabajo y quiero estar en la página Acerca. Solo voy a dar clic atrás, refrescar la página, y estoy de vuelta a los valores predeterminados del navegador. Bueno, ¿por qué vuelvo a los valores predeterminados del navegador? Dije que deberíamos estar usando esta hoja de estilo externa, ¿verdad? Bueno, creamos el styles.css, pero ¿qué no hicimos? En realidad no vinculamos los dos archivos juntos de todos modos, ¿verdad? Tenemos en about.html, tenemos un styles.css, no le dijimos que aplicara styles.ccs a nuestra página Acerca y HTML, así que tenemos que hacerlo. Hacemos eso adjuntando nuestra hoja de estilo externa con una etiqueta de enlace. El tag vinculado es diferente a nuestra etiqueta ancla que define enlaces, por lo que un poco similar en nombres, pero definitivamente una cosa diferente. El enlace va a adjuntar el archivo que queremos utilizar para nuestro CSS. Vamos a añadir en nuestra etiqueta de enlace para definir otro archivo al que una vez vinculamos. Entonces, escribiremos corchetes abiertos, enlace, y luego vamos a necesitar algunos atributos. Esencialmente, el enlace es una etiqueta independiente que solo tiene atributos y sin contenido. Entonces, lo primero que vamos a decir es rel="stylesheet”. El rel atributos va a guardar la relación de este archivo de enlace con el documento. En este caso, está diciendo que su relación es que es una hoja de estilo. Entonces, el siguiente atributo que escribimos debería parecer familiar como lo has visto antes y ese es el href. Recuerde que el href dijo fueron el documento al que estábamos vinculando se encuentra y vamos a hacer lo mismo para donde deberíamos enlazar el archivo CSS. Entonces, href= "”, entonces vamos a llenar eso con donde se encuentra la hoja de estilo. Entonces, en este caso, va a ser bastante fácil. Al igual que funcionó nuestro trabajo sobre las páginas de contacto, actualmente estamos en la página Acerca y queremos ir a styles.css. Entonces, estamos en el mismo nivel lo que significa que no necesitamos subir un nivel ni a ninguna carpeta. Styles.css, luego cierra nuestra etiqueta de enlace. Ahora bien, si yo estuviera sosteniendo mi styles.css en una carpeta llamada CSS o algo así, recuerda, tendría que guardar la carpeta a la que quería entrar, luego una barra inclinada entra a la carpeta. Pero como estamos en el mismo nivel, voy a eliminar eso y simplemente guardarlo un styles.css porque está en el mismo nivel en nuestra estructura de carpetas que nuestra página sobre. Voy a guardar con comando, control S, volver a nuestro navegador otra vez, refrescar la página, desplázate aquí abajo. Se puede ver que todos nuestros párrafos son azules porque ahora nuestra hoja de estilo se vincula correctamente. En el siguiente video, vamos a ver el uso del inspector Web para ver cómo está aplicando nuestro CSS a la página y cómo podemos ajustar las cosas para ver cómo se verán las cosas. También vamos a ir a ver la solución de problemas. Entonces, si tus estilos no aparecen ahora mismo, mira el siguiente video y veamos cómo podemos asegurarnos de que estamos consiguiendo que los archivos se vinculen correctamente y podamos verlos en el navegador. 8. Solución de problemas e inspector web: Si no puedes ver tu texto poniéndose azul ahora mismo, bueno, eso es un super bummer. Entonces, echemos un vistazo a algunas de las cosas que podrían estar saliendo mal. En primer lugar, asegúrate de que estás mirando la página correcta. En este momento, sólo hemos añadido nuestra etiqueta de enlace a nuestro about.html. No lo hemos agregado a ninguna de las otras páginas como nuestro trabajo o nuestro índice o nuestro contacto. Entonces, si estás mirando alguna de esas otras páginas, entonces eso no funcionará para ti. Si pones la etiqueta de enlace en una de esas otras páginas entonces no va a estar en la página sobre. Entonces, vamos a asegurarnos de que tenemos nuestra página sobre abierta, y que nuestra etiqueta de enlace esté dentro de ahí. A continuación, es realmente importante revisar cosas como tus cotizaciones. Recuerda, a veces, si dejas algo como esto, el CSS no se va a leer correctamente. Por lo tanto, usa el resaltado de sintaxis de color para asegurarte de que realmente estás viendo la sintaxis styles.css resaltada correctamente. A continuación, asegúrate de que tu camino sea correcto. ¿ De verdad llamaste a esto, styles.css? Si le nombraste algo diferente a mí, entonces vas a querer cambiar esto por lo que lo llamaste. Entonces, si necesitabas algo como colors.css o catsrule.css, entonces quieres asegurarte de que eso sea lo que dice. En este caso, dijimos styles.css. A veces, lo que me gusta hacer es si hay un nombre complicado o tal vez algo que no pueda escribir fácilmente, puedo dar clic aquí para Renombrar, solo selecciónelo todo fuera de eso para copiarlo. En realidad no voy a renombrarlo. Voy a volver a cerca y simplemente pegar eso para asegurarme de que lo estoy consiguiendo exactamente como se supone que debe ser. A continuación, ¿te aseguraste de que esté en el mismo nivel? Si tienes alguna otra carpeta, recuerda que el camino va a ser un poco diferente. Entonces, para las imágenes, tenemos que entrar a nuestra carpeta Image. Eso es algo que tal vez quieras mirar. Otra cosa que puedes hacer para asegurarte de que el archivo realmente se está vinculando y así el problema está en el archivo y no tus selectores reales por aquí, es que sigamos adelante y veamos esto en un navegador. Entonces, voy a guardar las cosas de nuevo a cómo eran, volver y refrescarme. Bueno, digamos que no está funcionando porque quizá olvidé cerrar o abrir una cotización. Si vuelvo aquí, se puede ver que el styles.css ya no funciona porque mi atributo no se nombró correctamente. Entonces, una de las cosas que puedo hacer es abrir de nuevo ya sea nuestro Inspector Elemento Inspector para hacer Web o puedo ver nuestra fuente. Entonces, View, Developer, View Source, y te darás cuenta cada vez que veamos la fuente, veremos que nuestros enlaces son azules al igual que vimos en las páginas web normales. Si quisiera abrir esto en una pestaña nueva, realidad podría porque este es un enlace a ese logo.png. Esto me permite saber que este enlace en realidad está funcionando e yendo al lugar correcto. Entonces, podría intentar hacer lo mismo con los estilos aquí, así que abre enlace en nueva pestaña y veo esta página web no se encuentra, y puedo empezar a ver que hay un problema aquí porque veo esta cita por aquí, ahí no debería haber ninguna cotización en mi URL de archivo? Entonces, déjame volver aquí y decir: “Eso es raro”. Eso me puede ayudar a identificar que algo anda mal con cómo lo estoy vinculando. Otra cosa que podemos hacer es usar nuestro validador HTML. Tal vez recuerdes eso desde nuestra última clase, por lo que quieres ir adelante al Servicio de Validación W3. Voy a copiar todo mi código. Voy a hacer eso con control A o comando A para seleccionar todo, o Editar, Seleccionar todo. Voy a seleccionar todo y luego voy a copiar. Voy a ir al validator.w3.org e ir a Entrada directa, pegar mi código ahí y hacer clic en Comprobar. Ahora, ya verás que estoy recibiendo un error ahora cuando ejecuto esto a través del validador. Entonces, déjame bajar y ver cuál es el error y el error dice: “En valor de atributo no citado”. Eso es fabuloso, me está diciendo exactamente lo que está mal. Entonces, línea 10 atributo no cotizado, vuelvo aquí. Eso fue con la línea nueve, pero tienes el área general y puedo ver, Oh shucks, me olvidé esta cita, y guarde eso. Entonces, esa es una manera. Ahora, déjame seguir adelante y romper un poco esto, vuelve a nuestro navegador, refresca esto. De nuevo, no está funcionando. Entonces, volveremos a lo que hacía antes. Lo que hice fue asegurarme de que los estilos estuvieran ahí. Otra forma en que puedo hacer eso inspeccionando Element. Recuerda, Inspector nos permite ver todo el HTML en la página? Voy a abrir mi elemento de cabeza, voy a ir a mi styles.css, voy a dar click en esto, y puedo ver que en realidad está cargando el styles.css. Entonces, el problema ya no se vincula, el problema es algo dentro de mi styles.css. Está bien, déjame volver y comprobar eso. Entonces, voy a styles.css, y en este punto, no estoy realmente seguro de lo que está mal. Es realmente fácil perderse un punto y coma o un colon de vez en cuando. Entonces, si no veo esto de inmediato, puedo volver a usar algo así como un validador. No solo hay validación HTML, también está la validación CSS. Entonces voy a copiar mi código desde aquí, luego voy a ir al Servicio de Validación CSS. Eso es jigsaw.w3.org/css-validator o simplemente haga una búsqueda rápida en Google para validador CSS y haga clic en ese enlace que aparece. Voy a ir a Entrada Directa. Por supuesto, también puedes poner una URL real del documento o subir el archivo, pero ya he copiado todo, así que déjame simplemente pegar eso ahí dentro. Voy a revisar, y ahora va a decir que encontraron un error en 2, área de texto p, color Parse Error azul. Esto me identifica dónde está el problema. Ahora puedo encontrar en la línea 2, y puedo mirar y decir, color, azul punto y coma, oh espera, en realidad no le puse un colon. Entonces, permítanme añadir el colon. Ahora, puedes ver a Sublime Text a veces le gusta autocompletar para ti, lo cual puede ser un poco molesto porque no lo quiero en este momento. Entonces, vamos a borrar eso, entonces estoy de vuelta a estar todo listo y en los negocios. Entonces, déjame guardar eso, volver a mi navegador, refrescar esto, y las cosas vuelven a estar azules. Entonces, ahora que tenemos todo funcionando, sigamos adelante y copiemos la hoja de estilo externa a nuestros otros archivos. Recuerda, ahora mismo, solo está en nuestra página sobre. Entonces, si pasé a nuestro Hogar, los párrafos seguirán siendo en el estilo negro en lugar del estilo azul que abordamos. Entonces, voy a ir a mi página sobre, voy a copiar este elemento de enlace, y luego voy a abrir todas mis otras páginas. Voy a reemplazar eso. Recuerda, me gusta mantener las cosas aseadas, así que voy a tabular eso ahí dentro, ir a la página de Contacto, dejar que ahí dentro. Por último, nuestra Página Principal, puedes agregar eso ahí, también, y guardar. Parece que se me olvidó guardar contacto y se me olvidó guardar trabajo, déjame guardar esos. Ahora bien, si vuelvo al navegador, y refresco, podemos ver que se están aplicando los estilos. También podemos usar nuestro Inspector para ver los estilos que actualmente se están aplicando. Al igual que lo usamos para buscar cada HTML, también podemos ver nuestro CSS. Voy a desplazarme hacia abajo para poder ver esto. Se puede ver que estoy en mi blockquote, y luego mi párrafo y se puede ver en el lado derecho por aquí, tenemos nuestra pestaña Estilos. Nuestra pestaña Estilos nos dice que el color del párrafo es azul. Entonces, podemos ver qué estilos se están aplicando a nuestra página inspeccionando también los elementos para nuestro CSS. Otra cosa ordenada que puedes hacer en el Inspector es en realidad ver cómo se vería otro color. Entonces, puedo ir por aquí, te das cuenta cuando hago clic, está resaltado, y digamos que ya no quiero que las cosas sean azules. Recuerda, no nos gusta el azul. Vamos a hacerlo rojo. Puedo teclear rojo, y ahora se puede ver que el texto es rojo. Entonces, el Inspector nos deja ver vista previa en vivo para ver si tal vez nos guste algo más. Por supuesto, esto no guardará en tu CSS real, pero puedes probar las cosas para ver cómo se ven, decidir si te gusta algo y luego te sientes como, ya sabes qué, rojo se ve bien, vuelve a tus estilos y cambia esto a rojo . Entonces, así funciona el uso del Inspector y un poco sobre cómo podemos solucionar problemas para asegurarnos de que nuestros estilos realmente están llegando a nuestra página. Por supuesto, acabamos de empezar a rayar la superficie sobre lo que podemos hacer con CSS. Entonces en la siguiente lección, echemos un vistazo más profundo a las propiedades CSS con las que tenemos que trabajar para aplicarnos a nuestro HTML. 9. Propiedades de las fuentes: Las propiedades CSS son lo que utilizamos para cambiar la apariencia de nuestro HTML. En este caso, hemos mirado hasta ahora dos propiedades CSS, color y fuente Size. tamaño de fuente, al igual que el nombre lo indica, cambia el tamaño de nuestras fuentes. Podemos volver a nuestro styles.css y vamos a volver a aplicar un tamaño de fuente a nuestros párrafos. En este caso, digamos 16 píxeles. Bueno, no vamos a querer sólo cambiar nuestros párrafos, también probablemente vamos a querer cambiar cosas como nuestros encabezamientos y nuestra lista. Por ahora, solo empecemos con nuestros encabezados, y vamos a decir que nuestro h1 será de 30 píxeles. Ahora con el fin de hacer otra propiedad para otro selector, sólo vamos a hacer lo mismo exacto que hicimos aquí arriba y seguir nuestra sintaxis de valor de propiedad selector. En este caso, nuestro selector será nuestro rubro nivel uno. Para escribir eso, recuerda nuestro HTML es h1. Corredores rizados, ahí es donde hacemos nuestras declaraciones. En este caso, vamos a decir font-size: 30 pixels. Eso dice usar la unidad de medida de píxel y que sea 30 píxeles. Guardemos esto. Voy a abrir mi Página de Contacto y me voy a refrescar, y ahí está. No se ve muy diferente, ¿verdad? Bueno, echemos un vistazo a lo que está pasando y asegurémonos de que realmente está funcionando. Nuestro h1 es de 30 píxeles, y nuestros párrafos son azules y 16 píxeles. De acuerdo, entonces tal vez estamos un poco cerca de lo que eran los valores predeterminados del navegador de todos modos. Vamos a subir eso. ¿ Cuánto debemos reventarlo? No lo sé. Juguemos por aquí hasta que encontremos algo que nos guste. Sólo estoy haciendo clic en la flecha arriba. La flecha arriba y la flecha abajo cambiarán el valor del píxel en una cantidad. Oye, eso se ve bastante bien, 52. Eso lo voy a guardar. Bueno, no puedo salvarlo desde aquí. Tengo que volver a entrar y de hecho cambiarlo aquí a mi archivo, y voy a hacer esto, ahora sólo hagámoslo 50. Mi h1 50 pixels. Es así como definiría el tamaño de fuente. píxeles son solo una unidad de medida que podemos usar para definir el tamaño de nuestras fuentes. Al igual que cómo podríamos describir cosas tal vez como metros o pulgadas o pies, también puedes describir tus tamaños de fuentes en diferentes unidades de medidas. Otro ejemplo es el uso de una palabra clave. Algunos de los valores de palabra clave que posiblemente tengamos son pequeños, o extra, extra grandes, que se escribirían así. Podemos guardar esto, volver a nuestro navegador y ver cómo se ve eso. Bueno, en realidad no es tan extra grande en comparación con lo que teníamos antes, pero así es como lo haces extra grande. Se puede ver sin embargo que nuestros párrafos son bastante pequeños. También podemos ver cómo se ve en extra pequeño o extra, extra pequeño, y eso es bastante diminuto. Todavía no uso gafas, pero creo que lo haría si todo fuera así de pequeño. Otros valores posibles que tenemos son em, por lo que podríamos decir algo así como 1em o 5em. Podemos guardar eso, refrescar, y se puede ver que eso se hizo bastante más grande, y 1em es básicamente el valor predeterminado del tamaño de fuente de todos modos. Podrías usar decimales en eso también, por lo que podrías decir algo así como 1.5em o 2em. También tenemos porcentajes, por lo que se podría decir algo así como 100 por ciento o 300 por ciento. Ahórrate eso, vuelve atrás. El tamaño de fuente se basa en el porcentaje del elemento padre. En este caso, toda la página. Este tamaño de fuente, puedes cavar realmente profundamente en el costado qué medidas de tamaño de fuente son las mejores para ti. Diré que los píxeles son los más fáciles de empezar y especie de los más fáciles de agarrar la cabeza porque sabemos lo grandes que serán los 16 píxeles, así que lo volveremos a poner de nuevo a eso. Hagamos tamaño de fuente 20 píxeles para párrafos, y h1 como 40 píxeles. Siéntete libre de jugar con algunas de las otras unidades que puedes usar para el tamaño de fuente. La siguiente propiedad de la fuente que veremos es el peso de la fuente. ¿ Y si queremos que nuestro peso de fuente sea audaz? Bueno, ya hemos visto algunas fuentes audaces antes con nuestros encabezados. ¿ Y si quisiéramos que nuestros párrafos también fueran audaces? Bueno, podemos hacer eso con la propiedad de peso de la fuente. Entonces font-weight: negrita. Voy a guardar eso, Archivar, Guardar, y refrescar la página. Ahora puedes ver mi texto de párrafo está en negrita. Si quisiera ver cómo se veía sin negrita, solo una vista previa en el inspector del navegador, vamos a encender y apagar las propiedades, y se pueden ver las diferencias que están haciendo a medida que avanzamos. Ahora podrías estar pensando: “¿Cómo sabría yo que la palabra es audaz para esto?” Sí, claro, te lo estoy diciendo ahora, pero ¿cómo lo sabrías? Ahí es donde vuelven los Googles. No te preocupes por memorizar todo esto ahora mismo. Lo bueno de trabajar en CSS es que vas a estar escribiendo CSS en una computadora. Ahora, concedido esperando que tengas una conexión a Internet, lo más probable es que estés como a una pestaña de solo Google cuál es el valor de la propiedad CSS para esto. Digamos que no podía recordar pero sabía que quería que mi peso de fuente fuera audaz. Bueno, puedo ir a un sitio de referencia. Uno de los sitios de referencia que me gusta mucho es HTML Dog. HTML Dog tiene esta lista de referencias en el sitio. Podría haber mirado antes las etiquetas HTML, también podemos mirar las propiedades CSS. Sé que quiero cambiar el peso de mi fuente, y aquí mismo, mira debajo de Texto y Fuentes, veo peso de fuente. Hago clic en eso, y entonces lo que hará aquí es enumerar los posibles valores que puedo establecer para esa propiedad. Normal, más audaz, audaz, más ligero, y luego peso. Arranque de peso de más ligero a más audaz. En este caso, incluso se puede ver un ejemplo, font-weight: bold, que es lo que estamos escribiendo aquí mismo. También podrías apagar el font-weight: negrita de los encabezados si quieres, y podrías hacerlo usando font-weight: normal. Para el h1, puedo decir font-weight, y luego escribir normal. Tengo de nuevo ese valor normal de aquí, voy a guardar mi archivo, volver aquí, y ahora ver el h1. Ya no es audaz porque decidimos poner eso a la normalidad. Es así como comenzarías a agregar pesos de fuente a tu página. Es posible que quieras dejar tus encabezados en negrita para que la gente sepa que esos son de hecho encabezados, pero ya hemos chocado nuestro tamaño de fuente hasta 40 píxeles que es bastante obvio que esto no es solo texto de párrafo que estamos buscando at. Por ahora, me siento bien quitando los pesos de fuente de negrita y ajustándolo de nuevo a la normalidad. A continuación tenemos la Propiedad Estilo de fuente. El estilo de fuente nos permite ajustar el estilo de la fuente. Ejemplos que tenemos son cursiva u oblicua. Si quisiéramos hacer- vamos a configurar los h2s. Todavía no tienen amor CSS. Entonces, h2 para nuestro selector, llaves, y luego dentro de eso son propiedad y valor. En este caso, estamos hablando de estilos de fuente, así que font-style፦ Entonces digamos Italic. Guarda eso. Refresca el navegador y puedes ver que nuestro nivel de rúbrica dos ha cambiado a Italic. Eso parece un poco pesado siendo itálico y audaz, por lo que podríamos combinar las cosas para que podamos tener el estilo de letra y el peso de la fuente. Entonces cambiemos el font-weight a normal y quitemos esa negrita. Ahora, aquí tenemos nuestro rumbo, que es cursiva y peso normal. Nuevamente, si quisiera saber qué opciones tenía para las fuentes, podría volver a mis Propiedades CSS en htmldog y echar un vistazo al estilo de fuente. Aquí, encontrarás las diferentes opciones que tengo. Entonces, hemos ajustado algunas cosas mejor fuente hasta ahora, pero una de las cosas que no hemos cambiado en absoluto es qué fuente real estamos usando. A lo mejor no eres un gran fan de esta fuente serif. A lo mejor querrías usar una fuente sans-serif. Podemos ajustar eso totalmente y lo haremos con la propiedad font-family y la font-family nos dice qué fuente te gustaría usar. Entonces, cambiemos nuestros párrafos por la font-familia. Entonces cambiemos esto a la font-familia de Arial. Entonces, lo que haremos es por valor sobre propiedad, vamos a escribir el nombre de la fuente que queremos usar, en este caso Arial. Voy a decir esto y Arial es una fuente sans-serif. Entonces, todas las fuentes que hemos estado buscando son serifs, que tienen estos chicos de línea al final excepción de nuestro logo por supuesto, pero eso es una imagen. Voy a guardar esto y ahora verás que nuestro texto de párrafo cambió de nuestro predeterminado de navegador a Arial. Entonces así definirías una fuente. Hay algunas formas diferentes en las que puedes hacer familias de fuentes y una de ellas es describir el botón específico que estamos usando como Arial, pero también podemos usar una font-family genérica. Entonces, me has oído usar la palabra, “Serif y sans-serif”. Bueno, sólo se puede decir en general, quiero cualquier sans-serif. Eso es lo que llamamos apellido genérico. Puedes volver aquí, haz click que verás que es bastante similar al navegador que podríamos estar usando Arial. Pero lo que esencialmente hace el navegador dice “Encuentra lo que sea por defecto sans-serif que tengas y servirlo”. Los otros nombres de familia genéricos que tenemos son serif, como hemos visto para que podamos cambiar eso de nuevo a un serif. También podríamos hacer cursivos. Guarda eso. Vuelve aquí y puedes ver cambia a cualquiera que sea la fuente cursiva predeterminada de la computadora. La siguiente familia de fuentes genérica es monospace. Guarda eso, vuelve aquí y el monoespacio que verás es como carrera. Esencialmente usas eso para algo así como código. Muestras es algún lugar donde verías que usas a menudo y la última que tenemos que podría ser mi favorita para las familias de fuentes genéricas es la fantasía. Guarda eso y obtienes algo dulce. Quizás para Pyros en un Mac o Comic Sans si tienes el placer de usar Windows y llegar a ver esa belleza. Entonces, estoy totalmente bien si quieres poner toda tu copia a la fantasía. Creo que eso es genial. Algunas personas podrían no estar de acuerdo, pero “Oye, es tu Sitio Web”. Entonces una de las cosas que hace una familia genérica es esencialmente que sirve cualquier fuente que esté disponible para la máquina. No todas las fuentes están disponibles en cada computadora. Hay diferentes fuentes basadas en si estás en una máquina Mac o Windows o Linux. Hay diferentes fuentes en función de si has decidido instalar fuentes o eliminar fuentes. Las fuentes en cada máquina son una especie de hasta qué sistema operativo estás ejecutando y preferencia del usuario. Porque no todas las fuentes están en cada máquina, estamos como limitados en lo que podemos servir. Puede que quiera servir a Helvética, pero puede que no esté en su computadora. Estas familias genéricas sirven a cualquier fuente que esté disponible en ese género familiar genérico, por lo que buscará lo que sea que el predeterminado del sistema operativo sea para cursivo o serif y eso es lo que servirá. Tenemos lo que se conoce como fuentes Web Safe. Fuentes web seguras con esta lista de seis fuentes que encontraron que sus servicios estaban disponibles en casi todas las máquinas. Entonces Arial, Georgia, Verdana, Courier, Trebuchets, Times New Roman, estas son cosas que verás comúnmente en la mayoría de las computadoras. Por lo que puedes estar bastante seguro usando cualquiera de estos. No obstante, también tenemos la pila de fuentes y la pila de fuentes es una forma de servir fuentes de reserva. Lo que eso significa es que puedes servir tu primera opción de fuente y luego si esa fuente no está disponible, la siguiente fuente de la lista será servida a la computadora en su lugar. Entonces, veamos algo así como decir: “Yo quería servir a Helvética”. Podría escribir Helvetica, pero luego quiero decir si la computadora no tiene Helvetica, sirva esta fuente en su lugar y lo haría con una lista separada por comas. Por lo que puedo suministrar múltiples valores a algunas propiedades con una lista de valores separados por comas. Entonces por supuesto no vas a tener unos valores separados por comas para peso de la fuente porque no vas a decir en negrita coma normal. El tipo de letra va a ser audaz. No obstante, font-family es la situación en la que querrías hacer algo como esto y donde el trabajo puede ser válido porque puedes tener múltiples fuentes especificadas en caso de que necesites usar un respaldo. Entonces, digamos que no hay Helvética servir a Arial en su lugar. Si no hay Arial, la última fuente que queremos enumerar en nuestra pila de fuentes va a ser el nombre genérico de la familia. En este caso, estas son todas fuentes sans-serif, así que voy a decir si no tienes una Helvética y no tienes a Arial para servir lo que sea sans-serif que puedas desenterrar en esa máquina. Entonces, guardemos eso y actualicemos la página. Entonces, puedes ver la actualización aquí. ¿ Y si pongo alguna fuente loca, una fuente que sé que no tengo? Lucida es una fuente que tiene algunas versiones diferentes. Esta versión básica de Lucida, no tengo en mi máquina. Entonces si lo agrego aquí y hago clic en Guardar y Refrescar, todavía voy a conseguir el siguiente en mi pila de fuentes porque no tengo esa fuente. Si quieres fuera de fuente que tenga múltiples nombres como Times New Roman, lo haces poniéndolo entre comillas. Entonces, “Times New Roman” y vuelve aquí y ahora verás mi fuente cambiada a Times New Roman. La buena noticia es que a medida que pasaron los años la gente se enfermó de las seis fuentes seguras de la Web y encontró una manera de finagle tecnología para usar fuentes Web, lo que significa que en realidad controlamos más fuentes. Entonces, vamos a empezar con estas seis en nuestras fuentes de Website, pero no te preocupes, tendrás más opciones más adelante. Entonces, voy a poner mi texto de párrafo en un serif porque eso a veces puede ser fácil de leer y lo voy a enviar a Georgia, con un respaldo de serif y para mis encabezados los voy a hacer Verdana. Entonces voy a decir font-family Verdana y el respaldo para eso será un sans-serif. Lo mismo para mi h2 font-family Verdana, sans-serif. Yo voy a ahorrar eso, vuelve. Entonces, eso lo he cambiado. Realmente no me encantan los Italic y Verdana juntos. Entonces, me voy a quitar eso. Entonces voy a quitar ese estilo de fuente. Eso es un poco mejor para mí. Voy a ir con eso por ahora. Entonces, nuestras fuentes se ven un poco mejor. No obstante, este azul es un poco horrible. Entonces, en el siguiente video, empecemos a echar un vistazo a los colores, específicamente el color del texto y los colores de fondo y veamos cómo podemos ajustar algo de eso. 10. Color del texto y color de fondo: Entonces, nos gusta tener en nuestra propiedad de color CSS, pero en este momento sólo tenemos este terrible azul. Bueno, hay diferentes formas en que podemos definir nuestros valores de color para nuestra propiedad de color. Cuando decimos azul, eso es lo que se conoce como nombre de color o palabra clave. Hay algunas opciones de palabras clave diferentes que tenemos que usar. Estos son algunos ejemplos. Se puede ver que podemos definir las cosas como negro, blanco, granate, fucsia, esa es una de mis favoritas junto con aqua, amarillo, oliva, lima, verde. Hay un montón para elegir pero todos son una especie de reminiscencia de mediados de los 90 y tal vez queremos un poco más de control sobre nuestro color. Bueno, no te preocupes, podemos hacer eso. Podemos hacer eso con estas otras opciones de valor de color. El primero que vamos a ver es hexadecimal. Notaciones hexadecimales básicamente para encontrar los valores rojo, verde y azul, utilizando ya sea números hexadecimales de tres o seis dígitos. Existen algunas formas diferentes de obtener un número hexadecimal. Si tienes un programa de edición de imágenes, como Photoshop, muchas veces verás el recolector de color por aquí, y a medida que te mueves y cambias el color, el valor aquí abajo es nuestro número hexadecimal. Entonces, a lo mejor quiero un azul que sea un poco más manso, tal vez como un azul-verde como este. Lo que puedo hacer es copiar este número, este número hexadecimal, volver a mi Sublime Text, y luego en Sublime Text, voy a deshacerme de nuestra palabra clave azul. Para decir que estamos haciendo un número hexadecimal, comenzamos con el signo de libra, y luego pegamos en nuestro número de seis dígitos. A partir de ahí, haremos clic en guardar y luego volvamos a previsualizarlo en el navegador. Entonces cuando regrese y refresco, se puede ver que el azul ya no es tan intenso. Todavía verás que hay algo azul en esa página y eso es en realidad para nuestros enlaces. Por defecto, los valores predeterminados de nuestro navegador hacen que todos nuestros enlaces no visitados sean azules. Pero nuestro párrafo por ahora es más de este azul-verde y se ve un poco más tranquilo. Entonces, vamos a cambiar esto. Vamos a hacer de esto un valor gris y vamos a usar el valor gris de 333333, voy a guardar eso, refrescar. Ahí ahora tengo textos grises. Los números hexadecimales pueden ser de tres o seis dígitos porque puedes escribir un atajo para ellos si tienes números repetidos. 333333 es lo mismo que 333. Si tuvieras un número como ff3300, también podrías escribirlo como f30. El navegador leerá eso como doble repetición. Entonces en este caso, cualquier momento en que tengas tus dos dígitos para tus valores rojos, tus verdes o tus azules repitiendo, puedes hacer un atajo. Vamos a tener 333 por ahora. Podemos guardar eso como nuestro valor hexadecimal, pero tenemos otras opciones además de eso. También tenemos valores RGB o rojo, verde, azul. Entonces digamos que quería hacer mis textos como color morado. Podría agarrar ese valor RGB aquí. Por lo que 129, 45, 112 y yo podría enchufar eso en Sublime Text. Voy a deshacerme de nuestro número hexadecimal y probar un valor RGB. Escribiré RBG y entre paréntesis, y mi valor para el morado irá entre paréntesis. Entonces si hago trampa y miro lo que fue eso que fue 129, 45, 112, puedo volver aquí y decir 129, 45, 112. Estos valores son valor rojo, o valor verde, o valor azul. A este RGB se aplicarán los valores separados por comas. Si guardo eso y vuelvo a Chrome y refresco, ahora tengo este color morado en el valor RGB. RGBA es otro valor que tenemos, y eso significa, rojo, verde, azul, alfa. Podemos usar el número alfa para la transparencia. Entonces si cambio nuestro RGB a RGBA y luego agrego otra coma por otro valor, por defecto, es un valor de 1, y eso es decir que es totalmente opaco. Si cambio eso a algo así como 0.5, eso va a hacer que la opacidad sea del 50 por ciento. Entonces volvamos a Chrome, y ya verás cuando me refresque, eso se desvanece porque bajamos la opacidad al nivel alfa a 0.5. Entonces eso es un poco sobre cómo usas RGB y RGBA. HSL y HSLA son muy similares a esto excepto que representan matiz, saturación, ligereza. Si no tienes Photoshop, está bien. También hay muchos recolectores de color en línea. Este sitio es colourlovers.com y Colour Lovers muestran algunas paletas de uso común. Si seguimos adelante y solo navegamos por algunas paletas, esto te puede dar algunas ideas de paletas de colores que podrías usar en tu sitio o que te inspirarán a usar diferentes colores en tu sitio. Podrías hacer clic en él y saber más si te gusta una paleta de colores como esta para “Exijo un panqueque”. Si nos desplazamos hacia abajo, no estoy muy seguro de querer un panqueque azul pero sí me gusta el aspecto de esta paleta. Puedes ver que aquí te muestran los colores, y puedes ver que te dan el valor hexadecimal así como el valor RGB. Por lo que podrías enchufar estos valores en tu CSS si quisieras usar algo como esto. Para que pudiera copiar esto, volver a Sublime Text. Estoy usando RGB y no RGBA, así que voy a cambiar eso aquí y pegar eso. Ahora cuando vuelvo, estoy usando el valor gris que copié de aquí. Este es HSL picker, y HSL picker te da un poquito de slider aquí, y verás a medida que muevo las cosas, cambia el color aquí Puedes cambiar todo tipo de valores hasta obtener el color que te quieren. Aquí abajo está la capa de opacidad o alfa para que puedas ver eso cambiando ahí. Vamos a chocar eso hasta 1. Podemos ver esto. Ahora estamos cambiando ligereza. Entonces si te gusta esto, podrías agarrar el número hexadecimal, el valor RBGA, y luego el valor HSLA que también usa porcentajes para la saturación y ligereza. Entonces digamos que me gusta este color verde, y me gusta el valor HSLA, puedo copiar eso, volver a mi Sublime Text, y luego puedo cambiar el color de mis H1's simplemente pegando eso, haciendo clic en guardar y volviendo atrás. Ahora mis de nivel de rumbo son verdes. ColorPicker.com es otro recolector de color similar al valor de Photoshop, y puedes ver si solo puedes ajustar, con el fin de elegir un color de ese. Podrás consultar otras herramientas como kuler.adobe.com. Me pregunto si eso se supone que es de color pronunciado. No estoy realmente seguro. De cualquier manera, si tiene un recolector de color, me doy cuenta de que realmente no digo estas cosas en voz alta que a menudo, pero puedes especie de establecer un color base aquí, y ajustar las cosas y puedes decir si quieres o no monocromático o complementaria y te dará sugerencias para una paleta de colores para que utilices, junto con los valores RGB y hex que puedes utilizar dentro de tus documentos. Entonces hay muchas herramientas por ahí. Si solo haces color CSS en una búsqueda de Google, obtendrás una tonelada de ellas que esperemos te inspire en algunas opciones de color. Entonces voy a seleccionar esto. Ahora de vuelta a mi código, diré color y lo pegaré ahí. Te darás cuenta de que cuando copie fuera de ahí, era mayúscula para las letras de este. No importa. Es insensible a mayúsculas y minúsculas. Simplemente haré que mi minúscula sea consistente. También puedo cambiar los nombres de mis familiares de fuentes para que sean minúsculas si quiero mantener eso consistente y luego guardar. Para que puedas ver, puedes mezclar todo tipo de valores. Se puede tener RGB, HSL, HSLA, hexadecimal. Cualquiera de los valores funcionará para estos colores. Guarda eso, refresca aquí. Ahora verás que tenemos algunos colores más en nuestra página. Bueno, ¿y si quiero cambiar todo nuestro color de texto a la vez? ¿ Y si quiero anular los estilos del navegador y hacer que todo en nuestra página sea de un solo color? Hay alguna manera de que pueda hacer eso además de solo apuntar a cada uno, el p, el H1, el H2? La respuesta es sí. ¿ No sería eso malo si la respuesta fuera no? No te preocupes, es sí. Entonces lo que podemos hacer es en lugar de definir nuestras propiedades en algo como nuestro párrafo o H1 o H2, tenemos algo más que podemos usar. momento acabamos de aplicar la propiedad de color a la etiqueta que ha estado rodeando este texto específico, pero tenemos otra etiqueta que está rodeando nuestro texto H1 o H2 o párrafo. Ese es nuestro elemento corporal. Al igual que nuestro H1 o H2, también podemos aplicar estilos al cuerpo. Entonces volviendo por aquí, por ahora voy a quitar nuestras propiedades de color. Entonces voy a añadir uno nuevo. Yo lo voy a agregar a la parte superior de la página, y eso va a ser para nuestros elementos corporales. Entonces ahora en el cuerpo, igual que cualquier otra etiqueta y en cualquier otro selector, puedo decir color. Entonces puedo usar una de nuestras palabras clave si quiero aquí, como verde. Voy a guardar y volver a Chrome, refrescar y ahora se puede ver menos los enlaces que están siendo controlados por los valores predeterminados del navegador y menos el texto en el logo, todo el texto es verde porque ha bajado en cascada a todos nuestros elementos. Entonces esa es una de las formas en que podemos usar la etiqueta body para aplicar estilos. Otra cosa para la que podemos usar la etiqueta body es para cambiar todo el color de fondo de nuestra página. Entonces ahora mismo tenemos este blanco realmente brillante y tal vez no queremos eso. Lo que podemos hacer es cambiar otra propiedad CSS, la propiedad de color de fondo. Queremos aplicar eso a nuestra etiqueta de cuerpo porque nuestro cuerpo sostiene toda nuestra página. Entonces sigamos adelante y hagamos eso. Entonces ahora usaremos una nueva propiedad, y esa propiedad es background-color: y luego al igual que pudimos usar nuestras palabras clave o valores RGB o hex, podemos hacer lo mismo para definir aquí un color de fondo. Entonces si quisiera, podría decir algo así como aqua. Seguro que todos se están imaginando lo bonito que va a quedar esto cuando lo guarde y lo refresque en el navegador. Cuando me refresco, cuida tus ojos a todos. Eso es algún diseño web brillante, pero como puedes ver, esto funcionó. Por lo que podemos usar nuestra etiqueta de cuerpo para controlar el aspecto general de nuestras páginas, y luego podremos anular más adelante si es necesario. En este caso, quizá queramos volver atrás y ajustar algunos de estos valores porque, bueno, se ve un poco fuerte. Digamos que quería volver a ponerlo en blanco. Bueno, tengo algunas maneras de hacer eso. Puedo usar nuestro valor de palabra clave, que es la palabra blanco. Podría usar un valor hexadecimal, como el número ffffff, que también es el valor hexadecimal para blanco. Podríamos usar un atajo, que solo sería fff. El valor RGB para esto sería 255, 255, 255. Como puede ver, hay muchas maneras diferentes de definir nuestros valores de propiedad. Depende de ti cualquiera que quieras usar. Por ahora, podríamos ponerlo en blanco. Pero si quieres algo tal vez un poco menos brillante, solo afina eso a un color blanquecino, en este caso el valor hexadecimal de efebdf, y puedes ver que eso es un poco más fácil en los ojos. También voy a cambiar el color de nuestro texto de verde a este valor hexadecimal de 27211f. Guarda eso, refresca, y ahora estamos de vuelta a un color más oscuro tradicional. Eso es un poco de negro. También cambiemos el color de nuestro H1 porque queremos que sea diferente a nuestro texto de cuerpo negro. Vamos a decir color, y vamos a añadir el valor hexadecimal aquí. Por lo que será e96f4b. Ahora nos va a dar un poco de como un salmón-ish, como un rojo rosado salmón, y ahora nos hará saber que este es un rubro más grande. También podríamos aplicar ese mismo color a nuestros H2s si queremos. Entonces, podemos copiar y pegar esto o reescribirlo. Simplemente copiaremos y pegaremos eso justo dentro. Ahora hemos ajustado los colores para muchos de los elementos de nuestra página así como nuestro color de fondo. Entonces así aplicamos los colores. Echemos un vistazo a la siguiente lección de transformar nuestro texto de maneras un poco más que solo los tamaños y las familias de fuentes que hemos utilizado hasta ahora. 11. Estilo de texto básico: Entonces, echemos un vistazo a algún otro estilo de texto que podemos aplicar a las palabras en nuestra pantalla usando CSS. Aquí está nuestra página Acerca y para nuestro Acerca de Jon, tenemos un encabezado, una imagen, y tenemos algo de texto. Bueno, vamos a cambiar un poco el texto. Por ejemplo, ¿y si queremos centrar nuestro rumbo? ¿ Y si queremos que About Jon aparezca en medio de la página? Bueno, podemos hacer eso. Para ello, estaremos usando nuestra propiedad text-align. Por lo tanto, nuestra propiedad text-align es text-align. Tenemos algunas propiedades diferentes para esto, pero como queremos nuestra línea de centro tecnológico, vamos a utilizar el valor del centro. Ahora, cuando refresco la página, se puede ver que About Jon ahora está centrado dentro de nuestra página web. Se puede aplicar text-align: izquierda o derecha o justificado también. Entonces, digamos que queríamos cosas a la derecha. Si sólo cambiamos eso a la derecha, ahora puedes ver nuestro texto está a la derecha. Voy a volver a poner eso al centro, y también voy a hacer todo nuestro h2 centrado también. Entonces, ahora todos nuestros encabezamientos que tenemos hasta ahora aparecerán centrados en la página. Entonces, ahorrando eso, y ahora puedes ver nuestro h1 y nuestro h2 están centrados en la página. Entonces, eso es text-align. También podemos tener una propiedad llamada text-decoration. El uso más común de texto-decoración es subrayar nuestro texto. Entonces, para aplicar text-decoration, es text-decoration y luego en este caso, vamos a decir subrayado para nuestro h1, y volver a ver cómo se ve esto en el navegador. Puedo ver que nuestro rubro tiene un subrayado. Hay algunos otros valores, algunos de los cuales son honestamente un poco más pegajosos que otros para este, como otros que usan a nuestro Inspector aquí para mostrarte algunos de ellos. Tenemos otras opciones como overline para línea por encima de nuestro texto, o tenemos línea a través, y eso proporciona algún texto tachado. Entonces, si alguna vez necesitas linea-through, overline, o subrayado, así es como harías eso. En este caso, volvamos a poner eso de nuevo para subrayar en nuestro Inspector aquí para que podamos ver cómo se verá realmente. Esta es otra propiedad que me gusta. Entonces, voy a seguir adelante y copiarlo a la h2 también. También contamos con una propiedad text-indent. Entonces, digamos que queríamos usar text-sangría para sangrar el inicio de todos nuestros párrafos. Podríamos hacer eso. Entonces, en este caso, diré text-sangría, y luego un valor como 20 píxeles. Guarda eso, refresca, y ahora puedes ver que mi texto de párrafo tiene sangría de 20 píxeles. Recuerda, esto también se aplica a mi copia de pie de párrafo también. El último que vamos a ver es text-transform. Text-Transform nos permite hacer cosas como hacer que nuestras letras sean mayúsculas. Entonces, podemos decir text-transform: mayúsculas. Guarda eso. Ahora cuando me refresco, nuestro h1 está todo en mayúsculas. Otros valores que tenemos para esto son minúsculas, que cambiarán todo nuestro texto a minúsculas sin importar cómo se tipee dentro de nuestro HTML, y también tenemos mayúsculas, lo que pondrá en mayúscula la primera letra, que sucedió para ser como lo escribimos dentro de nuestro HTML de todos modos. Entonces, no verás ninguna diferencia ahí. Entonces, hay algunas miradas de algunas cosas más que podemos hacer con nuestro texto y cómo podemos controlarlas en nuestra página. Echemos un vistazo a algunas cosas avanzadas en nuestras próximas lecciones, como el espaciado entre letras y la altura de línea. 12. Control de texto avanzado: Echemos un vistazo a nuestro texto de párrafo y hagamos algunos ajustes aquí. En primer lugar, vamos a deshacernos de este audaz, es un poco intenso y realmente no necesitamos eso para copia corporal en la página. Entonces, recuerda que o bien podemos hacer eso cambiando esto a font-weight normal pero por defecto, nuestro texto de párrafo era normal, lo que no vamos a necesitar eso. Entonces, solo podemos quitar esa regla por completo y ahora puedes ver que estamos de vuelta al texto de peso normal de Georgia. No obstante, encuentro que es un poco difícil de leer entre líneas y me gustaría separar esto un poco más. me gustaría añadir algo de aire. A menudo podría haber escuchado esto referido como arrendamiento, en CSS en lugar de tener una propiedad de arrendamiento, lo llamamos propiedad de altura de línea. Entonces, si sigo bajando a nuestros párrafos, puedo decir line-height y luego puedo ponerlo al valor que busco. Entonces, ahora mismo nuestro tamaño de fuente es de 20 píxeles, podría configurarlo en un valor de píxel como 40 píxeles. Si vuelvo aquí y refresco, se puede ver que la altura de la línea ha saltado mucho lo cual es bastante cool pero tal vez un poco demasiado. También podemos hacer valores sin unidad para la altura de línea. Entonces, si lo volvemos a poner a uno y nos refrescamos, se puede ver que estamos de vuelta a ser demasiado apretados. Puedo ponerlo en un valor como 1.5 y ahora puedes ver eso es mucho más fácil en los ojos, me hace más fácil escanear esto y poder leer estos párrafos en nuestra página. Entonces, me gusta 1.5, tal vez sea un poco, tal vez quiero ir a 1.4, eso es bastante bueno. Puedo leer esto con bastante facilidad y es realmente bueno sobre todo si tenemos mucho texto corporal. Entonces, voy a dejar mi altura de línea por ahora como 1.4. Pero siéntete libre de jugar con el valor de altura de línea y ajustarlo para que sea más hacia cómo te gustaría que tus lectores vean tu texto. Tenemos algunas otras cosas que podemos modificar cuando se trata de nuestro texto. Si recuerdas, hicimos nuestro About John encabezando todo mayúsculas. Cuando haces cosas todas en mayúsculas a veces que pueden ser un poco apretadas y difíciles de leer, entonces lo que podemos hacer, es que podemos ajustar los valores de kerning de esto, y el kerning es el espacio entre cada letra. No lo llamamos kerning en CSS, en cambio lo llamamos espaciado entre letras. Entonces, si vuelvo a mi h1, voy a aplicar una propiedad de espaciado entre letras y luego de nuevo puedo usar diferentes unidades de medida. En este caso voy a decir un píxel y eso aplicará un píxel de espaciado entre letras entre cada una de nuestras letras. Entonces, ahora refrescante, se puede ver que espacia un poco lo cual es un poco más agradable para nuestro rumbo. El último efecto texto propiedad CSS que vamos a ver hoy es el espaciado de palabras y al igual que suena, eso afectará el espacio entre nuestras palabras. Vamos a aplicarlo a nuestros párrafos porque tenemos unas palabras dentro de aquí. Entonces, espaciado de palabras y luego sólo para que podamos ver las cosas en acción, digamos 15 píxeles. Bueno, eso es mucho espaciado pero dependiendo de lo que intentes hacer tal vez eso sea en tu callejón, podrías volverte aún más loco por supuesto a diferencia de 115, wow eso no es fácil de leer en absoluto pero tal vez vas por algunos sitio web instalación art. Entonces, solo toma nota de que la propiedad está disponible para ti, voy a eliminar el espaciado de palabras porque quiero que el navegador lo renderice como lo hace por defecto lo cual es bastante fácil de leer pero es así como agregarías espaciado de palabras a tu sitios web. Entonces nos vemos bien aquí, notarás que una cosa que no se ha visto afectada en absoluto hasta ahora, son nuestros artículos de lista por aquí. Entonces, en la siguiente lección, veamos algunas de las cosas que podemos hacer para cambiar las propiedades de nuestra lista. 13. Propiedades de la lista: Entonces, mirando los artículos de nuestra lista, queremos darles algo de amor también. En este momento solo tienen el estilo predeterminado del navegador. Podemos echar un vistazo a cualquier cosa que se les aplique hasta ahora. Entonces, puedes ver por aquí que sí tienen el color del cuerpo pero eso es todo. Entonces, cambiemos eso porque queremos que también consigan algo de amor, y al igual que somos capaces de seleccionar nuestros párrafos, nuestro cuerpo, y nuestros encabezados, podemos hacer lo mismo con nuestros elementos de lista. Entonces, echándole un vistazo a eso, nuestros servicios profesionales es un ul marcado con li's. Entonces, lo que podemos hacer es usar el elemento li como nuestro selector y darle estilo en consecuencia. Voy a ir a preguntar el final de nuestra página. Yo sólo voy a hacer algunas devoluciones extra solo para que veas lo que estoy escribiendo fácilmente aquí arriba, y aquí voy a escribir li, y luego voy a escribir color, y vamos a retocar un poco el color. Hagámoslos 666 que es un gris medio. Entonces, ahí está nuestra primera lista cambia, y se puede notar que el texto y la viñeta que aquí vemos se ajustaron para ser ese color gris. También notarás que las balas en nuestra lista desordenada de navegación también cambiaron a gris porque eso también es un elemento li. También cambiemos la fuente aquí. Vamos a configurar la familia de fuentes para que sea Georgia, y vamos a establecer el tamaño de la fuente en 16 píxeles. Tamaño de fuente 16 píxeles. Eso vamos a guardar, y ahí está nuestra lista actualizada. Pero, ¿qué pasa con estas balas? ¿ Y si realmente no me gustan estos artículos? Bueno, también podemos cambiar eso con nuestra propiedad de tipo list-style-type. Entonces, para cambiar las balas, diremos list-style-type, y luego podremos cambiarlo a una variedad de opciones diferentes. Entonces, por defecto, es un disco. También podemos cambiarlo a círculo, y ahora se puede ver son círculo sin llenar. También hay opciones de cosas como cuadrada, y ahora tenemos balas cuadradas. Si no quieres balas puedes tener eso también, y para hacer eso dirías ninguna, y ahora no tenemos balas. Pero por ahora pongámoslo de nuevo a la cuadra, porque es de cadera ser cuadrado y el mundo de Jon Arbuckle y en todos los nuestros. Entonces, ahora tenemos elementos de lista cuadrada. Si estás usando una lista ordenada, es posible que también quieras cambiar la viñeta por eso. Entonces, solo para poder mostrarles cómo se ve eso, temporalmente, voy a hacer de esto una lista ordenada. Entonces, para hacer eso solo cambiamos esto a un ol, vuelvo aquí y me refresco. Todo debería parecer igual en este momento, porque en lugar de peinar el ul, le peinamos el li y el li's también están en ol's. Pero ahora vamos a cambiarlo. Entonces, recuerda que si me quité esto por defecto, las listas ordenadas tienen números. Entonces en este momento tenemos decimal de tipo list-style-que es lo que son las cosas por defecto con una lista ordenada, pero también podríamos decir algo así como decimal-leading-zero, y si volvemos aquí se puede ver que agrega un cero antes de nuestra números, también tenemos otras opciones para lista ordenada como bajo-alfa, y ahora nuestra lista ordenada está alfabéticamente con viñetas. También podríamos decir bajo-romano, y ahora tenemos números romanos más bajos para nuestras listas. Entonces, puedes ver que hay muchas opciones para esto. Voy a volver a poner esto en cuadrado, y luego también voy a volver a poner mi página sobre a una lista desordenada porque en este caso estamos escribiendo una lista desordenada, y guarde eso. Entonces, eso es un poco más sobre las listas, y en la siguiente lección echemos un vistazo a las imágenes de fondo y cómo podemos empezar conseguir más imágenes en nuestra página usando CSS y no solo la etiqueta de imagen. 14. Imagen de fondo: Nuestro sitio se ve bien con este fondo blanco apagado pero digamos que queremos ponernos un poco más interesantes. Pongamos algunas imágenes más a nuestra página. A lo mejor queremos una imagen para nuestro fondo de nuestra página web. Entonces, vamos a conseguir uno de esos y podemos enlazar a imágenes de la misma manera que lo haríamos en HTML con una ruta absoluta o una ruta relativa. Digamos que quiero exhibir alguna obra de John y voy a exhibir esta imagen y la quiero en el fondo de nuestra página. Bueno, puedo ver imagen y puedo agarrar el link desde aquí y luego vamos a añadirlo a nuestro sitio web con CSS. Hasta el momento, acabamos de aplicar una propiedad de fondo y ese ha sido nuestro color de fondo pero tenemos otros valores y propiedades que podemos ajustar para nuestro fondo también, empezando por la imagen de fondo. Para poder escribir una imagen de fondo, vamos a escribir imagen de guión de fondo y luego a partir de ahí, vamos a tener que decirle al CSS dónde está esa imagen, y eso lo hacemos escribiendo URL y luego entre paréntesis, nosotros tendrá la URL de la que estamos tratando de enlazar. Esa puede ser una ruta local o arelativa o, en este caso, vamos a enlazar a una ruta absoluta, un archivo de imagen que existe en otro lugar de Internet. Entre comillas, pegaré este Wikimedia Garfield y Friends PNG, voy a guardar el archivo, y luego echémosle un vistazo en el navegador. Aquí estoy, y voy a refrescar la página y wow. Pensaba que antes estábamos ocupados pero ahora las cosas se han ido a una fiesta de imagen seria. Como pueden ver, tenemos la imagen aquí dentro y la imagen de fondo se está repitiendo en todo nuestro sitio. No importa lo grande o pequeño que sea esto, podemos ver que la imagen de fondo está a lo largo de nuestro sitio web. Podemos ajustar cómo esto se está repitiendo con otra de la propiedad CSS, la propiedad de repetición de fondo. guión de fondo se repite y luego los valores que tenemos son el predeterminado que se está repitiendo, sin duda podemos decir que es lo que está pasando ahora. Entonces otra cosa que tenemos es que no se repita. Entonces, si cambiamos esto a no repetir, regresamos y refrescamos, se puede ver que la imagen está solo en la página en segundo plano una vez. Debido a que está en imagen de fondo, todo el texto se sentará encima de esto. Los fondos por defecto también comienzan en la posición izquierda, una posición de fondo de 0,0 que va desde los valores de izquierda y superior. Podemos ajustar eso también mediante el uso de nuestra propiedad de posición de fondo. Entonces, posición de guión de fondo y luego actualmente, es 0,0, lo mismo que decir cero píxeles, cero píxeles. Podemos cambiar esto para que sean algo así como 20 píxeles de la izquierda y 100 píxeles de la parte superior y ahora se puede ver que se ha movido de la izquierda 20 y del top 100. También podemos usar valores de palabras clave para esto por lo que podríamos decir algo como centro, centro. Ahora, verás que la imagen está centrada vertical y horizontalmente en función del ancho y la altura de nuestra página. También podríamos decir algo así como centro, top y ahora se puede ver que está centrado desde la parte superior de nuestra página. Podemos mezclar valores, así que algo así como centro y 30 píxeles y que se centrarán a la izquierda y a la derecha pero luego a 30 píxeles de arriba. Diferentes valores de repetición que tenemos son repetición sin repetición, repite guión X, y luego se repetirá a lo largo del eje X, y luego tenemos guión repetido Y que, como se podría adivinar, se repetirá a lo largo del eje Y así a través de la parte superior de nuestro página. Esto está bastante ocupado y un poco difícil de leer así que tal vez queremos un tipo diferente de imagen de fondo. A lo mejor queremos sólo una sutil imagen de fondo, tal vez un patrón de ruido tal vez. Podríamos hacer eso, es un programa como Photoshop en el que acabo de aplicar una ligera pixelación de ruido a un color de fondo, entonces puedo guardar este archivo. Entonces, voy a guardar esto como un JPG y puedo bajar la calidad algunos y eso. Simplemente voy a guardar eso justo en mi carpeta de imágenes y lo voy a llamar bg-noise.jpg. BG solo para mí, me deja saber que es una imagen de fondo y es un patrón de ruido. Voy a guardar eso dentro de nuestra carpeta del sitio John Arbuckle, dentro de nuestra carpeta de imágenes. Ahora, en nuestro CSS, hay un post que vincula a esta imagen absoluta lo cual es bueno porque realmente no deberíamos estar vinculando al contenido de otras personas por razones de copyright y/o porque podrían quitarlo como lo hemos hecho ningún control sobre su enlace a Wikimedia por lo que siempre podrían cambiar esa extensión de archivo o eliminarla. Entonces, asegurémonos de que estamos hospedando nuestros propios archivos. Para hacer una URL de imagen de fondo, esencialmente queremos hacer lo mismo que si estuviéramos vinculando a una imagen dentro de nuestro atributo de fuente de imagen. Actualmente, en este momento, estamos en styles.css. Vamos a tener que ir a nuestra carpeta img y luego cargar el bg-noise.jpg. Tenemos que entrar a la carpeta img y luego para entrar en una carpeta, escribiremos nuestro /bg-noise.jpg. Cuando guardo eso y vuelvo a Chrome y refresco bien, así podemos ver que nuestra imagen de Garfield se ha ido y es realmente difícil de ver aquí pero puedes ver, si te ves muy de cerca, que en medio de la página, ahí es este ruido de fondo repitiendo Y. Cambiemos eso porque no queremos que solo repita Y. Porque este es un patrón de fondo, queremos repetir ambos sentidos. Entonces, guardaré eso y repetiré. Ahora, puedes ver que tenemos un ligero patrón de ruido en la parte trasera de nuestra página web. Puedes usar cualquier tipo de patrones como este, diagonales, rayas, círculos, cualquiera que sea tu patrón de fondo favorito para agregar. Si te gustan las imágenes de fondo ruidosas, quédate con eso también. Pero así es como vamos a añadir un patrón de ruido o cualquier tipo de imagen de fondo en absoluto a nuestras páginas. Hasta ahora, realmente acabamos de mirar nuestra página sobre, veamos cómo nuestro CSS está afectando al resto de nuestras páginas y veamos cómo podemos hacer ajustes en el futuro para artículos específicos. Eso se acerca en la siguiente lección. 15. Agregar archivos CSS en todo nuestro sitio: Hasta ahora realmente sólo hemos mirado cómo los estilos han estado afectando nuestra página sobre. Pero recuerda que estamos aplicando nuestras hojas de estilo en cascada en todo el sitio. Por lo que necesitamos ver qué le está haciendo a nuestras otras páginas. Entonces aquí está nuestra página de inicio, y podemos ver que los estilos han venido aquí también junto con sangrías de texto, centrar, subrayar en nuestros h2's, todos estos están afectando nuestro contenido en todo el sitio. Aquí está nuestra página de trabajo, y por último nuestra página de contacto. Entonces, empecé a mirar esto tal vez nos damos cuenta de que necesitamos hacer algunos ajustes globales. A lo mejor el centrado no está funcionando, mejor la sangría de texto no está funcionando. A lo mejor queremos hacer algunos ajustes y de hecho centrar nuestro rumbo. A lo mejor queremos centrar esa imagen del logotipo. ¿ No sería bueno si pudiéramos deshacernos de esas balas encima de nuestro trabajo o de nuestro contacto sobre, o al menos hacerlas aparecer uno al lado del otro en lugar de como esa lista? Bueno, podemos hacer estas cosas. Una forma en que podemos hacer esto, es aplicar nuestro text-align globalmente a lo largo de todo nuestro sitio. Entonces, en lugar de simplemente aplicarlo a nuestro h1, ¿y si aplicáramos nuestro centro text-align a nuestra etiqueta de cuerpo? Entonces, guión de texto alinear, luego ayuda a deletrear alinear correctamente, y luego centrar. Ahora puedes ver cuando hago que todo en esta página está centrado, refrescando las otras páginas también verás que sucede, y ahí está ahí, y ahí. Se puede ver que esto se ve un poco divertido alrededor de algunas cosas en las otras, así que tal vez no queremos hacer eso en todo el sitio. También te darás cuenta de que cuando centramos cosas como los artículos de nuestra lista, algunas balas se dejan todo el camino a la izquierda, y eso se ve un poco raro. Parece que lo que necesitamos es un poco más de control sobre las cosas. Claro, podemos entrar y decir bien todos Li vamos a alinearlos a la izquierda, y podemos hacer eso solo sobrescribiendo. Entonces, decimos text-align a la izquierda, y luego esos retroceden pero eso tampoco es realmente una solución a esto. Lo que necesitamos hacer es controlar cosas individuales como la lista de navegación por separado que otras listas de nuestra página, o el encabezado y el logotipo del encabezado de manera diferente a nuestros otros encabezados. Vamos a poder hacer eso usando algunos otros selectores CSS de los que aún no hemos hablado, ID, selectores de clase, y selectores descendientes. Entonces, echemos un vistazo a cómo podemos arreglar nuestro sitio para tener aspectos un poco más únicos a lo largo de él, en la siguiente lección. 16. Otros selectores de CSS: Entonces, en lugar de aplicar este centro text-align globalmente, queremos aplicarlo a nuestra imagen de logo. Entonces, volvamos a nuestro CSS y eliminemos el centro text-align. En cambio, lo queremos solo en nuestra imagen de cabecera. Entonces, hasta el momento, en este momento, sólo hemos mirado a selectores de elementos. Eso significa que si queremos centrar esto, esencialmente tenemos una imagen y una A con la que trabajar. obstante, vamos a querer más que eso. Vamos a querer apuntar sólo a este enlace o simplemente a esta imagen. La otra cosa que vamos a querer hacer para text-align, es envolver con hasta ahora es este elemento en línea. Recuerda que hablamos tanto de elementos en línea como de bloque en nuestra clase html y los enlaces de anclaje y las etiquetas de imagen son ambos elementos en línea, lo que significa que aparecerán en la misma línea, a diferencia de los elementos de bloque que harán un retorno de línea dura. Para alinear texto-cosas centrales, necesitamos aplicar a un elemento a nivel de bloque. Entonces, vamos a seguir adelante y vamos a anidar este ancla dentro de una etiqueta de párrafo. Entonces, vamos a agregar algún html. Entonces, P y luego tu P. de cierre Encontrarás que al agregar CSS a una página, a veces es necesario volver atrás y agregar elementos contenedor a tu html para poder darle estilo a las cosas correctamente. Tratamos de evitar esto tanto como sea posible, pero a veces vas a necesitar cosas como esta. Entonces tenemos este párrafo que ahora sostiene nuestro ancla y nuestra imagen. Volviendo a Chrome, recuerda que nos quitamos las cosas. Entonces, ya no tenemos alineamiento de texto en esta área, sólo tenemos un párrafo que lo rodea. Entonces, lo que queremos hacer es básicamente text-align centrar ese párrafo. No queremos hacerlo para todos los párrafos porque entonces cada párrafo de la página estará alineado en el centro. Lo que podemos hacer es usar una clase. Un selector de clases nos permite apuntar a uno o más elementos específicos con un atributo de clase sobre él. Para aplicar una clase, simplemente agregaría otro atributo. En este caso, diremos que clase es igual y luego el nombre de lo que estamos tratando de hacer. En este caso, vamos a decir clase igual logo. Queremos nombrar cosas, cosas con significado semántico. Entonces, cosas que en realidad tienen sentido para lo que estamos tratando de hacer. Este párrafo está sosteniendo nuestro logotipo, por lo que tiene sentido que llamemos a esto una clase de logotipo, a diferencia de una clase de, como, cara de elefante, que no tendría nada que ver en absoluto con lo que estamos haciendo y que simplemente sería confuso para ti, tus compañeros de equipo, cualquiera que tropezó con esto. Entonces, vayamos con algo que le tenga sentido. Entonces, algo así como clase equivale a logo. Ahora en nuestra hoja de estilos, podemos aplicar estilos a esa clase. Entonces, lo que podemos decir es.logo, porque así hacemos una clase. Entonces al igual que haríamos cualquier otro selector, nuestras llaves, y luego dentro de eso, vamos a aplicar nuestra declaración. Entonces, text-align center. Entonces, cualquier cosa con una clase de logotipo estará centrado en text-align. Cuando vuelvo y hago clic en refrescar, no ha pasado nada. No ha pasado nada porque no guardé mi página de contacto actualizada. Entonces, déjame asegurarme de guardar eso, y lo reconocí porque el círculo estaba aquí. Vuelvo a nuestro contacto, hago clic en refrescar, y ahora la imagen está centrada porque nuestro párrafo con la clase de logo tiene text-align center aplicado al mismo. También puedes aplicar la clase de logotipo a otra cosa, como este párrafo aquí. Ahora, ese párrafo se centrará porque también tiene una clase de logotipo. Del mismo modo, los selectores de clase son selectores de ID. Los identificadores son muy similares a las clases en que decimos ID es igual como un atributo con el nombre del mismo, igual que si quisieras nombrar algo ID es igual a logo. Dos de las diferencias son en lugar de hacer.sintaxis, para decir que si una clase, usamos una libra o un hashtag para decir que estamos haciendo un selector de ID. Solo se puede tener un DNI en una página. Debido a esto, puede ser una especie de limitante si decides que quieres reutilizar esto para otra cosa. Tiendo a usar clases porque son más reutilizables y son más fáciles para el procesamiento del navegador. Pero, si ves una identificación en la página o si tomas el código de otra persona y notas los identificadores, es importante saber qué están haciendo. Por ahora sin embargo, nos vamos a quedar con el uso de clases. Apliquemos algunas clases más. Entonces, vamos a centrar también estos elementos de navegación. Podemos hacerlo aplicándoles una clase. Vamos a aplicar una clase aquí de nav, para navegación. Recuerda, necesitan ir entre citas que acabo de hacer mal, y pude fácilmente detectarlo porque no estaba cambiando a amarillo. Entonces, clase igual cotización nav, fin de cotización. Ahora tenemos una clase para apuntar a esta UL específica para que no tengamos que tener los estilos que queremos para nuestra navegación en otras listas más generales y desordenadas dentro de nuestro documento. Entonces, ahora en nuestro CSS, vamos a hacer otro selector de clases, el selector de navegación porque eso es lo que acabamos de nombrar a nuestros elementos de navegación. Fui con nav en lugar de navegación sólo porque era un poco más corto y más fácil escribir, pero todavía bastante claro a qué me refería. Entonces, aquí de nuevo, puedo decir text-align center. Vuelve a aparecer al navegador, actualiza, y no está funcionando. No está funcionando porque tal vez recuerden, escribí específicamente text-align a la izquierda sobre nuestras LI. Queremos eliminar eso porque todo se ha vuelto a ajustar text-align a la izquierda ahora. Veremos un poco de por qué eso está sucediendo en la siguiente lección, pero hasta entonces, cambiemos esto a text-align center. Pero de nuevo, tenemos el problema con las balas. Bueno, ¿qué tal si solo quitamos esas balas porque no las queremos, quizá, en nuestra navegación principal. Recuerda, podemos hacer eso con nuestro estilo de lista. Entonces, lista, estilo, escriba ninguno, entonces, y fuera de nuestra navegación, tenemos un centro text-align y un list-style-type none. Vuelvo aquí. De nuevo, nos hemos topado con el problema de nada ha cambiado. Esto se debe a que en realidad tengo el tipo de elemento de lista cuadrado justo en un elemento LI, y el LI está más cerca que el UL a nuestro texto real. Entonces, vamos a tener que anular eso también. Cómo hacemos eso es mediante el uso de algo llamado selector descendiente. Un selector descendiente apunta a un elemento dentro de otro elemento. Entonces, podríamos decir algo así como todos los anclajes dentro de etiquetas P y apuntarlo diciendo P, espacio, A en nuestro CSS. Eso haría que todos los anclajes dentro de mis etiquetas de párrafo fueran el color rojo. Te apuntas con un espacio entre ellos. Si escribieras P y A sin espacio, obtendrías PA y luego el CSS estaría buscando un elemento PA, cual no es una cosa. Entonces, esencialmente, dice cualquier anclaje dentro de un párrafo, vamos a aplicar el estilo a. Bueno, también podemos mezclar clases y elementos para nuestros selectores descendientes, así que lo que podemos decir en este caso, es cualquier LI dentro de nav, y luego en lugar de poner este list-style-type ninguno aquí arriba, queremos mover ese aquí. Entonces, ahora tenemos encontrar algún LI's dentro de una clase nav y luego eliminar el estilo de lista. Entonces, ahora cuando volvamos por aquí, verás que esas balas ya se han ido porque específicamente hemos anulado el estilo LI con el nav LI. Es así como usarías un selector descendiente. Entonces, hagamos otra cosa con nuestro elemento de navegación. Todos nuestros enlaces aparecen como elementos a nivel de bloque porque un elemento de lista en LI es un nivel de bloque. Eso significa que tenemos el duro retorno uno tras otro. ¿ Y si queremos que aparezcan uno al lado del otro? Bueno, al igual que cómo podemos decir que las cosas son bloqueadas o en línea basadas en los valores predeterminados del navegador, podemos anular esas también. Entonces, en este momento, por defecto, nuestros artículos LI son todos bloque de visualización. Display es otra propiedad CSS y una de las cuales podemos anular. A pesar de que, al igual que nuestra lista tenía balas por defecto, podemos anular esas, también podemos anular la pantalla. Entonces, en lugar de bloque de visualización, hagámoslos mostrar en línea. Ahora, cuando regrese al navegador y toque refrescar, se muestran en línea al igual que nuestras etiquetas m, o nuestras etiquetas de anclaje, o nuestras etiquetas de imagen. Entonces, eso es otra cosa que puedes anular con tu CSS. Entonces, cambiar las cosas desde inline o block es algo más que podemos controlar con nuestro CSS. Otro selector que tenemos es el selector universal. El selector universal selecciona todo en la página. Para ello, utilizamos un asterisco. El asterisco dice aplicar este estilo a todo. Entonces, si quisiéramos hacer la decoración del texto superpuesta en todo, utilizaríamos el selector universal. Nosotros refrescamos eso, y luego, igual que pedimos, para bien o para mal, están nuestra decoración de texto sobre línea en todos nuestros elementos. Entonces, así usarías el selector universal. Vimos que nos topamos con algunas cosas que pueden ser inesperadas. Cosas con herencia y cascada. En la siguiente lección, veamos un poco más sobre esa cascada y hojas de estilo en cascada y veamos cómo funciona. 17. La cascada: Entonces, en nuestra última lección, vimos cómo aún estamos por usar selectores descendientes para conseguir más específicos con nuestros estilos para asegurarnos de que nuestros ítems de lista estaban obteniendo los estilos que queríamos. Esto es lo que se conoce como especificidad así como herencia y la cascada. Todas estas son formas de las cuales cuando estemos usando CSS, afectarán los estilos que se apliquen a nuestras páginas. Entonces, echemos un vistazo a algunas de las cosas que pueden suceder. Deshaznos de este overlying que tenemos en nuestro selector universal, eso es un poco extraño. Simplemente no usemos eso para nada. Entonces adiós a eso. Ahora, hablemos un poco de cómo se están aplicando las cosas a nuestra página. Ahora mismo, nuestro colon se está aplicando a nuestra etiqueta corporal, y eso está bajando en cascada al resto de los elementos. Cosas como nuestros párrafos están anidados dentro de nuestro cuerpo lo que significa que está heredando el estilo del cuerpo. Cualquier cosa que esté anidada dentro de otro elemento, asumirá esos estilos para cosas como el color. Entonces, ya que estamos diciendo que el color del cuerpo es 27211f, el párrafo también obtiene ese color. Esto es lo que se conoce como herencia. Lo que vamos a hacer si quisiéramos cambiar el color del párrafo para que sea otra cosa, es que tendríamos que usar la especificidad para decir que un párrafo debe ser de un color diferente. Entonces, ahora mismo, está este color negro oscuro. Vamos a refrescar eso, deshazte de ese gris. Pero, ¿y si sólo quisiéramos que nuestros párrafos fueran verdes? Bueno, si ponemos color verde, lo que sucederá es que los párrafos serán verdes. Echemos un vistazo a nuestro inspector y veamos qué está pasando. Esencialmente, cuando se carga la página, el equipo pasa realmente rápido y comienza en la parte superior de nuestro documento CSS. Entonces, lee la primera regla, que se aplica al cuerpo y dice “Está bien, hagámoslo todo de color negro”. ¿ Eso realmente rápido? Ni siquiera podemos ver lo que está pasando para cuando vaya a nuestra etiqueta de párrafo y diga “Está bien, espera, ahora dice hacer todos los párrafos verdes”. Entonces, cambia del color del negro a este color de verde anulando la etiqueta del cuerpo. Podemos ver en nuestro Inspector aquí donde dice “P color verde”. Si te desplazas hacia abajo, en realidad vemos el color del cuerpo gris y se está alineando. Se está alineando porque está siendo sobrescrito por la especificidad del color verde que se aplica a nuestras etiquetas de párrafo. Entonces, puede mostrarte cómo la especificidad está afectando los estilos que se aplican a nuestro texto. Esto es realmente importante si quieres saber qué está pasando. A lo mejor esperas que esto sea negro, pero termina siendo verde. Este Inspector nos permite una forma rápida de ver cómo se están aplicando realmente los estilos. ¿ Qué pasa si cambiamos nuestro párrafo y nuestro cuerpo. Entonces, ahora mismo, cuando hablamos de esa cascada, dijimos que fue de arriba a abajo. Entonces, primero decía, “hacer todo negro”, luego dijo, “hacer verde todos los párrafos”. Si tendemos a decir esto, ¿crees que son párrafos serán verdes o negros? Volvamos atrás y averiguarlo. Se puede ver que todavía están verdes. Aquí hay algunas cosas en juego. En primer lugar, sí los hizo negros porque eso está en la etiqueta del cuerpo. Pero además de simplemente ir de arriba a abajo, la otra cosa que es importante cuando se trata de CSS, es lo cerca o específico que es el elemento al que estamos apuntando. Entonces, debido a que el cuerpo es el padre del párrafo y la etiqueta de párrafo que se está definiendo como verde está más cerca del texto real, el estilo que se leerá será lo que se está aplicando más cerca de los elementos. En este caso, el estilo de párrafo verde está más cerca del texto de la página que del cuerpo. Entonces, otra cosa de la especificidad es que los estilos aplicados a su elemento contenedor más cercano será el que se aplicará al texto. Esto definitivamente es un poco complicado. Hay unos artículos que pondré en los recursos para el seguimiento. A veces honestamente, jugar con esto y ver cómo el orden afectará tu código, es una de las mejores cosas que puedes hacer. Ahora mismo, vemos que todavía tenemos esta clase p de logo aplicado a nuestro texto por aquí, y eso se está volviendo verde por supuesto porque nuestros párrafos son verdes. ¿ Qué crees que pasará si decimos que el logotipo debe ser rojo? Bueno, vamos a averiguarlo. Color rojo y ahora cuando nos refresquemos, se puede ver que ese específico se sobrescribirá con rojo. Por lo que se puede ver que trató de conseguir el color verde pero el logotipo oscuro tenía más de poder inherente que la etiqueta de párrafo. Entonces, primero, era este negro luego era verde. Pero la clase oscura tuvo más impacto en el estilo. Se puede ver en este artículo práctico, hablamos de mayor valor de especificidad y menor valor de especificidad. Atributo de estilo, luego ID, luego una clase, luego un elemento, es cómo funciona. Se puede ver que aquí hay una especie de sistema de puntos. Entonces, las cosas tienen estilo en línea o identificaciones o clases, cómo se determinará eso qué estilo tomará. Te recomiendo encarecidamente leer este artículo y también simplemente volver a jugar y ver cómo los diferentes estilos, clases, y orden afectarán a los elementos de tu página. Te prometo que cuanto más trabajes en esto, más te acostumbrarás a esto y todo empezará a tener sentido. Veamos cómo podemos agrupar selectores en nuestra próxima lección. 18. Agrupación de selectores: Entonces, siempre queremos escribir CSS eficiente y código en general. Volvamos atrás y limpiemos un poco nuestro CSS, y asegurémonos de que todas nuestras páginas estén buscando como queremos que lo hagan. Entonces, recuerda que aplicamos el párrafo con una clase de logo alrededor de nuestro logo pero todos lo hicimos en nuestra página de contacto. Entonces, volvamos atrás y actualicemos nuestro HTML para asegurarnos de que todas nuestras páginas tengan ese mismo texto. Voy a agarrarlo de la página de contacto, conseguir una copia, y luego sólo voy a actualizar toda esta línea. Guardar, guardar y guardar. Es un poco tedioso, pero sabemos exactamente lo que necesitamos agregar, así que asegurémonos de actualizar esas cuatro páginas. También recordamos, estamos echando un vistazo a la clase de logo. Realmente no queremos que aparezca ahí la clase de logo. Entonces, vamos a deshacernos de eso. Entonces, quitemos esta clase de logo. Ahí vamos. También nos quedamos con estos párrafos verdes, que realmente no queremos. Entonces, nos tomamos un poco mirado a la herencia, vamos a deshacernos de ese rojo, y vamos a deshacernos del verde, que está aquí arriba. Está bien. Entonces, las cosas se ven un poco mejor que como eran. Entonces, notarás que me acordé de actualizar el encabezado pero también actualizamos la navegación, ¿verdad? Yo no hice esa actualización cuando hice ese cambio. Por lo tanto, tenemos que asegurarnos de que estamos agregando la clase UL de nav a todas nuestras ULs. Te darás cuenta de que mucho HTML y CSS pueden parecer un poco tedioso, pero una vez que descubras qué estás haciendo un poco más, podrás ver estos bloqueos que salen mucho. Cosas como la solución de problemas, y cosas como olvidarse copiar cosas se volverán mucho más naturales. Por lo que, actualmente, notarás que nuestros H1's y nuestros H2's ambos tienen un subrayado texto-decoración. También se centran en la página. Cómo lo hemos hecho hasta ahora es repitiendo propiedades y valores CSS. Hemos estado repitiendo declaraciones entre aquí y aquí. Entonces, en este, teníamos el color era el mismo en color. También comparten font-weight normal, su font-family, su centro text-align y su subrayado texto-decoración. Seguramente, tiene que haber una forma más eficiente de escribir esto. De lo contrario, probablemente no estaría hablando contigo al respecto. Pero yo soy así que digamos que sí. Si queremos aplicar los mismos estilos a dos elementos diferentes, ya sea que conjuntos de un selector de elementos, un selector de clases, un selector de ID, cualquiera de eso podemos hacer eso. Cómo hacemos eso con una lista separada por comas de selectores. Entonces, H1, H2 y luego llaves. Esto significa que tanto el H1 como el H2 recibirán lo que ponga aquí. En este caso, podría quitar color de ambos y simplemente enumerar a esa propiedad allá arriba. También podría quitar el texto-decoración subrayado desde aquí así como desde aquí y también la text-decoración, la font-familia y el font-weight se están repitiendo todos. Entonces, déjame cerrar eso. Ponga eso ahí. Deshazte del font-weight, la font-family y el text-align. Ahí se puede ver todo lo que se estaba aplicando a H2 en realidad se aplicó a nuestro H1. Entonces, de manera más eficiente, podría haber escrito esto, pero no lo sabía hasta que pasamos por este experimento y tal vez todos quieren anular algo en un H2 aquí. Entonces, dejemos eso tal como está, guardemos y regresemos y puedo ver que las cosas se ven exactamente igual porque estamos aplicando los mismos estilos de una manera más eficiente. También podemos decir algo así como fondo de color púrpura. Ahora, se puede ver que el morado se está aplicando tanto a nuestro H1 como a H2 demostrando que esto efectivamente está funcionando. Entonces, digamos que teníamos eso, digamos que también queremos aplicarlo a nuestros H3s. Podemos simplemente mantener lista separadora de comas, para que todos nuestros encabezados obtengan al menos este azulejo base. Entonces podemos anular. Entonces, digamos que en realidad no queremos que el color de fondo del H2 sea morado. Podemos decir que queremos que sea amarillo. Si guardamos eso, lo que hará el navegador, pasaremos y diremos que hagamos el fondo morado y luego recordemos la cascada. Entonces, golpea esto primero y luego golpea esto. Entonces, si refresco es amarillo. Si paso a este H2 arriba, ¿va a ser morado o amarillo? Va a ser morado. Escribir esto es lo mismo que escribir esto. Ignora todas las demás comas, así que es justo lo que alguna vez quisiste como primero. El cascada va de arriba a abajo y dice H2 morado primero, y luego amarillo H2. Así funciona eso en cuanto a agrupar selectores. Puedes usar esto donde te resulte más eficiente poder aplicar el mismo estilo a un grupo de selectores. Deshaznos de algunas de estas palabras clave que tenemos aquí porque realmente no necesitamos que nos metan los ojos. Descentremos también nuestro rumbo. Nuestros encabezamientos centrados pueden ser un poco de distracción con la mayor parte de nuestra tecnología. Entonces, quitemos eso de nuestro rubro general, y ahora movemos las cosas de vuelta a la izquierda. Deshacernos también de esta transformación de texto en nuestra H1. Es un poco de gritarnos. No creo que realmente necesitemos gritar sobre John a nadie. Eso está un poco más bajo control. Entonces, nuestra página Acerca se ve bien ahora. Menos gritos, es un poco más fácil escanear y leer con todo lo que queda alineado con el CSS que hemos hecho hasta ahora. Nuestra página de contacto se ve bastante bien y fácil de leer. Echemos un vistazo a cómo se ve nuestra página de inicio. Entonces, se ve bien. A lo mejor podemos hacer algunos ajustes aquí y allá. A lo mejor sí queremos centrar nuestro rumbo en nuestra página de inicio, tal vez queremos centrar nuestra imagen y H1 en nuestra página de inicio. Entonces, hasta el momento tenemos una clase para hacer eso. Esa es nuestra clase de logo excepto nuestra H1 y nuestra imagen de héroe no es realmente un logotipo. Entonces, si queremos volver a aplicar esta clase de logotipo a otras cosas, pongámosle un nombre un poco más semántico. A lo mejor podemos nombrarlo algo así como destacados mostrando que estamos usando este estilo para resaltar esta información. Tiene más sentido porque ahora no sólo lo estamos aplicando a nuestro logotipo. Por supuesto, la computadora leerá esto simplemente bien tanto si lo llames logo o resalte. Pero será más fácil para nosotros como humanos entender nuestras intenciones cuando nos topemos con algo como esto. Si entregues esto al cliente o compañero de equipo, si ven algo como resaltar, les tendrá más sentido por qué estás haciendo esto y qué guía de estilo estás tratando de proporcionar nombrando algo de esta manera. Entonces, cuando vuelva a nuestras páginas y recuerde quitamos la clase de logo. Entonces, tenemos que actualizar lo más destacado. Eso lo vamos a hacer todo, más destacado es palabra divertida a escribir. Entonces eso está bien, resalte y ahora también lo aplicemos en nuestra página de Índice. Para H1, podemos hacer clase igual resaltar y luego vamos a añadir otro de esos párrafos destacados alrededor de nuestra imagen. Por lo tanto, la clase P es igual a resaltar. Recuerda, necesitaremos esto para centrar esto y luego cerrar esta etiqueta de párrafo. Ahora, puedes ver que la parte superior de nuestra página de inicio tiene muchos más elementos centrados y hace que se vea un poco más como un área de página de inicio. De antemano, CSS, por supuesto podrá hacer más ajustes a esto. Pero por ahora, nos vemos bastante bien con nuestros estilos de texto y nuestros estilos de alineación. A lo mejor también queremos cambiar los estilos para blockquote para reconocer que es algo diferente. Hagamos eso también. Entonces, bajo nuestro último elemento, voy a mantener nuestras clases un poco separadas de ahora. Voy a escribir blockquote y aquí voy a cambiar el estilo de fuente a cursiva. Vuelve aquí y ahora puedes ver que nuestro estilo de fuente es cursiva lo cual es algo común que verás cuando se trata de cotizaciones. Pero probablemente no queremos que la Dra. Liz Wilson sea una cotización. Entonces, cambiemos eso y podemos hacerlo. Eso está en nuestra página de inicio y somos capaces de apuntar a este blockquote P, no podemos usar el selector de frases, ¿verdad? Porque eso va a conseguir ambos Ps, podemos aplicar otra clase. Básicamente, estamos diciendo quién es este que dijo esta cita. Entonces, hagámoslo sólo una clase de quién. Volver a nuestro styles.CSS justo bajo blockquote, vamos a escribir quién y diremos font-style normal. Es así como anulas esta cascada. Entonces, ahora cuando nos refrescamos, vuelve a la normalidad. mejor también queremos cambiar nuestro pie de página para que puedas decir que es un poco de una copia diferente a nuestro otro texto de nuestra página. A lo mejor lo hará un gris más claro y quizá lo haremos texto más pequeño. Entonces, actualmente recordarás nuestro marcador para pie de página es solo un párrafo. Añadamos otra clase a eso. Entonces, clase es igual a pie de página. Vuelve a nuestros estilos y diremos pie de página de punto y cambiemos el tamaño de fuente a 12 píxeles. Ahora, es mucho más obvio que eso es copia de pie de página y no contenido corporal general. También tenemos este llamado a la acción para ¡Contrata a John para tus necesidades de retrato de mascota! Demos esa clase y es un llamado a la acción. Démosle una clase de CTA. Queremos que aparezca un poco diferente, por lo que agarra algo de atención visual. Entonces, diremos CTA y podríamos decir algo así como relleno de font-weight y ver cómo se ve eso. Puedo ver que es un poco más obvio que de nuevo este es un tipo diferente de contenido que tenemos en nuestra página. En este caso, un llamado a la acción. Entonces, por último, tenemos la página Trabajo. Ya sabes lo que estoy diciendo esto estoy viendo que realmente los subrayados del texto no están funcionando demasiado bien en los H1s. Entonces, volvamos a subir y realmente eliminemos el subrayado texto-decoración por completo y veamos cómo funciona eso. Está bien. Bueno, tal vez sí lo necesitamos en algunos de los otros o tal vez deberíamos retocar esto. Aquí, tenemos un H1 y H2 y un H3, se puede ver que tal vez se está volviendo un poco difícil ver cuál es la diferencia en cuanto a lo que es la organización de cabecera. Entonces, hagamos algunos ajustes a eso. Cambiemos nuestro H3 para que sea un color diferente. Vamos a darle un color más oscuro como el texto del cuerpo que tenemos. Entonces, en realidad no estamos usando era H2s. Simplemente sigamos adelante y cambiemos eso a un H3. No tienes que definir todo por supuesto. Vamos a decir que el color, vamos a añadir el letrero de libra al frente será de nuevo este color negro oscuro. A lo mejor queremos añadir el subrayado de nuevo a nuestros H2s. Entonces, en realidad vamos a recuperar ese H2. Entonces, H2 text-decoración subrayan y eso se ve bien. A lo mejor queremos cambiar nuestros H3s y queremos que sean cursiva. A lo mejor queremos que sean cursiva y queremos cambiar la font-familia. Hagamos aquí la font-family, Georgia. Quiero decir ven por ahí y ahí están nuestros H3s. Se puede ver que nuestras imágenes están apareciendo en la misma línea que nuestros enlaces. Eso se debe a que recuerden que son a la vez imágenes y los enlaces son elementos en línea. Podemos ajustar eso de un par de maneras diferentes. Uno, podríamos poner la etiqueta de enlace dentro de un texto de párrafo dentro de solo por sí mismo. O podemos agregar clase y en lugar de hacer display en línea podemos hacer una pantalla negra. En este caso, quiero volver a entrar en el H2 en realidad un texto de párrafo a su alrededor. Porque podríamos argumentar que podría ser un párrafo. Entonces, hagámoslo. Vamos a decir párrafo, párrafo y sólo voy a sangrar para que podamos ver esto un poco mejor y yo voy a hacer lo mismo aquí arriba para Read the Lasaña Chronicles. Entonces, etiqueta P, etiqueta P. Ahora, cuando regrese y refresque, se puede ver que están recibiendo estilos de párrafos y aparecen en la siguiente línea. También puedo ver que tal vez nuestros H3s se están perdiendo un poco con el font-size, vamos a bombear un poco el font-size. Entonces, podemos hacer font-size. Hagamos 22 píxeles y veamos cómo se ve eso. Eso es un poco mejor en comparación con nuestro texto de párrafo que aún podría ser un poco grande. Cambiemos nuestros párrafos a 18 píxeles para relajarnos un poco. Volvamos a ver cómo eso afecta al resto de nuestro sitio. Recuerda, cuando hagas un cambio en tu CSS, afectará a todas partes. Asegurémonos de que las cosas aún se vean bien. Ellos lo hacen. Todavía se ven bastante bien. Nos perdimos un enlace aquí abajo, así que vamos a asegurarnos de que agregamos un texto de párrafo alrededor de eso. Entonces, para “Comprar este CD” párrafo y párrafo. Cuando estoy confundido acerca de si debo o no agregar párrafos a algo como esto trato de imaginar si aquí no hubiera un enlace. Si sólo estuviéramos escribiendo “Comprar el CD” eso sería un texto de párrafo, para que pueda seguir adelante y poner eso dentro de un párrafo, va a guardar eso y volver. Ahora, nuestra página se ve bastante bien excepto por una cosa. Estos eslabones morados y azules que son bastante crudos. Entonces, en la siguiente lección, veamos cómo podemos ajustar nuestros estilos de elementos de enlace. 19. Enlace y pseudo clases: Por último, vamos a querer mirar cómo peinar nuestros enlaces. Entonces, tenemos estos enlaces morados y azules, morados para enlaces visitados y azules para enlaces no visitados, y hagámoslos más de nuestro estilo. Entonces, un enlace es igual que cualquier otro selector de elementos lo que significa que podríamos apuntarlo usando su nombre de elementos, que es sólo una A. Así que, mantengamos nuestros enlaces azules. Será realmente bastante obvio para todos que es un eslabón al ser azul, pero hagámoslo no tan intensivo un azul. Entonces en cambio, usemos 42a795, y puedes seguir adelante y por supuesto elegir un azul diferente o elegir cualquier otra cosa, un morado, amarillo o rojo hay muchos colores para que elijas. Entonces, solo cambiemos nuestros enlaces, por lo que hay diferentes a los predeterminados. Guardaremos nuestro archivo y luego actualizaremos, y ahora se puede ver que es menos de un azul cegador. Además, nuestros enlaces morados cambiaron a azul también. Bueno, definimos todos nuestros A's para ser azul nuevo, también ahora estamos definiendo nuestros estados visitados y nuestros enlaces. Los enlaces tienen lo que se conoce como pseudo-clases y pseudo-clases es otro concepto. En este caso tenemos pseudo-clases para nuestros enlaces. A-link es nuestra pseudo-clase predeterminada, así que así es como se ve un enlace por defecto. A-visitado sería cómo suministramos un color diferente o cualquier tipo de propiedad de texto para los enlaces que se han visitado. Hover y Focus, puede hacer cosas similares esto sería un buen selectores de agrupamiento separados por comas y eso es lo que pasa para Hover, es cuando realmente pasas el mouse sobre un enlace, y Focus es cuando usas tu teclado para navegar a un enlace. Activo es para cuando realmente estás presionando hacia abajo en el enlace antes de dejar arriba. Entonces, esos son pseudo-clases de enlace. Entonces, veamos cómo podemos agregar eso a nuestra hoja de estilo. Algo más que es importante tener en cuenta, es el orden del que se define como importante. Entonces, si vas a encontrarlos todos, tienes que hacerlos en este enlace de orden visitado, flotar y luego activo. Sin embargo, puedes dejar algunos fuera, por lo que no tienes que definirlo en un enlace visitado. De hecho, dejaré fuera esa. Pero, podemos definir un enlace, un flotador y un activo. También en realidad no necesitamos escribir un enlace de dos puntos. Porque por defecto, a es lo mismo que el a-link. Entonces, ahora agreguemos un estado de flotación. Entonces, vamos a decir un flotador, coma a-focus. Definimos nuestro flotador y enfoque al mismo tiempo, porque van a tener el mismo efecto. Queremos asegurarnos de que nuestros usuarios de teclado cuando estén usando el teclado para navegar por nuestros enlaces, también puedan ver qué enlace hay actualmente en y a punto de visitar. Entonces para esto, solo podemos cambiar el color y vamos a oscurecer el color cuando pasemos el cursor sobre él. Simplemente voy a usar el valor 5f6b69. Podrías usar algo así como negro o 333 sería un número hexadecimal para algo más oscuro. Voy a salvar esto, voy a volver. Ahora se puede ver, que cuando paso el cursor sobre un enlace, estamos definiendo el estado de flotación. Por lo tanto, cambiando cómo se ve el enlace. Si estoy usando mi teclado, ahora mismo estoy presionando Tab, y el primer enlace de nuestra página por supuesto es nuestro logo, así que eso es lo que pasa cuando tabule sobre el logo, obtendremos un esquema. Entonces paso a nuestro trabajo y se puede ver que tenemos el contorno azul y el gran cambio, porque definimos nuestro estado de enfoque también. Esto permite que los usuarios del teclado sepan en qué enlace están a punto de hacer clic. También podemos definir un activo si lanzamos, por lo que a-active y tal vez queremos decir algo como ominoso, el color de fondo será blanco. Entonces ahora, cuando me refresco, se puede ver que en este momento, estoy sosteniendo físicamente el botón del ratón, y durante ese momento es cuando se obtiene el estado activo. Entonces, cuando libero, en realidad voy a esa página. Ahí está mi flotador y mi activo. Vamos a quitar activo por ahora, así que no es algo que realmente necesitemos. Pero, si eso es algo que quieres hacer, tal vez quieras agregar un poco de huevo de Pascua de una gema para las personas cuando hacen clic en tus enlaces, y para mostrarles algo cuando está activo, sin duda puedes hacerlo. Es así como aplicamos diferentes estilos a nuestro enlace. Recuerda, no tienes que solo intercambiar colores, también podríamos cambiar cosas como tal vez queremos quitarnos la decoración del texto, así que podemos decir text-decoración ninguno y luego tal vez en el foco hover, podemos volver a poner lo subyacente, así que texto-decoración subrayado. Se puede ver cómo se ve esto aquí, así que cuando paso el cursor por encima, aparece la línea. A lo mejor no quiero hacer un cambio de color entonces, solo puedo hacer un subrayado ya que estoy rondando. Voy a retroceder eso, porque me gusta hacer bonitos mis enlaces y obviamente, y quiero que la gente sepa que es un enlace, así que dejaremos eso subrayado ahí dentro. Es así como vamos a darle estilo a nuestros enlaces. En nuestra última lección, vamos a ver alguna propiedad taquigráfica, así que cómo podemos escribir las cosas un poco más fácil para cosas como; colores, y fuentes, y propiedades de fondo. 20. Propiedades rápidas: Hasta ahora, hemos mirado una especie de las largas formas de escribir cosas. Sí miramos un poco la taquigrafía del color. Entonces, recuerda que para los números hexadecimales, si los valores son los mismos. Entonces, 666666, salta a seis ahí, en realidad podemos simplemente hacer un 666. Entonces, así haríamos cortos de color, pero también acortamos para otras cosas como propiedades de fuente y propiedades de fondo. Entonces, ahora mismo, estamos diciendo que el tamaño de fuente en nuestros párrafos es de 18 píxeles, y la familia de fuentes es Georgia y Serif. Podemos combinar esto juntos solo diciendo “Font”. Entonces, fuente 18 pixels, Georgia, Serif será lo mismo que escribir eso, pero así es como haríamos taquigrafía para la fuente. Se puede ver que sigue recibiendo los mismos estilos, pero fuente 18 pixels Georgia. Cuando se trata de taquigrafía, el orden en el que escribimos las cosas es importante. Entonces, digamos en nuestros h2s, teníamos tamaño de fuente 40 píxeles, peso de fuente es Bold, estilo de fuente Cursiva, y font-family, Fantasy. Siempre busco una excusa para usar la fantasía, así que la usaremos en esta demo. Volvamos aquí y veamos que nuestros h2s fueron ajustados. Ahora bien, si queremos escribir esto como taquigrafía, podemos, pero es importante que los escribamos en cierto orden. Entonces, vamos a decir “Font”, y el orden de nuestra taquigrafía de fuentes comenzará con el estilo de fuente, así que Italic. Entonces, peso de fuente en este caso, Bold. Entonces, vamos a hacer nuestro tamaño de fuente, así que 40 píxeles. Si tenemos alguna altura de línea, también podríamos poner eso aquí, y lo hacemos escribiendo barra. Podríamos escribir eso como barra de 80 píxeles de altura de línea. Esto va a ser muy grande, y luego vamos a poner nuestra font-familia, así Fantasía. Entonces, de nuevo, solo para ver cómo se verá esto [inaudible] agreguemos aquí la altura de la línea, para que puedas ver, y así es como la escribimos en una taquigrafía. Entonces, si elimino todo esto y nos refrescamos, podemos ver que sus h2s siguen consiguiendo el estilo. También están agregando esa altura de línea que agregamos, razón por la cual se hizo un poco más grande antes y después del texto, y así es como escribimos nuestra taquigrafía. Si olvidas cómo escribir abreviaturas, no te preocupes. Está a solo una búsqueda de Google para una abreviatura de fuentes, y aquí se pueden ver muchos resultados. Me gustan los trucos CSS, así que vendré aquí, y solo a ver si eso me van a recordar el orden, así que font-style, font-variant, font-weight, y un ejemplo de ello en uso. Entonces, cursiva, tapas pequeñas, normal 13 pixel/ 150%, Arial, Helvetica, Sans Serif, tan bonito recurso por solo asegurarte de que recuerdas cómo escribir tu abreviatura de fuente. También podemos escribir taquigrafía para nuestros antecedentes. Entonces recuerda, tenemos los antecedentes en nuestro cuerpo para hacer el ruido. Entonces, en lugar de escribir todos estos, en cambio podemos escribir fondo. Empezamos con nuestro color, así efebdf, después escribimos nuestra imagen de fondo. En este caso, img/bg-noise.jpg. Entonces, vamos a decir nuestra repetición, y como estamos repitiendo, realidad ya no necesitamos la posición de fondo, así que podríamos simplemente iniciarla de nuevo en la parte superior izquierda, que es 00. Pero, si hicieras una posición de fondo, sería al final después de tu repetición. Entonces, voy a borrar eso. Nos deshacemos de esas cuatro líneas, refrescamos, y todo sigue igual por supuesto, porque estamos limpiando eso. Si lo cambio a que no se repita aquí, entonces se podría ver que sólo los tenemos en esa esquina de arriba. Recuerda, siempre podemos cambiar estos valores, así que 100 pixeles, 100 pixeles, y ahora vemos que nuestro cuadrado se ha movido por aquí, 100 pixeles. Es como un juego de Word Waldo tratando de encontrar este patrón de ruido, pero ahí es donde está. Entonces, esas son algunas formas en que puedes escribir CSS más eficiente usando estos acortados. En el siguiente video, vamos a ver los comentarios de CSS. 21. Comentarios de CSS: Por lo que tal vez recuerden en HTML teníamos comentarios HTML pero también tenemos comentarios para CSS. Entonces cuando estamos limpiando un poco nuestros estilos, queremos agregar algunos comentarios. Entonces primero, vamos a mover el cuerpo por encima del párrafo sólo porque el cuerpo lo contiene todo. Por lo que quiero tener eso primero en nuestra página. Ahora lo que voy a hacer es escribir una nota para mí aquí arriba y escribiré mi nota para decir algo así como, “Estilos para el fondo corporal”. Ahora por supuesto, esto va a tratar de ser leído por el navegador, así que tengo que poner algo a su alrededor que haga consciente al navegador de que se trata de un comentario. En CSS, escribes tus comentarios con una slash, estrella, y luego estrella, slash, y puedes ver en Sublimetext, se volvió gris. No importa si hay o no espacios aquí. Simplemente me gusta poner espacios para que sea más fácil de leer, y estos son realmente buenos para hacer notas por ti mismo. Entonces tal vez aquí abajo, voy a hacer un comentario que diga, “estilos de encabezamiento”, y aquí abajo, voy a empezar a entrar en anulación de clase, porque aquí es donde estamos usando clases para anular nuestros selectores de elementos generales. Puedes dejar tantas notas como quieras aquí. Recuerda, es posible que la gente vea tus notas. Si alguien quiere ver tu fuente y ver tu CSS, por supuesto pueden ver esto, así que no escribas nada malo o no escribas nada mal gusto porque la gente posiblemente podría encontrar esto. También puedes usar comentarios para comentar ciertas secciones del código si quieres ver cómo se verán las cosas. Entonces, ¿qué pasa si soy como, “Sabes qué, realmente no sé si quiero tener este color pero tampoco quiero eliminarlo”. Entonces por ahora, solo estoy temporalmente comentándolo,vuelve aquí, vuelve aquí, y ahora puedo ver cómo se ven las cosas si están en el color más oscuro de la clase corporal. No soy realmente fan de eso así que voy a volver atrás y ya sea controlar Z o simplemente seguir adelante y eliminar estos. No estoy seguro de esta fantasía familiar de fuentes, así que tal vez quiera comentarlo. Por lo que comentaré esto, y también puedo dejarme algunas notas para mí. Cualquier cosa dentro de los comentarios será genial fuera así y se puede notar que es un comentario, y puedo dejar una nota aquí para mí que diga, “abreviatura de fuente por ejemplo”. Entonces si me quiero decir a mí mismo, “Comentó porque no se ve bonita”. o algo así, y esa es una forma de saber por qué comenté esto. Posteriormente, antes de irme a vivir con mi sitio, tal vez quiera quitar todos estos comentarios, pero por ahora, mantenerlo y decidir más adelante si cambio de opinión sobre esa fantasía. Entonces es por eso que los comentarios son realmente buenos. También podrías hacerte algunos comentarios por ti mismo en la parte superior de la página. A lo mejor quieres dejar comentarios para tu paleta de colores. Entonces puedes decir algo como- y recuerda que puedes hacer cualquier formato que quieras, así que tal vez quiero hacer todas las gorras para que sea fácil de ver, y puedo decir algo así como el color negro que estamos usando es el número 27211f, el color coral que estamos el uso es este: e96f4p. Esta podría ser una forma para que la gente vea fácilmente los colores. De esa manera, si cambias de opinión, podrías actualizar aquí también, y es un lugar donde la gente puede rápido y agarrar estos valores y enchufarlos. Entonces el azul que estamos usando está en nuestra A. Copiemos eso, y pongámoslo aquí arriba. Eso son solo algunas notas que puedes guardar para ti si estás interesado en usar una paleta de colores y tal vez quieras cambiarla más adelante, solo algo rápido y fácil para que mantengas tu CSS organizado. Hablemos de soporte para navegadores, una especie de bummer pero algo de lo que hablar en nuestra próxima lección. 22. Soporte de navegador: Entonces, al igual que un HTML donde tenemos diferentes especificaciones, tenemos diferentes especificaciones de CSS. Ha habido diferentes versiones y borradores y documentos que dicen cómo los navegadores deben leer CSS. Se puede ver que ha habido diferentes estándares y borradores de CSS, cosas como CSS Level 2 y Selectors Level 3, que definen las diferentes propiedades CSS con las que tenemos que trabajar. Selectors Level 3 se convirtió en una recomendación en 2011 y cuenta con algún alto soporte entre la mayoría de los navegadores modernos que estaremos utilizando. No obstante, no todo es un navegador moderno. En ocasiones, si miras los análisis de tu sitio, verás que la gente viene a tu sitio desde una especie de navegadores más antiguos, tal vez no la versión más reciente de Chrome en un Mac o Firefox en Windows. Desea asegurarse de que las propiedades CSS que está utilizando se puedan usar y estén bien apoyadas. Caniuse.com es un gran sitio que te dice compatibilidad para HTML5, CSS3, SVG, y otras cosas en cuanto a cómo se verán y reaccionarán en un navegador. Podemos echar un vistazo a la columna CSS de la izquierda. Si hay una propiedad aquí que estás pensando en usar, puedes ver si podrás usarla. Hablamos un poco de diferentes valores de color antes como HSL y RGB. Se puede ver desde este gráfico que en las últimas versiones de mucho navegador, hay soporte para esto. Pero de vuelta en IE8, no soporta todos estos colores CSS3. Esto es importante saber, si su sitio está siendo visitado por mucha gente en IE8, posible que desee usar valores hexadecimales en su lugar. Si estás de acuerdo con que las personas en IE obtengan un color de copia de seguridad o proporcionen dos valores, por lo que podrías montar en el color hexadecimal y luego en la siguiente diapositiva proporcionar un color RGB. Esa es otra forma de abordar este problema. Es un poco de trabajo extra para asegurarse de que la gente en IE8 pueda ver esto y obtener el apoyo, pero eso depende de ti y de tu cronología para tu proyecto. Vamos a comentar esto por ahora y digamos en cambio el fondo de mi página, quiero que sea RGBA y fue 255, 255, 255,1. Esencialmente, eso es blanco. De lo que podemos hacer en su lugar si quisiéramos dar soporte a los navegadores más antiguos, dices número de fondo fff. Lo que sucede aquí es que los navegadores que entienden esto, como IE8, leerán esto. Entonces cuando lleguen a esta línea, simplemente la ignoraremos por completo. Para los navegadores que sí soportan esto o leen esto, aplíquelo, pero luego anícalo con este valor. Esa es una forma de sortear la compatibilidad anterior. Echamos un vistazo a las imágenes de fondo antes y hay otro tipo de cosas de fondo que podemos agregar en CSS3, como clip de fondo o tamaño de fondo, y podemos ver el diferente soporte para cosas así aquí también. Cuando estés jugando con nuevas propiedades CSS, lo cual te animo mucho a que hagas después de esta clase, solo asegúrate de que te refieres a cosas como caniuse.com para ver qué tipo de soporte de navegador está disponible. En el siguiente video, veamos algunas de las cosas que podemos usar y terminemos esto. 23. Próximos pasos: Bueno, eso termina nuestra intro al CSS. Espero que se hayan divertido mucho. Ciertamente lo hice, también Steve por aquí. No olvides que hay muchas más propiedades que podemos agregar a nuestro sitio. Si ustedes chicos quieren echar un vistazo al Generador CSS3, eso empezará a darles algunos ejemplos de cosas. Nos fijamos en algunas propiedades de texto que controlamos pero también podemos controlar cosas como sombra de texto. Entonces, si echamos un vistazo a algo como esto, puedes ver aquí un ejemplo de cómo aplicaríamos sombra de texto a nuestra página. Entonces, podríamos copiar este guión de texto sombra, cinco píxeles, cinco píxeles, dos píxeles, y luego este valor X, y aplicarlo a algunos de nuestros estilos también. Entonces, tal vez queremos aplicar esto a nuestros rubros. Bueno, si hacemos eso, puedes ver, guau, eso no se ve bien. Pero como puedes ver, hay muchas más cosas que podemos empezar a agregar con CSS3 y otras propiedades. También tenemos cosas como gradientes CSS. Entonces, puedes ver que puedes jugar por aquí, ajustar colores como este. Si haces doble clic en esto, puedes cambiar el color. Entonces, tal vez queremos quitar algunas de estas también, tal vez queremos agregar un gradiente a nuestro fondo de nuestra página y podríamos hacerlo si así lo deseamos. Entonces, digamos que tenía un gradiente como este. Entonces, si tuviera este gradiente aquí, puedo dar clic en “copiar”. Ven a mi CSS, sube a mi cuerpo y en lugar de usar este fondo, comentemos esto y peguemos aquí el código generado por CSS. Vuelve a mi sitio y ahora puedes ver el fondo tiene esta imagen de gradiente. Por supuesto, diré que es importante entender cuáles son las propiedades CSS que estás haciendo, pero también creo que es divertido ver qué puedes hacer y el tipo de propiedades diferentes con las que tenemos que jugar. Entonces, creo que es importante que ustedes sepan lo que hay por ahí, sepan que hay muchas cosas geniales que podemos hacer con CSS que van más allá de lo que hicimos justo hoy. Entonces, espero que sigas probando algunas de estas reglas, vuelve a limpiar tu CSS, limpia tu HTML, limpia tu HTML, asegúrate de que las cosas se vean eficientes y legibles, e intenta cambiar cosas. Prueba a cambiar colores, prueba a cambiar tamaños de fuente, y ve la combinación que te gustaría usar para tu currículum, y estilos que crees que encajarían Jon Arbuckle quizás de manera diferente a lo que hicimos aquí hoy. Espero verlos a todos en la siguiente clase donde hablamos de CSS avanzado para el diseño y posicionamiento y llegar a profundizar un poco más en lo que CSS puede hacer. Hasta entonces, espero que te diviertas mucho agregando muchos colores y fuentes para que Jon Arbuckle, o tu sitio de portafolio sea súper impresionante. Hasta entonces, te veré la próxima vez.