🖖 Inicio

SERVICIOS

Salir

nochedía

Insertar estilos en Html

1600 palabras
6 minutos
May 4, 2020

Insertar estilos en Html

Y cómo se incluyen los estilos? De dos maneras, una directamente en la página html, algo que históricamente siempre se ha demonizado, y otra que es añadiendo una página externa de estilos con cualquier nombre, por ejemplo styles.css

Este paradigma de separar estilos y html ha saltado por los aires (más o menos) con el desarrollo de tooling como React (o Angular o Vue) y del CSS-in-JS, del cual el styled-components es su exponente más popular

Pero aquí vamos a ver lo original y esto quiere decir que podemos insertar estilos de dos maneras

Inline

Donde en el propio elemento html ya estilamos

Outline

Donde apuntamos a la hoja de estilos externa así

y en ese archivo styles.css definimos las normas, por ejemplo

Lo "bonito" de esta segunda manera es que todo queda muy separado y muy limpio, algo que termina en muerte-y-destrucción cuando esto va aumentando de tamaño (y éste es el GRAN problema que soluciona CSS-in-JS)

Hay una tercera manera que es definir las normas css dentro del mismo documento html, no es inline porque no definimos los estilos elemento a elemento, pero tampoco es una página externa porque se encuentra en el mismo archivo (que claro está será aún más largo)

Todas las maneras son equivalentes, aunque ojo porque la versión inline no funciona exactamente igual que las otras dos en el momento en que queremos cambiar cosas por JavaScript

Si son estilos inline, acceder a ellos por JavaScript es fácil y directo, pero si son hojas externas es un martirio, lo que te lleva a evitar estas modificaciones y limitarte (que es muy efectivo) a simplemente cambiar de classes (las vimos en el curso de Html básico y las veremos aquí más adelante y más en detalle)

Pero vamos, estas discusiones quedan en parte obsoletas con el tooling del que te hablaba

Y el resultado? Qué pinta tiene el código de arriba? Lo puedes ver en codepen en el botón de abajo

Y lo que vemos es que tanto el <h1> como el <p> como el <em> están estilados de serie, mientras que el <span> no lo está (excepto por el color de fondo, que lo hemos especificado nosotros con css)

Para ver qué estilos se han aplicado utilizaremos el Chrome Developer Tools, una herramienta básica (Firefox tiene la suya, de funcionalidad idéntica) para no sólo explorar los elementos html y estilos css sino también para diseñar allí mismo y probar si tus ideas te convencen o no

Es muy práctico poder probarlo directamente allí mismo, ya que ves los cambios al instante

Sin duda la vida era más dura antes de esta herramienta

Te enseño cómo funciona de manera breve en este video

Fuentes

Y antes de pasar al turrón, el css no es css sin las fuentes, la tipografía, algo que definirá tu diseño web más que cualquier otra cosa, y que como todo puede agradar, estorbar, o simplemente no molestar

Sin entrar en criterios estéticos y más allá de seleccionar la fuente que queramos para los elementos que queramos, tenemos que importarlas (las fuentes)

Una de las aproximaciones populares es bajarse la fuente de algún servicio online (el mejor es el Google WebFonts Helper, puedes leer algo más del tema en el post kuworking aquí) e importarla luego con css, algo que es un poco más complejo pero sobre todo más tedioso

Las ventajas son la no dependencia de un servidor externo, y hasta hace poco el poder utilizar la expresión display:swap

Esta orden es importante ya que de no usarla caeríamos en el FOUT o Flash of Unstyled Text, que es el efecto de ver nuestro texto horrendo justo por un instante antes de que la fuente que queremos se cargue

Como alternativa quizá veamos el FIOT o Flash of Invisble Text, que en lugar de mostrar un texto horrible no muestra ... nada, que quizá está mejor a no ser que la persona tenga una conexión lenta, entonces un espacio en blanco durante demasiado tiempo es sinónimo de "gracias pero hasta nunca"

Lo que hacemos cuando especificamos el swap es decir que el texto se renderice con las fuentes que especificamos, si la primera no está pues la segunda, si tampoco pues la tercera, y en cuanto las anteriores estén disponibles entonces las utiliza

Nos aseguramos así que no cargue cualquier fuente (por norma desastrosas) sino que cargue la que nosotros le indiquemos (lo suyo es poner opciones que ya se encuentren en el sistema operativo por defecto)

Pero esto ahora también lo puedes especificar cuando descargas la fuente de los servidores de google, así que aquí lo haré de este modo por simplicidad (y se podría razonar que este modo es superior, por ejemplo en tanto en cuanto dudo que tu hosting pueda compararse a los de los señores Google, pero es un tema abierto)

El código es el siguiente

Aquí he importado 4 fuentes, una aberración (tampoco hay que ponerse así) ya que cualquier website no debería necesitar más de 3 y normalmente más de 2 fuentes, el impacto en la carga de la página (la primera vez al menos) es alto y si queremos optimizar nuestra puntuación (que también importa en el SEO) esto será una de las primeras cosas que podremos hacer

