CSS (Cascading Style Sheets), que en español significa «Hojas de estilo en cascada» es un lenguaje que se utiliza para darle estilo a los elementos escritos en un lenguaje de marcado como por ejemplo HTML.
El lenguaje CSS fue creado y desarrollado por W3C (World Wide Web Consortium) por una razón muy simple. Como ya sabes, HTML no está diseñado para tener etiquetas que te ayuden a formatear la página web. Solamente está diseñado para escribir el marcado del sitio.
Cuando se incluyen etiquetas como «font» en HTML, generará muchos problemas. Esto debido a que los sitios web tienen distintas fuentes, fondos de colores y estilos. Por eso mismo, W3C diseñó el lenguaje CSS para situaciones similares a esta.
HTML y CSS tienen una relación muy fuerte, ya que HTML es un lenguaje de marcado (abarca toda la base de un sitio) y CSS resalta en el estilo (se encarga de toda la parte estética del sitio).
Si te preguntas, CSS no es obligatorio, pero estamos seguro de que no quieres poseer un sitio que solo tenga HTML, por el hecho de que este no será agradable a la vista de los visitantes.
CSS
Entonces, el CSS es un lenguaje de diseño gráfico y se emplea para estilizar un documento escrito en un lenguaje de marcado como HTML. En resumen, divide el contenido de su representación visual.
Ventajas de CSS
Cuando un sitio implementa CSS, la diferencia con uno que no lo utiliza es enorme, y definitivamente tiene un impacto en el usuario.
Seguramente has visto alguna vez un sitio web que no puedes cargar por completo y el fondo del mismo es blanco con el texto azul y negro. Esto significa que el sitio no tiene o no se cargó correctamente el CSS.
Antes de la llegada de CSS, el estilo se tenía que incluir en el marcado HTML. Esto lo que quiere decir, es que había que especificar por separado todos los colores de fuente, las alineaciones, los fondos, etc.
CSS te permite estilizar todo en un archivo distinto. Podrás crear el estilo allí y luego integrarlo sobre el marcado HTML. Esto lo que genera es que el marcado HTML quede mucho más limpio y sencillo de mantener.
Resumidamente, con CSS no debes especificar repetidas veces como se visualiza los elementos individuales. Esto lo que va a hacer es ahorrarte tiempo, que el código sea más corto y también menos propenso a problemas.
CSS también te permitirá obtener múltiples estilos en una página HTML, esto lo que hace es que las posibilidades de personalización sean muchísimas. Hoy en día, con la demanda y la impaciencia de los usuarios, esto se volvió más una necesidad que algo simple.
Cómo funciona CSS
CSS emplea una sintaxis sencilla en inglés, con un grupo de reglas que la dirigen. Como hablamos anteriormente, el HTML no fue hecho para estilizar, sino solo para el marcado de la página web.
Ahora te preguntarás, ¿Cómo le aplico un estilo al párrafo? Y te diremos que la estructura de sintaxis CSS es muy sencilla. Esta cuenta con un bloque de declaración y con un selector. Lo primero que debes hacer es seleccionar un elemento y después decidir que quieres hacer con él.
Aun así, hay varias reglas que debes tener en cuenta. Estas son bastante fáciles de saber, así que no tienes de que preocuparte.
El selector lo que hace es apuntar al elemento HTML que quieres darle estilo. El bloque de declaración abarca una o más declaraciones divididas por punto y coma.
Cada una de las declaraciones incluyen un nombre de propiedad CSS y también un valor, divididos por dos puntos. Siempre debe terminar con un punto y coma, y los bloques de declaración deben estar rodeados por llaves.
Ahora, veamos el siguiente ejemplo:
Todos los elementos <p> van a aparecer en negrita y color azul.
<style>
p {
color: blue;
text-weight: bold;
}
<style>Otro ejemplo, los elementos <p> van a estar alineados en el centro, van a tener un ancho de 16x y se verán en color rosa.
<style>
p {
text-align: center;
font-size: 16px;
color: pink;
}
</style>Estilos CSS interno, externo e inline
Ahora, veremos brevemente cuáles son los distintos estilos: Interno, externo e inline. Si quieres ver una explicación más detallada sobre estos estilos, puedes hacerlo aquí.
Hablemos del estilo Interno. Los CSS hechos de esta forma se cargan nuevamente al actualizarse un sitio web, lo que puede generar que aumente el tiempo de carga. Además, ten en cuenta que no podrás utilizarlo en diferentes páginas, ya que está contenido en una sola de ellas. Aun así, tiene sus beneficios. Si tienes todo en una sola página, va a ser más fácil compartir la plantilla para verla previamente.
Pasemos al método Externo, el cual podría ser el más conveniente. Todo se genera en un archivo .css externo. Esto, lo que significa, es que puedes hacer todo el estilizado en un archivo externo y ponerlo en cualquier página que quieras. Además, el estilo Externo puede mejorar el tiempo de carga.
Por último, el estilo Inline. Este trabaja con ciertos elementos que poseen la etiqueta <style>. Cada uno de los componentes debe ser estilizado, por lo cual podría no ser la mejor manera para manejar CSS. En cambio, si deseas cambiar un único elemento, podría ser más útil. Tener una vista previa más rápida o tal vez no puedas entrar a los archivos.
Conclusión
Vamos a dar un simple repaso de lo que vimos:
El lenguaje CSS fue diseñado para trabajar con lenguaje de marcado como HTML. Su función es estilizar una página web.
Hay tres diferentes estilos, puedes utilizar el estilo Externo para varias páginas al mismo tiempo.
Actualmente, lo verás implementado en cualquier sitio, ya que es tan importante como el propio lenguaje de marcado.
Esperamos que te haya sido útil este artículo. Puedes visitar nuestro sitio aquí.
