Antes que nada impera decir que este artículo de introducción básica para aquellas personas que no sean profesionales del sector.
Evidentemente va a ser algo muy conceptual y simple porque entiendo que es importante que todos aquellos que trabajamos por internet tengamos unas nociones básicas de cómo funcionan los entresijos de la principal herramienta que tenemos: nuestra página web.
Pues bien, si es tu caso te invito a seguir leyendo. Ya verás que no es tan complicado.
Índice de contenidos:
¿Entendiendo el significado de CSS?
CSS es el acrónimo de Cascading Stylesheets (hojas de estilo en cascada) y es, junto con el Htlm, el JavaScript y el PHP uno de los tres Jinetes del Apocalipsis de la programación web.
¿Te gusta aprender lenguas? A mi mucho, aunque a veces pienso que más nos valdría que sólo existiese una.
Pero volviendo al tema, el CSS es el idioma de los estilos, o de los estilazos, según las competencias de cada uno, y por lo tanto es el encargado de la estética de la web.
Con el CSS podemos cambiar los párrafos de tamaño, cambiar el color de los fondos, hacer transparencias, cambiar las fuentes de la letra, y mil cosas más.
Luego sigo explicando las cosas que podemos hacer con él, pero entremos a ver por qué se llama así.
CSS como hoja de estilos.
Tenemos por un lado lo de la hoja de estilos. Esto no es más que una hoja de texto plano como un .txt pero que termina en .css. En ese documento se van incluyendo todas las instrucciones que queramos para cada selector dado.
Los selectores pueden ser clases o identificadores. No entraré en detalle, pero básicamente esto quiere decir que un código como [ p { background-color: red; } ] pondría el fondo rojo a todos los párrafos de la web, y a partir de ahí se puede concretar todo lo que se quiera. Por ejemplo que sólo el párrafo del tercer widget la home lo haga mientras que el resto sean azules, etc…
Pues bien, los generales serían las clases y los específicos que afecten a un sólo objeto serían los identificadores.
Como digo esto es a un nivel muy introductorio, pero lo que me gustaría que quedara claro es que podemos cambiar toda la apariencia de un tipo de contenido con unas pocas líneas de código.
El CSS es maravilloso.
CSS en cascada.
La segunda parte es lo de “en cascada”. Esto quiere decir que se va leyendo de arriba abajo y manda el último código que se ha leído.
Esto es especialmente útil cuando se está modificando la apariencia de algunas partes de la web.
Imagina que quieres cambiar el tamaño de los títulos, pues agregas tu nuevo código abajo de la hoja de estilos y sobreescribe la instrucción original. Así si te equivocas o luego quieres modificarlo te será más fácil localizar qué es lo que cambiaste y hacer las modificaciones pertinentes.
De verdad que es muy útil.
¿Qué puedo hacer con CSS?
Pues con CSS se pueden hacer virguerías, y más desde la llegada de CSS3.
De hecho hay expertos que se dedican exclusivamente a entender y aplicar este código.
Sin embargo, es el lenguaje de programación con una menor curva de aprendizaje de los que yo conozco, y es un gustazo ver como se le coge el tranquillo en poquísimo tiempo.
Como digo, aunque hay cosas más complejas hay mucho que se pude hacer de forma sencilla.
Te pongo un ejemplo ¿vale?:
a {
border-bottom: 1px solid #fabd29;
color: #333;
font-weight: 400;
}
Este es el CSS de los enlaces de mi web. La a es de anchor que es del texto ancla, o sea, el texto que se clicka.
Si te fijas el primer comando es el un borde abajo, o sea un subrayado. Pues en esa línea está diciendo que todos los enlaces de mi web tienen que tener un subrayado de 1 pixel de grosor, que además tiene que sólido (y no de puntitos o de otro tipo) y que además tienen que tener ese color amarillito.
En la segunda línea dice que tienen que tener ese color casi negro y que el grosor de las letras ha de ser de 400.
Pues bien eso será así en todos los enlaces de mi web si no especifico lo contrario.
Vamos a añadir algo más de código:
a {
border-bottom: 1px solid #fabd29;
color: #333;
font-weight: 400;
font-family: Helvetica, sans-serif;
font-size: 17px;
opacity: 0.5;
}
Con estas 3 líneas de código CSS además he hecho que mis enlaces sean de la fuente Helvética, que tenga un tamaño de letra de 17 píxeles y que sea transparente al 50%.
¿Qué te parece? Muy chulo ¿no?
Si quieres hacer tus pruebas solo tienes que darle a inspeccionar a cualquier página web y verás su CSS y toquetear lo que quieras o ir a w3schools que está genial.
¿Merece la pena aprender CSS?
Respuesta corta: depende.
A ver, no te va a merecer la pena (a no ser que te quieras dedicar a ello) llegar a complejidades medias o altas, pero como te decía antes la curva de aprendizaje es muy suavita, así que si quieres construirte una buena página web o si quieres al menos entender cómo funciona, yo sí te aconsejaría que jugaras un poco con él.
Te aseguro que el CSS se deja querer y si tienes que encargarle a alguien que te haga algo sabrás que es lo que estás pidiendo, o incluso podrás hacer los cambios tu mismo si es algo fácil.
Además, se dice que el código es poesía y siempre es interesante tener algunos conocimientos de programación.
Pero claro, eso ya es cuestión de gustos y si no siempre puedes suscribirte a mi web y yo me encargo de que todo esté genial. 🙂
Muchas gracias por leer y si tienes cualquier duda déjame un comentario y yo encantado te la soluciono.
¿Cómo ofrecer descuentos por suscripciones a la newsletter?
Deja una respuesta