Y también puedes ver cómo incluyo el display=swap

Aprovecho para abrir un paréntesis: fijaros en la manera en que se hace una petición a un servidor

Me refiero a definir la url de manera que estamos mandando argumentos al servidor que está escuchando (y que claro está espera esos argumentos)

En este caso la petición (request) es del tipo GET, y funciona utilizando la url correspondiente seguido por un interrogante ? y a partir de aquí parejas de argumentos argumento=valor, parejas que luego se unen luego con el caracter &

Aquí los argumentos son family=Barriecito|Gothic+A1|Lacquer|Roboto y display=swap, y esto lo hago así porque te lo explican en Google cuando te dan las instrucciones de cómo importar sus fuentes

Pero vamos, cierro paréntesis y aclaro que esto no es css, pero ya que lo teníamos aquí pues lo explico brevemente para que te suene

Dicho esto, vamos a ver el impacto de utilizar fuentes con el código anterior

*Pero antse, ojo! al código también le añado lo siguiente

Te copio y pego la descripción de este elemento meta que escribí en el curso JavaScript aplicado con una extensión de Chrome y Unsplash

  • El viewport nos permite adaptar el contenido al device que esté ejecutando nuestra extensión
  • Por viewport se entiende el área visible de la pantalla, es decir, lo que el usuario ve descontando todo (por ejemplo si hay barras de scroll, el viewport no las contempla)
  • Especificar que será de tipo width=device-width fuerza que el viewport esté en consonancia con las medidas del device
  • Es decir, si tenemos una página que hemos diseñado para que tenga 900px de ancho y se está viendo en una pantalla de 360px de ancho, con otro viewport el móvil (o lo que sea) lo que haría es inquibir esos 900 px en el espacio que tiene de 360 px, quedaría todo muy pequeño y sería ilegible
  • Si especificamos este viewport lo que hace el móvil es enseñar sólo 360 px, si nuestra web tiene 900 px pues se verá sólo un trozo de esta web, y es entonces nuestra responsabilidad hacer que nuestra web se adapte y ser por lo tanto responsive
  • Así mismo, el initial-scale se refiere al zoom por defecto que tendrá nuestra página, esto podría tener su utilidad para establecer zooms distintos en función de distintos devices, pero al final es más consistente hacer todo el trabajo responsive con css

En definitiva es algo que puedes poner y olvidarte

Ahora sí, el código final es éste

Y aparte de las fuentes, que ya ves la fuerza que tienen en transmitir un mensaje (cuando se utilizan bien), también ves cómo los estilos que he añadido se aplican y se suman a los que ya llevan los elementos html por defecto

Y sí, hay elementos html que tienen estilos pre-definidos, aunque esto en principio no debería ser así ya que html entiende de datos y css de estética, pero es así

Entonces, si quieres anular esos efectos puedes hacerlo sin problema, sólo hace falta que los definas y les apliques los valores que quieras o les des un valor de unset

Fíjate que aquí he definido el mismo set de instrucciones para los 3 headers a la vez, lo hago como ves arriba, con una coma h1, h2, h3 {...} (fácil e intuitivo)

Lo que no es intuitivo (un poco sí) es saber que si hay colisión de normas, la que va más abajo prevalece (por ser la última que se lee), y además de eso la más específica también prevalece, con lo que aunque en body le haya puesto la fuente Roboto, las otras fuentes se impondrán en sus respectivos elementos al ser normas más específicas (de no ser así todos los elementos dentro de body se verían afectado por esos estilos)

Notad también que después de la fuente le añado un sans-serif, esto nos sirve para que Chrome coja cualquier fuente que entre dentro de esta categoría (fuentes sin serifa) y la ponga, lo que nos asegura que si se carga alguna fuente antes de que se hayan cargado las nuestras, al menos serán del mismo tipo

Aquí ves el resultado del código anterior

Y puedes ver que ahora no hay diferencia entre los distintos headers porque la hemos contrarrestado por css, PERO a nivel de SEO seguirán teniendo diferente sentido semántico (!)

Y con esto ahora sí, ya podemos pasar a la chicha, a definir propiedades de css que utilizaremos en nuestro día a día

Hasta aquí el segundo capítulo del curso de CSS básico, un paseo por cómo utilizar el css y un apartado dedicado a las fuentes

Nos vemos en el tercer capítulo, en Distintos estilos de CSS

Qué tal este capítulo?
👌 Bien 🙌🙌
👍 Bien, pero algunas cosas podrían explicarse mejor 😬
🤷‍♂️ Da por sentadas demasiadas cosas 😒
🤷‍♂️ A ver, hay poca chicha 😬
🤷‍♂️ Los ejemplos no son muy claros 🙇‍♂️
🤷‍♂️ No se entiende, está mal escrito 👎
✍️ Hay errores, revísalo en cuanto puedas 🙏

Newsletter de kuworking, un correo de tanto en cuanto

Quizá te interese

Privacidad
by kuworking.com
[ 2020 >> kuworking ]