Hola. Bienvenidos a nuestra primera conferencia verdaderamente técnica en nuestro curso de CSS. Se trata de añadir estilo a tus páginas. Si has venido a este curso conmigo desde nuestro curso HTML, sabes que sé que puedes crear archivos HTML generales. Pero hasta ahora, es posible que no las hayas peinado en absoluto. Lo que quiero que sepas antes de que empecemos a diseñar, y comiences a poner tus propios giros en las páginas, es que el mismo archivo HTML puede verse diferente cuando se ve en diferentes navegadores, y hay algunas razones para eso. En primer lugar, algunas etiquetas no son compatibles en algunos navegadores, mientras que en otros. Así que si alguna vez has usado la etiqueta de detalles, puedes ver que a veces tu página tendrá pequeñas flechas o pequeñas marcas diferentes en ellas y otras veces no lo hará. Así que eso se reduce a las etiquetas que son compatibles. Pero también, cada navegador tiene su propio estilo predeterminado diferente. Y lo que dice ese estilo predeterminado es que así es como quiero que se vean mis encabezados H1, o esta es la cantidad de relleno que quiero alrededor de mis párrafos. Entonces, si vas a la misma página exactamente en diferentes navegadores, puede ser difícil de decir, pero verás pequeñas diferencias en cómo se hacen las cosas. Pero, en general, este aspecto predeterminado es realmente sencillo. Y la mayoría de la gente que conozco, no quieren que sus páginas se vean llanas. Quieren poner algo de estilo. Así que empecemos a buscar formas de hacer esto. Una forma de agregar estilo es pensar en agregarlo directamente al texto. Ahora, a medida que HTML evolucionó, pasamos de tener etiquetas que eran claramente sobre el color, y sobre diferentes centramientos, y cosas por el estilo. Decir que no, no, no queremos etiquetas que tengan que ver con el estilo. Solo queremos etiquetas que tengan que ver con el contenido. La gente dijo, vale, podemos hacerlo, pero quiero hacerlo bonito. Entonces, cómo hicieron esto es que agregaron atributos de estilo. Entonces, en este caso, tomé una etiqueta h1 y agregué el atributo de estilo y simplemente dije «color: azul». Y lo que esto va a hacer es que va a hacer que este título h1 particular tenga una fuente azul para él. Así que es muy simple. Es una buena manera de entrar y agregar un estilo simple a su página. Sin embargo, esto todavía rompe nuestra regla de querer separar el contenido del estilo. Porque si quieres cambiarlo a, digamos, rojo o verde o algo así más tarde, vas a tener que entrar y cambiar la etiqueta, porque vas a tener que cambiar el atributo. Así que realmente intenté salir de mi camino para no usar esto en absoluto, y en su lugar, tomarme el hábito de hacer las cosas de la manera correcta. Y la forma correcta de diseñar sus páginas es usar CSS. Las hojas de estilos en cascada son básicamente una forma de escribir reglas que digan cómo desea aplicar estilo a todos los párrafos, cómo desea aplicar estilo a todos los encabezados o cómo desea aplicar estilo a algunas de las imágenes. Es una forma muy agradable y específica que todos pueden seguir para tomar estas decisiones de estilo. Y las reglas se establecen así. Primero tienes que poner tu selector, y el selector es solo una forma elegante de decir qué es lo que quieres estilo. En nuestro caso, comenzaremos simplemente dando al selector diferentes nombres de etiqueta como h1 o párrafo. Una vez que encuentre qué etiqueta desea aplicar estilo, diga qué propiedad desea cambiar. Así que podemos ver cosas como el color, el color de fondo, cuánto espacio ponemos alrededor, vamos a cubrir todas esas. Pero por ahora, vamos a empezar muy simple y lidiar con los colores. Luego, debe darle a cada propiedad un valor, diciendo qué color desea que sea. Entonces, por un lado, tenemos el muy genérico, cómo escribimos una regla. Y por el otro, he escrito una regla muy específica que dice, oye, cada vez que veas un encabezado h1, quiero que hagas que el color de la fuente sea azul. Así que hemos hecho exactamente lo que hicimos cuando incrustamos usando la etiqueta de estilo, pero ahora es muy genérico, y no estamos hablando de un encabezado específico. No estamos hablando de una etiqueta específica. Por lo tanto, cuando escribes esas reglas, la sintaxis es muy importante. Muchas veces, cuando escribes HTML, el navegador es muy bueno para ti y si te olvidas de cerrar una etiqueta que dice, está bien, sé lo que ella quiere que haga y va a seguir adelante y poner la página arriba de todos modos. Cuando estás haciendo CSS, si eres descuidado con lo que llamamos tu sintaxis, te meterás en problemas. Por lo tanto, los corchetes y los puntos y comas son muy importantes. Así que, déjame mostrarte de nuevo cuando volvamos aquí, puedes ver que tengo un corchete inicial y un corchete de cierre, y tengo este punto y coma justo al final. Tienes que recordar incluirlos. Y una de las razones por las que hablo de esto es que cuando comienzas a escribir tu código, cuando eliges un buen editor, y la mayoría de los editores son bastante buenos, como Sublime o TextWrangler, TextEdit, Notepad ++, pondrán colores para ti. Así que de repente si estás mirando tus reglas CSS y estás como, woah, yo esperaba que las cosas fueran diferentes colores, pero en lugar de eso todo es blanco o todo es rojo. Como que te da esta pista de que has estropeado la sintaxis de tu regla. En la misma línea, solo quiero decir que cuando escribas tu regla puedes poner comentarios para ayudarte a depurar y ayudarte a explicarte a ti mismo lo que vas. Y así es como se hacen los comentarios en CSS. Sólo tienes que hacer /*, */ de nuevo. Entonces, ¿qué pasa si quieres hacer más que una sola propiedad? ¿ Qué pasa si en lugar de decir que solo quieres que el color sea azul, también quieres que el color de fondo sea amarillo? Bueno, no hay problema. Puede tener tantas combinaciones de valores de propiedad como desee. Solo necesita recordar separarlos con punto y coma. Así que en este caso, de nuevo, he establecido el color en azul y el color de fondo en amarillo. Muy bien, ahora que sabes cómo escribir una regla, ¿cómo hacemos que funcionen? Bueno, hay dos maneras y la primera forma en la que voy a contarte se llama usando una hoja de estilo interna. Así que como puedes ver aquí en mi código, tengo la plantilla básica de nuestro archivo. Y dentro de las etiquetas de la cabeza, he puesto esta etiqueta de estilo, ahí es donde vas a querer poner tus reglas, están definidas justo dentro de ese estilo. Así que ahora, dentro de la etiqueta de estilo, he agregado el h1, el color azul, y he terminado mi etiqueta de estilo. Así que lo que sucede ahora es que cuando el navegador abre su página, llega a la sección principal que dice, oh genial, ella escribió algunas reglas, vamos a ver lo que ella quiere que haga. Y va a saber ir a través de tu página y aplicar esta regla a todas las etiquetas H1. Y si tiene varias reglas, incluyendo párrafos, imágenes, cosas así, va a saber, quiero aplicar esto a todas las instancias en todo el archivo. Está bien. Ahora hay una muy buena posibilidad de que vayas a estropear porque hago esto el 80% de las veces cuando me estoy desarrollando en clase, y lo que hago es olvidar cerrar esta etiqueta de estilo. Y si olvidas cerrar esa etiqueta de estilo en la parte inferior, bueno, en realidad, tu página puede terminar en blanco. Así que no te asustes cuando empieces a hacer esto por primera vez si tu página está en blanco, probablemente signifique que olvidaste cerrar la etiqueta de estilo. Muy bien. Por lo tanto, las hojas de estilo internas son realmente agradables cuando solo estás tratando de darle estilo a una página. ¿ Todo bien? Y a menudo lo hago solo para poder mantener todo mi código en un archivo en lugar de ir y venir y venir y venir. Pero imagina que tienes un sitio donde vas a tener 10,20, 1.000 páginas diferentes y quieres que todos tengan una mirada muy consistente sobre ellas. No quieres tener que entrar y decir que si quieres cambiar un color, no quieres tener que entrar y abrir cada uno de esos archivos para que puedas cambiar el color a rojo o verde. En su lugar, lo que desea usar es que desea usar algo llamado hojas de estilo externas. La forma en que funciona con una hoja de estilos externa es que coloca las reglas en un archivo diferente. Así que abre un archivo, lo va a guardar algo como mystyle con una extensión de archivo.css. Así que ahora el navegador sabe, oh todo en HTML, ese es el contenido. Todo en .css, ese es el diseño. Ahora, cuando crea su hoja de estilo externa, parece igual que lo hicimos en el interno, excepto que no usa una etiqueta de estilo. Luego, una vez que haya puesto sus reglas en un archivo separado, todo lo que necesita hacer es agregar un enlace a la sección principal. Así que en este caso, he entrado, he puesto mi enlace, necesito hacerle saber la relación de la hoja de estilo. Y tienes que recordar poner el nombre del archivo. así que una vez más aquí es donde va a ser muy importante que estés nombrando las cosas de maneras que ellos hacen desde entonces. Puede enlazar a tantas hojas de estilo diferentes como desee, la mayoría de las veces comenzamos con una. Ahora que hemos tenido esa hoja de estilo, cada archivo que vincula a ella compartirá esa hoja de estilo. ¿ Recuerdas cuando mencioné que podrías tener un sitio con 10, 20, 1000 páginas y decides cambiar ese color de azul a rojo o verde o algo así? Esto es genial. Todo lo que necesita hacer es abrir style.css, cambiar una línea de código, y ahora acaba de cambiar potencialmente miles de páginas Vale, así que hablemos por un segundo sobre esta idea de hojas de estilo en cascada. ¿ Qué significa que estamos en cascada? Bueno, cuando el navegador vaya a hacer tu página, lo primero que va a ver es ir, está bien, tal vez no me estén diciendo nada. ¿ Cómo hago normalmente encabezados h1? ¿ Qué tan grande hago esa fuente? Tiene su propio tipo de valores predeterminados. Pero luego va y se ve y dice, oh, ¿hay alguna hoja de estilo externa? Porque si es así, voy a sobrescribir los valores predeterminados de mi navegador y poner las reglas que están en esta hoja de estilos externa en su lugar. A continuación, va a comprobar el estilo interno. Ese estilo que tienes en la sección de la cabeza. Porque en general, el navegador piensa, hm, tal vez hay algo realmente especial en esta página en particular, y aquí ella quiere que haga estas reglas en su lugar. Finalmente, cualquiera de esos estilos en línea donde use la etiqueta de atributo, esos tendrán la prioridad más alta de todos. Así que puede ser muy confuso, porque podrías empezar a escribir diferentes reglas, y no puedes averiguar por qué algunos están trabajando y otros no. Aquí es donde vuelve a entrar la parte en cascada. Primero mira los valores predeterminados, luego externos, luego internos y luego en línea. Es por eso que realmente quieres evitar usar cualquier estilo en línea porque anula prácticamente todas tus reglas de estilo. Bien, sabemos cómo van esos cuatro, pero ¿qué pasa si tienes un selector y, has vinculado a dos o tres hojas de estilo diferentes, y ese mismo H1 se ha definido como azul, verde y amarillo, pero en archivos diferentes. ¿ Cómo sabe el navegador qué hacer? Bueno, cómo funciona es que las reglas del archivo más reciente tienen prioridad. Y lo que quiero decir con el archivo más reciente, significa que va a la sección principal y va uno, dos, tres, y como que mira en qué orden los listaste, y el último que listaste es el que va a tener prioridad. ¿ Está bien? Bueno, ¿y si tienes un selector en el mismo archivo, y has escrito H1 varias veces. Esto puede suceder bastante. Especialmente si decides irte y ser parte de una gran compañía de desarrollo, escribes algún código, y luego alguien más escribe algún código, o, como le digo a mis estudiantes, tal vez saliste y pasaste un buen rato una noche, y llegaste a casa y decidiste, ¡voy a codificar! Y te olvidas de que ya has escrito algunas reglas. Bueno, si ese es el caso, una vez más, el navegador va a mirar el que vio por última vez. Entonces, en este caso, tengo dos reglas para h1. Uno escribe en el color a azul. Y le dije, oye, quiero que uses esta familia de fuentes aéreas. Y luego, puede que haya un montón de cosas aquí, puede que no sean nada, y digo hola, quiero que uses una familia tipográfica Times. Cómo el navegador va a ver esto es que va a caer, doo-doo-doo-doo y decir, voy a hacer toda la fuente azul, y voy a seguir adelante y hacer la familia tipográfica Times. Es sólo que siempre va a usar el último que vio. Por lo tanto, de nuevo, la regla más reciente tiene prioridad, ya sea que esté dentro de su código o provenga de diferentes archivos. Sin embargo, hay una forma de sobrescribir esto. Supongamos que estás escribiendo algo y sabes que quieres que algo sea así. No te importa si alguien más lo sobrescribe. Realmente quieres asegurarte de que la gente no esté usando estilo en línea, cosas diferentes como esas. Lo que puedes usar es que puedes usar el! Atributo importante justo aquí. Así que aquí tengo la familia de fuentes, Arial, y tengo algo importante aquí. Así que aunque más tarde decido sobrescribirlo con tiempos, el navegador va a decir no, sé que realmente quería que usara Arial, y funciona. Así que sigamos adelante y veamos un ejemplo de lo que quiero decir con todos esos precedentes. Sé que escucharme puede ser un poco abrumador, así que tengo un ejemplo rápido que te muestra las diferentes maneras y luego terminaré esta conferencia. Así que comencemos usando el atributo de estilo. Como puede ver aquí, he escrito el código, y he usado el atributo de estilo para este encabezado h1, y este párrafo. Entonces, en este caso, quiero que mi encabezado h1 sea azul, y mi párrafo sea rojo. Y lo que realmente quiero mostrarles es que el único párrafo que se cambió a texto rojo o fuente roja fue el primero. El otro sigue siendo negro. Entonces, la única forma de estilo es si entras y cambias todas y cada una de las etiquetas para que se vea de la manera que quieras. Si quisiera que todos los párrafos fueran rojos, tendría que ir allí y poner estilo igual, estilo igual. En este ejemplo solo hay dos, pero puedes imaginar cómo sería realmente molesto si tuvieras mucho, ¿vale? En nuestro siguiente ejemplo tenemos un estilo interno. En este caso, he puesto mi etiqueta de estilo en la parte superior y he agregado reglas para párrafos y encabezados H1, y debería manejar ambos. Así que ahora ya no hay nada aquí, mi etiqueta es solo. Y si nos fijamos en el resultado, vamos aquí. Puede ver eso ahora, a pesar de que mi HTML no tiene ningún tipo de estilo en absoluto, ambos párrafos son rojos aquí y también lo es el encabezado. ¿ Todo bien? El último ejemplo que tuve para ti es que tomé estas mismas reglas y las puse en una hoja de estilo externa. Una vez más, no hay ninguna etiqueta de estilo aquí. Son sólo las reglas en sí. Y luego tuve que volver al archivo HTML, y se puede ver justo aquí, cerca de la parte superior, tengo hey, vamos a vincular a la hoja de estilo que quiero. Ahora, quiero señalarte esto con mucho cuidado. Si lo nota, tengo hoja CSS/ExternalStyle. Esto significa que mi hoja de estilos está en una carpeta especial llamada css. Los desarrolladores realmente enfatizan que haces esto, porque quieres que tu código esté organizado en diferentes partes. Así que de nuevo, de la misma manera, ahora tengo una página que usa hojas de estilo externas y se ve realmente bien. Así que todo este código estará disponible para que lo mires, pero quiero que juegues con él tanto como puedas. Pero, quiero usar este último ejemplo para ayudarte a entender cómo funciona la cascada. Así que aquí mismo, tengo mi hoja de estilo externa. Voy a ir por aquí sólo un segundo. Ve a mi, y voy a añadir, Una última cosa. Lo siento, esto va a ser incómodo. Y voy a decir, ¿sabes qué? En cambio, quiero que esa fuente sea negra otra vez, y lo termino. Voy a mostrarte lo que pasa cuando te metes la pata muy rápido. Voy a guardarlo, voy a recargar mi página y todo desapareció. Esto era de lo que estaba hablando. Realmente quieres asegurarte de incluir esa etiqueta de estilo. Hazlo. Asegúrate de cerrarlo. Muy bien. Así que ahora lo que estoy pasando aquí es que mi navegador tiene su navegador predeterminado. Tiene una hoja de estilo externa, y ahora también tiene una interna. Así que veamos de qué color va a ser, si va a ser azul o si va a ser negro. Y como puedes ver, es negro. Por lo tanto, a medida que empieces a diseñar, será muy importante que veas diferentes formas de separar tu contenido del formato. Además de mirar las diferentes formas en que puede hacer ese formato. Por lo tanto, una de las primeras cosas en las que quiero que pienses es cómo esta idea de hojas de estilo externas e internas juega realmente en la separación del contenido del formato. Y al mismo tiempo quiero que entiendas que no siempre seguimos todas las reglas. Al principio siempre tenemos que empezar con ejemplos realmente, muy simples para ayudarlos a solidificar lo que está pasando con CSS. Así que voy a terminar esto ahora con una breve y breve demostración de un ejemplo que tienen en csszengarden.com porque creo que realmente trae a casa la idea de que CSS puede ser muy poderoso. Así que echemos un vistazo. Así que en este sitio, CSS Zen Garden, En realidad han hecho un gran trabajo de mostrar todas las diferentes maneras en que se puede formatear exactamente el mismo archivo, pero de diferentes maneras. Así que aquí arriba, si usted echa un vistazo, puede ver que esta es la hoja de estilo de una persona para decorar o diseñar este documento. Ahora, sin cambiar ninguno de los HTML en absoluto, alguien más vino y dijo, oye, sabes qué, eso es bueno, pero voy a darle estilo de esta manera. Se ve completamente diferente. Es el mismo HTML exacto, pero se ve completamente diferente. De la misma manera, tenemos este justo aquí, el mismo HTML exacto. Pero no podía verse diferente, porque le han agregado algo de CSS y JavaScript que es diferente. Así que ven conmigo. Vamos a codificar mucho en este curso. Vamos a jugar mucho con este curso. Vas a estar arruinando mucho en este curso. Pero no puedo esperar a que desarrolles algo que realmente refleje cómo quieres que luzca tu página. Gracias.