CSS son las siglas en inglés de “Cascading Style Sheets” que hace referencia a las hojas de estilo en cascada. Básicamente se trata de un estándar utilizado en el diseño web que sirve para dotar de cualidades visuales a una página.
Este código unido al HTML permite darle color, forma, posición y otras características a una página web. En resumen, el código HTML dota de información y estructura a una página mientras que el CSS le dota de las características visuales: negritas, colores, márgenes, tamaños…
¿Para qué sirve el código CSS?
Su función es crear reglas para decirle a nuestra web cómo queremos que muestre la información y guardar comandos para elementos de estilo, es decir, vincular nuestra plantilla HTML a un archivo CSS para que el navegar entienda cómo debe mostrar por ejemplo, el color de los títulos o los textos en negrita.
Diferencias entre HTML y CSS
HTML, en sus siglas inglés, Hyper Text Markup Language, significa “lenguaje de marcas de hipertexto”, es un lenguaje que sirve para dar estructura al contenido de un sitio web.
No se puede considerar un lenguaje de programación ya que no nos permite dar funcionalidades dinámicas a sus elementos, solo generar la estructura de la web.
Como hemos mencionado anteriormente, el CSS añade propiedades de forma, color, tamaño, márgenes a elementos determinados de HTML, consiguiendo así mejores resultados para la experiencia final del usuario.
Características de CSS
Ya sabemos que se ocupa de toda la parte visual, pero, ¿cuáles son sus características?
- Sirve para complementar otros lenguajes como el HTML.
- Nos permite crear bloques de instrucciones anidadas: esto significa que podemos hacer modificaciones generales aplicándolas al conjunto simplificándonos todo el trabajo.
- Funciona en todos los navegadores y plataformas: el CSS es ampliamente utilizado lo que hace que sea compatible con todos ellos sin problema.
- Mejora la accesibilidad web: al estar separada la parte de texto de la visual, hacemos que el funcionamiento de la web genere una mejor usabilidad.
- Tiene una sintaxis específica.
- Nos permite una gran libertad creativa.
- Es más preciso ya que le podemos indicar el elemento exacto donde queremos aplicar las propiedades.
Ventajas CSS
Y finalmente es importante destacar las ventajas que ha incorporada a la presentación de las páginas webs así como al trabajo de los desarrolladores:
- Más fácil de usar: nos permite guardar y almacenar los estilos de una web de forma independiente al contenido, haciendo mucho más fácil la intervención en esta.
- Optimiza la edición: en determinadas páginas el flujo de información puede ser muy grande y editar cada página una a una puede ser un trabajo muy engorroso, por ese motivo contar con un lenguaje que permita aplicar estilos a todas ellas nos ahorrará mucho tiempo.
- Gran accesibilidad: actualmente accedemos a una web desde distintos dispositivos: PC, móvil, tablet… esto provoca que la página tenga que estar optimizada y por suerte CSS facilita esa accesibilidad gracias a hojas de estilo estandarizadas.
- Limpieza de código: al estar separado del código HTML nos asegura que este y el CSS son independientes y no habrá líneas de código inservibles o que puedan dar lugar a errores.
Sintaxis del selector
Cuando creamos una instrucción en CSS se hace bajo la determinación de un selector, que nos indica sobre que elemento o bloque HTML va a actuar, sus propiedades que definirán las características que se modificarán y el valor, que indicará el valor cuantitativo o cualitativo de la propiedad que se verá cambiada.
P {color: #000000}
En este ejemplo básico, actuaría selector «P» (elemento párrafo) y la propiedad color (color del texto) y el valor #000000 (color negro), por lo cual, el resultado esperado sería que todos los elementos «p» de nuestra web el color del texto sería negro.
Propiedades básicas
Existen más de 100 propiedades distintas de CSS, por lo que conocerlas el correcto funcionamiento de todas ellas solo está al alcance de los programadores front-end más experimentados. Por ahora, os proponemos conocer aquellas más utilizadas y que permitan llegar a cubrir las necesidades básicas:
Width y height.
Estas propiedades como su nombre indica estarán relacionadas con el ancho y alto de los elementos HTML que queramos modificar, como una imagen o un bloque de texto. Sus valores pueden estar en pixeles (px), em, rem o porcentaje (%). Existe también una variación sobre estas propiedades las cuales ajustan sus tamaños máximos y mínimos, muy útiles para sitios adaptables a cualquier dispositivo (max-width; min-width; max-height; min-height)
Background y Border
Con estos elementos podremos dar forma a los bloques de HTLML tanto en su fondo (background) como en su borde.
Background es la propiedad con la que podremos configurar el fondo, algunas de las características específicas más importantes son:
- background-color con la que modificaremos el color de fondo;
- background-image, con la que colocaremos una imagen llamándola a través de una URL donde esté ubicada.
- background-size, con la que podremos adaptar de forma relativa o absoluta las proporciones del fondo.
- background-position, con la que podremos fijar la posición de la imagen de fondo dentro de nuestro bloque
- background-repeat, con esta propiedad controlaremos si queremos que la imagen establecida de fondo se repita en el fondo o no.
En cuanto a la propiedad Border, se debe establecer su grosor (border-width); estilo (border-style) y color (border-color). En cuanto al estilo, los más comunes son solid, dotted, double o dashed. Aunque estas son sus instrucciones específicas también se pueden poner de forma básica con la propiedad border. Ejemplo:
- .bloque1 { border: 1px; solid; blue;}
Otra de las funciones especiales de esta propiedad es que se pueden configurar de forma independiente por cada lado (top, right, bottom y left), de forma separada con instrucciones específicas o simplemente poniendo sus valores, eso sí siguiendo el orden mencionado (en dirección a las agujas del reloj). Ejemplo:
- .bloque1 { border: 1px 2px 1px 2px;}
- .bloque1 { border-top:1px; border-rigth:2px; border-bottom: 1px; border-left:2px}
Por último, la instrucción border-radius, que nos permitirá redondear las esquinas de la caja o bloque a la que estemos dando estilo. El valor se determina en «px», «%» o «em» y como funcionalidad especial podremos modificar tanto el radio horizontal como el vertical, pudiendo crear unas formas mucho más creativas.
- .bloque1 {border-radius: 5px} – Todas las esquinas se redondearían con un radio de 5px.
- .bloque1 {border-radius: 5px 2em} – Todas las esquinas se redondearían con un radio horizontal de 5px y radio vertical de 2em.
- .bloque1 {border-bottom-right-radius: 5px 2em} – Los cambios solo afectarían a la esquina inferior derecha.
Color, Font-family, Font-size, Font-Style y Font-Weight
Los textos también son parte importante de un contenido web y por eso es fundamental conocer tambíen sus propiedades básicas, que son:
Font-family: Establece la fuente específica o familia que queremos que nuestro contenido tenga. Podemos establecer varias fuentes o familias, para que en caso de no estar disponible alguna en el equipo del usuario se disponga de alternativas. Ejemplo:
- bloque1 {font-family: «Verdana», sans-serif;} – Aquí establecemos como fuente principal «Verdana» pero si el usuario no dispone de ella, se llamaría a fuentes de la familia Sans-serif
Font-size: Con esta propiedad determinamos el tamaño de la fuente que queramos mostrar en nuestro diseño web. Los valores podrán expresarse en «px», «em», «rem» o «%», aunque la más usada es «em» por ser una unidad proporcional, con lo que si el usuario, por ejemplo, realiza un zoom con el navegador o aumenta la fuente en su configuración, todas las fuentes lo harán en proporción a esa modificación.
Color: Esta es la instrucción con la daremos color a nuestro texto. Podremos hacerlo a través del nombre del color si es uno de los colores soportados por los principales navegadores, con hexadecimal o con valores RGB o HSL. Con estos últimos podemos añadir un último valor haciendo referencia al índice de transparencia que va desde el 0.00 al 1, siendo por ejemplo, un valor de 0.50 un 50% de transparencia. Ejemplo:
- bloque1 {Color: #000080} – Valor Hexadecimal
- bloque1 {Color: navy} – Valor expresado con el nombre de color soportado (mismo que el anterior)
- bloque1 {Color: rgb(0, 0, 128, 0.50)} – Mismo color expresado en RGB y con una transparencia del 50%.
- bloque1 {Color: hsl(240, 100%, 25%, 0.50)} – Mismo color expresado en HSL, sus valores hacen referencia al matiz expresado en grados que iría de 1º a 360º, saturación y brillo expresados en porcentajes. Por último el índice de transparencia.
Font Style: Con esta propiedad podremos variar el estilo de nuestro texto, siendo por defecto «normal» y pudiendo elegir «italic» (cursiva) u «oblique».
Font Weight: Esta es la propiedad que buscamos si queremos poner nuestro texto en negrita. Para lograrlo tan solo tendremos que añadir el valor «bold». Su valor por defecto es «normal», y se pueden usar otros valores relativos como «lighter» o «bolder», o usar los valores numéricos de pesos establecidos entre 100 (Trazo fino), 400 (normal), 700 (negrita) y 950 (extra-negrita).
Margin y Padding
Terminamos nuestro repaso de elementos básicos con Margin y Padding que hacen referencia a los márgenes exteriores (márgen), interiores (relleno) de los elementos HTML de los que hagamos referencia.
Sus valores, como ocurría con la propiedad border se expresan en px, em, rem o % y pueden estar referenciados de forma general, con un valor que aplique a todos los márgenes o de forma específica, introduciendo los valores top, right, bottom, left o siguiendo el orden establecido para sus valores. Ejemplos:
- .bloque1 { padding: 1px;}
- .bloque1 { padding: 1px 2px 1px 2px;}
- .bloque1 { padding-top:1px; padding-rigth:2%; padding-bottom: 1em; padding-left:2px}
Estos son todos los conceptos básicos que deberías conocer para empezar a dar estilo a tu web de manera más profesional, pero siempre te cruzarás con algún problema en el que tendrás que investigar y descubrir nuevas propiedades. Para ello te recomendamos el sitio W3 School donde podrás ampliar y avanzar en tus conocimientos sobre CSS.
Y si te conviertes en un profesional del Front-End y quieres dedicarte a ello, no olvides que en Viewnext tenemos un equipo en continuo crecimiento de programadores/as Front-End y siempre existen vacantes que pueden interesarte. ¡Echa un vistazo!.
