Tutorial CSS3: Introducción al CSS

Maquetación HTML y CSS katharsix

Ahora que sabemos HTML5 (porque hemos leído el tutorial HTML5 de Katharsix), ¿qué mejor oportunidad para aprender CSS3?

En esta ocasión avanzamos otro poquito para introducirte en el mundo del CSS (del inglés Cascading Style Sheets u hoja de estilos en cascada).

Un poco de historia sobre CSS

El CSS (nos referiremos así en adelante, para abreviar) es un pseudo-lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML).

La especificación de este pseudo-lenguaje es formulada por el W3C (World Wide Web Consortium o Consorcio del World Wide Web) que, además, se encarga de establecer los estándares mínimos para así lograr hacer de internet un lugar más accesible.

A día de la creación de esta entrada, el CSS más utilizado es la versión 2.1, aunque la más actual (todavía en desarrollo) es la versión 3.

Ventajas que supone utilizar CSS

  • Velocidad de carga: Una de las razones primordiales para utilizar estilos en cascada es la agilidad que adquieren los sitios web que utilizan esta tecnología.
  • Independencia del formateo con respecto al código: Esto, junto a que los navegadores permiten utilizar hojas de estilo propias a los visitantes de un sitio web permite una mayor accesibilidad dado que, por ejemplo, alguien con problemas de deficiencia visual pueda crear su propia hoja de estilos con un tamaño de fuente personalizado, colores menos llamativos, etc.
  • Dinamismo visual: Una página web puede disponer de varias hojas de estilos, por lo que podemos hacer cosas realmente dinámicas en cuanto a parte gráfica nos referimos.
  • Código HTML más liviano y comprensible: Aunque puede parecer una tontería, no lo es en absoluto; la razón es que al ser más liviano nos permite una carga de la página mucho más rápida y al ser más comprensible nos permite realizar modificaciones de una forma también más rápida (a los webmasters les viene bien).
  • Independencia apariencia-código: Esta es la razón de mayor peso. Para alguien que se dedica a maquetar sitios web, a la hora de rediseñar el sitio, CSS le permite hacerlo mucho más rápido, ya que si el sitio web a rediseñar cuenta con la misma estructura (elementos, menús y demás) sólo será necesario modificar la hoja de estilos, lo que evita tener que reescribir todo el código HTML.

Formas de implementación

Hay varias formas de implementar código CSS a un documento HTML:

  1. Hoja de estilos externa: Esta es la forma más versátil y la única que recomiendo; un fichero externo contiene todo nuestro código CSS de manera que es completamente independiente el código propio de la página web de su código de formato.
  2. Hoja de estilos interna: Esta forma es a veces utilizada; consiste en incluir el código CSS en la cabecera del sitio (etiquetas head del documento HTML), concretamente dentro de las etiquetas <style> y </style>
  3. Estilos en linea: Esta es, quizá, la forma menos adecuada, versátil y recomendable de todas ya que vincula directamente los estilos de formateo con el código HTML; cuando una de las principales ventajas del CSS es precisamente separar el código HTML del formateo del mismo (hablaremos más tarde de esto), aunque ayuda bastante a comprender el funcionamiento de los estilos en cascada. Su implementación se hace directamente en las etiquetas HTML con la propiedad style.

Una duda que puede surgir al hablar de estos tres tipos de implementación para CSS, en caso de usar los tres simultáneamente, es ¿cuál tiene más prioridad?. La respuesta es que el navegador interpreta nuestro código (tanto HTML como CSS) linealmente de izquierda a derecha y de arriba a abajo (tal y como leemos nosotros); por lo que si lo primero que hacemos es incluir una hoja de estilos externa, luego implementamos una hoja de estilos interna y posteriormente le damos un estilo a una etiqueta HTML concreta, el estilo que visualizaremos será el de la etiqueta HTML por ser el último que el navegador a leído.

En próximas entregas de este tutorial veremos cómo debemos pensar o mentalizarnos para maquetar sitios web con CSS; también veremos algunas de las estructuras más utilizadas y cómo implementarlas en HTML.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

*

DARÍO BALBONTÍN FERNÁNDEZ es el Responsable del tratamiento de los datos personales del usuario y le informa que estos datos serán tratados de conformidad con lo dispuesto en el Reglamento (UE) 2016/679 de 27 de abril (GDPR) y la Ley Orgánica 3/2018 de 5 de diciembre (LOPDGDD), por lo que se le facilita la siguiente información del tratamiento: Fin del tratamiento: mantener una relación comercial y el envío de comunicaciones sobre nuestros productos y servicios. Criterios de conservación de los datos: se conservarán mientras exista un interés mutuo para mantener el fin del tratamiento y cuando ya no sea necesario para tal fin, se suprimirán con medidas de seguridad adecuadas para garantizar la seudonimización de los datos o la destrucción total de los mismos.Comunicación de los datos: No se comunicarán los datos a terceros, salvo obligación legal. Derechos que asisten al usuario: Derecho a retirar el consentimiento en cualquier momento. Derecho de acceso, rectificación, portabilidad y supresión de sus datos y a la limitación u oposición al su tratamiento. Derecho a presentar una reclamación ante la Autoridad de control (agpd.es) si considera que el tratamiento no se ajusta a la normativa vigente. Datos de contacto para ejercer sus derechos: contacto@dariobf.com.

Menú

Centro de preferencias de privacidad

Necesarias

Estas cookies són necesarias para el correcto funcionamiento de este sitio web así como sus funcionalidades internas.

PHPSESSID, gdpr[allowed_cookies], gdpr[consent_types]

Promoción

newsletter_leads

Estadísticas

_gat_gtag_UA_6499264_16, _gid, _ga

Otras