1. Qué es el código CSS
Todos los sitios web creados mediante el lenguaje de marcado HTML están basados en un principio esencial, que es la separación del contenido de su presentación. Es decir, por una parte se define la estructura y el contenido de los documentos, mediante el código HTML propiamente dicho, mientras que su apariencia se controla mediante ficheros externos que contienen la definición de los estilos visuales, expresados en un código especial, denominado «hojas de estilo en cascada», aunque se conoce habitualmente por el acrónimo CSS.
No es propósito de este curso abordar en profundidad el lenguaje CSS, ya que su explicación y práctica exigirían mucho más tiempo del que disponemos. Sin embargo, intentaremos aproximarnos a su conocimiento mediante un enfoque práctico, a través de algunos ejemplos que permitirán a alumnos y alumnas aprender las técnicas necesarias para manipularlo y al mismo tiempo hacerse una idea cabal de las posibilidades que ofrece para personalizar los sitios web de los centros educativos.
2. Manipular el código CSS de forma segura y eficiente
WordPress incorpora un editor interno que permite modificar los ficheros de los temas directamente, desde el propio interfaz de administración de WordPress. Sin embargo, en las instalaciones de WordPress del PNTE este procedimiento está desactivado, no solo por motivos de seguridad, sino para evitar que la manipulación del código CSS o PHP haga imposible el mantenimiento futuro de los sitios web. En efecto, si el código de los temas se modifica directamente, sin ninguna clase de control y sin posibilidad de diferenciar el código original de sus modificaciones, es imposible para los servicios del PNTE realizar las actualizaciones necesarias y prestar el adecuado soporte a los responsables de los sitios web entonces.
¿Qué hacer entonces si se quiere personalizar la apariencia de un sitio web más allá de las opciones que ofrece el tema seleccionado? La respuesta la proporciona el propio WordPress, ya que desde su versión 4.7 dispone de una función muy potente para añadir estilos CSS desde el personalizador. El procedimiento no puede ser más sencillo: hay que ir al menú Apariencia > Personalizar > CSS adicional (la última opción del personalizador), y escribir en el espacio disponible las reglas de CSS que en cada caso interesen. Las ventajas de hacerlo así son indiscutibles:
- Los estilos personalizados tienen prioridad sobre cualesquiera otros, ya que son los últimos que lee el navegador durante el proceso de carga de un sitio web. Por tanto, permiten alterar el comportamiento del código CSS original sin anularlo o borrarlo.
- Todos los estilos CSS definidos desde el personalizador de WordPress quedan anotados en un mismo lugar, lo cual permite revisarlos una y otra vez, copiarlos y pegarlos desde y hacia otros dispositivos, desactivarlos temporal o definitivamente, etc.
- Los fallos que se puedan cometer al editar el CSS son muy fáciles de reparar, ya que los estilos personalizados se pueden desactivar con gran facilidad. Si un estilo que hemos definido por nuestra cuenta afea o arruina el aspecto del sitio web, basta con comentarlo o borrarlo y comenzar de nuevo.
- La función de CSS adicional del personalizador de WordPress cuenta con un validador de código CSS, que previene la comisión de errores y permite autocompletar la definición de las clases, los atributos, etc.
- La técnica de modificación de los estilos CSS desde el personalizador sirve para todos los temas y todas las circunstancias; esto significa que los estilos de cualquier tema para WordPress se pueden personalizar exactamente de la misma manera. Conviene tener en cuenta, no obstante, que si se cambia de tema después de haber definido estilos personalizados, dichos estilos pueden no tener ningún efecto sobre el nuevo tema, o incluso entrar en conflicto con él.
A continuación incluimos un vídeo que detalla el procedimiento de creación y edición de estilos CSS mediante el personalizador de WordPress:
La única dificultad seria que plantea la utilización de esta técnica deriva de la propia naturaleza del código CSS, que tiene unas reglas y una sintaxis que es preciso conocer y practicar, lo cual puede desanimar a algunos usuarios. Por otro lado, el código CSS está oculto a la vista en condiciones normales, lo cual supone una dificultad adicional, ya que no es posible modificar un estilo si no hay forma de averiguar qué estilo se debe modificar. Afortunadamente, los navegadores modernos ofrecen una función de inspección de código que se puede activar haciendo clic con el botón derecho sobre cualquier zona de la página web, y seleccionando a continuación la opción «Inspeccionar» (Google Chrome) o «Inspeccionar elemento» (Firefox). Tanto en el vídeo que acabamos de incluir como en el que ofrecemos a continuación se explica cómo activar esta función e identificar los estilos CSS que en cada caso deban modificarse. Aconsejamos a los alumnos y alumnas del curso que vean ambos videotutoriales con la debida atención.
3. Ejemplos de estilos CSS para realizar prácticas
A continuación proponemos una serie de sencillos ejemplos de estilos CSS personalizados que se pueden probar en los sitios de práctica que han elaborado los alumnos y alumnas de este curso. Es posible que no todos los estilos sirvan para todos los temas, pero esa aparente desventaja es en realidad beneficiosa, ya que nos permitirá ir comprendiendo la naturaleza del código CSS y sus infinitas variaciones. Varios de entre los ejemplos que figuran a continuación se utilizan en este mismo sitio web:
1. Estilo para ocultar el título y la descripción del sitio. Se utiliza en este mismo sitio para evitar que aparezcan en la parte superior derecha de la cabecera el nombre del sitio y su descripción, ya que, especialmente en dispositivos móviles, su aspecto es poco satisfactorio.
.site-title, .site-description {
display:none;
}
2. Estilo para conseguir que toda el área del pie de página tenga un fondo de color púrpura, con texto y enlaces de color blanco. Se utiliza en este mismo sitio web. Los códigos o nombres de los colores en HTML pueden obtenerse en páginas como HTML Color Picker o HTML Color Names.
.site-footer, .site-footer a {
background-color:#660033;
color: white;
}
3. Estilo para que los párrafos de primer nivel vayan en color rojo. Este estilo afecta a todos los titulares de primer nivel del sitio en el que se defina.
h1 {
color:red;
}
El estilo se puede precisar para que solo afecte a los titulares de determinadas páginas; por ejemplo, si solo queremos aplicarlo a una entrada, cuyo ID es el «1», utilizaríamos el siguiente código
.postid-1 h1 {
color:red;
}
4. Estilo para poner un borde sólido de 2 pixels y color negro a las entradas fijas o «sticky posts». Este estilo se utiliza en este mismo sitio web, para destacar las entradas marcadas como fijas.
.sticky {
border: 2px solid #000000;
}
5. Estilos para los widgets del pie de página, ambos aplicados en este mismo sitio web. El primero de ellos sirve centrar, subrayar y dar énfasis a los títulos de los widgets. El segundo, para centrar el contenido de esos mismos widgets.
.footer-widgets .widget-title {
text-align: center;
text-decoration: underline;
font-weight: 900;
}
.footer-widget-area{
text-align: center;
}
Un estilo semejante, aunque algo más complejo, nos sirve para centrar todos los widgets de entradas destacadas y de páginas destacadas de la página de inicio de este mismo sitio web, que tiene el ID 62.
.page-id-62 #featured-post-3, #featured-post-4, #featured-post-5, #media_image-3, #media_image-4, #media_image-5 {
text-align:center;
}
6. Estilos para eliminar el subrayado de los enlaces; de acuerdo con el primer estilo, el subrayado solo aparecerá cuando se pase el ratón por encima. Se ha aplicado a este mismo sitio web, para así evitar que todos los enlaces aparezcan subrayados por defecto; el segundo estilo sirve para que el subrayado solo se aplique cuando se pasa el ratón por encima.
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
7. Estilo para conseguir que la letra negrita tenga más intensidad de lo normal. Lo hemos activado en este mismo sitio web porque originalmente la letra en negrita apenas se distinguía de la letra normal.
strong {
font-weight: 900;
}
Si se quiere que la negrita aparezca, además, en color azul medianoche, habría que utilizar este otro estilo:
strong {
font-weight: 900;
color:midnightblue;
}
8. Estilo para crear una caja con bordes rojos y un fondo también rojo, pero de un matiz diferente, a modo de aviso con información importante. Para que pueda funcionar, hay que encerrar el texto en una etiqueta <div>, y aplicarle la clase .caja-texto-roja. Véase Spruce Up Your Genesis-Powered Website with Content Boxes and Color Buttons. El ejemplo de aplicación de este widget puede verse en el área lateral derecha de esta misma página:
.caja-texto-roja {
margin: 0 0 25px;
overflow: hidden;
padding: 20px;
background-color: #f9dbdb;
border: 1px solid #e9b3b3;
}
9. Estilos para modificar la apariencia de un widget individual, cuyo ID es «text-18». Han sido adaptados a partir de los que se describen en el artículo Style Widgets Individually – Beginners Guide. El primer estilo afecta al contenido del widget, y el segundo al título. Un ejemplo de aplicación de ambos estilo puede verse en el widget que aparece en el área lateral derecha de esta misma página:
#text-18 {
background: #699135;
color: white;
padding: 15px;
}
#text-18 .widget-title {
font-size: 2.7rem;
color: black;
}
10. Estilo para modificar el aspecto de la barra lateral derecha del tema, cuyo ID es «genesis-sidebar-primary». Este estilo solo afecta a la entrada con el ID 404. El ejemplo de aplicación de este widget puede verse en el área lateral derecha de esta misma página:
.postid-404 #genesis-sidebar-primary {
background-color: azure;
border: solid 1px aquamarine;
padding: 10px;
}
11. Estilo para conseguir que los listados de entradas generados por el plugin Display Posts Shortcode tengan exactamente la misma apariencia que los demás listados creados por los widgets estándar de WordPress. El efecto puede verse en la barra lateral de esta misma página, en el widget titulado «Contenido de la cuarta sesión»
.widget ol.display-posts-listing > li {
margin-bottom: 0.5em;
padding-bottom: 0.5em;
padding-left: 0;
text-indent: initial;
}
12. Estilo para conseguir que los listados de entradas generados por el plugin List Categories tengan exactamente la misma apariencia que los demás listados creados por los widgets estándar de WordPress. El efecto puede verse en la barra lateral de esta misma página, en el widget titulado «Todas las sesiones del curso».
.widget li.cat-item {
margin-bottom: 0.5em;
padding-bottom: 0.5em;
}
4. Consejos para editar el CSS desde el personalizador
Cuando se vayan a editar los estilos CSS desde el personalizador de temas de WordPress, conviene tener en cuenta algunos consejos básicos:
- Se debe actuar con cuidado y paso a paso, yendo siempre de lo más fácil y conocido a lo más complejo. No conviene definir muchos estilos a la vez, porque eso puede dar lugar a confusión y dificultar la identificación de los errores.
- No hay que definir muchos estilos solo porque resulte fácil crearlos, o porque «quedan bonitos». Los estilos deben tener un claro propósito funcional y no deben ser utilizados como mero adorno.
- Cada vez que se crea un estilo, hay que añadirle una línea de comentarios, para poder identificar posteriormente lo que se ha hecho. En CSS, los comentarios se definen así: /* Esto es un comentario */.
- Para poder avanzar en el conocimiento del CSS, es necesario investigar, buscar información, y hacer pruebas. En Internet hay una verdadera multitud de tutoriales sobre CSS y una cantidad interminable de ejemplos, tanto para los temas de la familia Genesis, como para otros temas.
5. Recursos útiles sobre CSS
A continuación incluimos algunos recursos online que serán muy útiles a todas las personas interesadas en aprender CSS y utilizar estilos para mejorar la apariencia y funcionalidad de sus sitios web:
- CodeMyUI: repositorio especializado en estilos para construir y mejorar interfaces de usuario.
- Codepad: estilos CSS, scripts en distintos lenguajes de programación, etc.
- Codepen: un enorme repositorio en el que publicar y compartir scripts en diversos lenguajes, CSS incluido.
- CSSDeck: otro gran repositorio, en esta ocasión exclusivamente de CSS.
- CSSFlow: no solo contiene estilos en CSS, sino incluso interfaces de usuario completos (estos últimos de pago).
- CSS Tricks: muchos trucos y «snippets», aunque de un nivel bastante avanzado.
- CSS Tutorial de W3Shools: una auténtica enciclopedia del CSS, con todo tipo de ejemplos.
- CSS Zen Garden: bellísimos diseños en CSS. En la mayoría de los casos son muy complejos, pero pueden servir como fuente de inspiración.
- Little Snippets: estupendos y muy elegantes snippets en CSS.