Departamento de Gobernanza Pública y Autogobierno

Como usar estilos CSS

Introducción

Tal y como comentamos en el apartado de accesibilidad, las normas WCAG exigen que el contenido (información) y el formato (presentación) estén separados. Por ello, el editor HTML no permite, como el anterior, aplicar directamente estilos (tamaño de letra, color, tipo de fuente) a nuestros contenidos, por lo que será necesario que todas las declaraciones de estilo y formato esten aparte en un archivo CSS. Tenemos dos modos de lograr esto:

  • Crear el estilo usando las CSS del gestor de portales: Es el metodo mas rápido, pero el estilo estará entonces asociado al portal, por lo que no se mostrará en el contenido si este se visualiza en otro portal. Además de ello, recuerda que ese estilo podría afectar a cualquier otro contenido que se mostrara en dicha página.
  • Establecer una CSS asociada al contenido: Este es el método más correcto. De este modo, el formato creado estará vinculado al contenido, por lo que se mostrará pese a que se visualice en distintos portales.

Entonces, ¿cómo cambio los estilos de mis contenidos?

Supongamos, por ejemplo, que se necesita dar a un texto del contenido color rojo. Los pasos serían:

  1. Crear un archivo CSS en local con las caracteristicas de estilos que luego queramos usar. Para este caso, sería: .estilorojo{color:#dd0000;} Lo guardamos con extensión css, por ejemplo nuevoestilo.css.
  2. Despues, subirlo a la carpeta "styles" de nuestro contenido: Desde opciones avanzadas (Parte superior derecha), css, nuevo, subir archivo. De esta forma "insertamos" la CSS dentro del contenido.
  3. Como la hoja estilos ya esta disponible, utilizaremos en el HTML del contenido los estilos definidos en ella para dar formato. Para aplicar el estilo anterior: <p>Utilizando estilos este <span class="estilorojo">texto</span> es de color rojo.</p>

    El resultado del ejemplo sería: Utilizando estilos este texto es de color rojo.

Hay que tener en cuenta que esta técnica sirve tanto para asociar archivos CSS como cualquier otro tipo de recurso que necesitemos (archivos javascript, por ejemplo).

Fecha de última modificación: 05/06/2015