CSS para nuestra web o blog

Wikipedia nos dice que CSS, hojas de estilo en cascada es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML.

Una hoja de estilos CSS consiste en una serie de reglas. Cada regla consiste en uno o más selectores y un bloque de estilos con los estilos a aplicar para los elementos del documento que cumplan con el selector que les precede. Cada bloque de estilos se define entre llaves, y está formado por una o varias declaraciones de estilo con el formato propiedad:valor;.

Hasta aqui, la teoría, ahora la práctica. Esta muy bien utilizar hojas de estilo en nuestras webs ya que nos dan sensación de unidad, es decir que los mismos objetos (imágenes, tablas, listas ..) tendrán el mismo aspecto en todas las hojas de la web.

Amén de que es muy util tener separado el contenido del estilo, sobre todo de cara afacilitar su lectura a personas que tienen discapacidad visual y necesitan utilizar lectores para navegar en la web.

Actualmente su uso es muy generalizado. Ya que las plantillas que usamos en blog (blogger, wordpress) , gestores de contenidos (joomla...) y plataformas educativas (moodle...) se van en el uso de las CSS.

Pero que hacer cuando queremos modificar la hoja de estilo y no tenemos "ni idea" de como hacerlo?. Hay varias opciones:

hacer un curso acelerado de CSS online o presencial.
chapucear a ver si consigo algo, mediante ensayo y/o error, el archivo de la hoja de estilo a traves de algun editor como ediplus o wordpad
la que yo recomiendo: dejarte guiar ....

Y por dejarte guiar, en el camino de las CSS entiendo explorar y aprender de webs como las que a continuación os muestro y que tienen la ventaja que me dan el código necesario para incluir en la hoja de estilo de mi web o blog:

CSS Zen Garden: http://www.csszengarden.com/
Listamatic: http://css.maxdesign.com.au/index.htm
CSS Table Gallery: http://icant.co.uk/csstablegallery/

CSS Zen Garden

Nos muestra como puede cambiar una web con la utilización de una u otra hoja de estilo. Fijaros en estas imagenes que muestran el mismo contenido de una web pero utilizando tres hojas de estilo diferentes:

Listamatic Maxdesign

Nos ofrece una selección de tipos de listas y nos da el código HTML que debemos introducir en nuestra web ademas delas lineas que tenemos que poner en la hoja de estilo

CSS Table Gallery

Es un servicio similar a Listamatic pero referido a tablas. Nos afrece la posibilidad de ver el efecto de la CSS in situ antes decidirnos por su uso:

Comentarios

Entradas populares de este blog

Fluky.io: Tu "ruleta de la fortuna" personalizada

¡Hoooola a todos! Hacía mucho que no escribía una entrada en la nube TIC, y ya tenía ganas. Hemos hablado de tantas herramientas, que ya casi no quedan sin repetir… En esta ocasión voy a presentaros una web suuuuuúper sencilla y en mi opinión muy práctica: Fluky.io . Son muchas las ocasiones en las que queremos hacer una elección aleatoria en clase (otras muchas nos interesa que la elección parezca aleatoria, pero no lo sea, jeje). Varios de los programas o apps que utilizamos en el aula tienen alguna opción que nos permite hacerlo: el software de la pizarra digital (Notebook, Active Inspire…), webs como ClassDojo, o la app que utilizamos como "cuaderno del profesor” (Additio, iDoceo, CuadernoProfesor…) por ejemplo. Pero esta que os presento hoy hace sencilla, exclusiva y perfectamente eso: elecciones aleatorias. Sin registros ni cosas raras. Cuando entras en fluky.io , solo tienes que pulsar el botón “START” y aparecerá una barra a la izquierda en la que pu...

Quizlet Live, tarjetas de aprendizaje o flash-cards.. ¡en equipo!

En el 2016, nuestra compañera Isabel Etayo ya nos habló sobre Quizlet, una fantástica plataforma que permite al usuario crear tarjetas de aprendizaje , o flash cards , con el fin de practicar como si de tarjetas físicas se tratase: por un lado escribes un término y por el otro la definición; o una operación y por el otro el resultado... Por aquel entonces la plataforma era bastante limitada, pero en los últimos años han dado una vuelta de tuerca y ahora tiene un potencial increíble. Las tarjetas, que en principio solo contenían palabras y definiciones (y en algunos casos, imágenes), permiten ahora colocar partes de un mapa, dibujos, etc. Además, puede practicarse con ellas mediante distintos juegos interactivos que harán del estudio un rato entretenido. Pero hoy no vengo aquí a hablaros de Quizlet , sino de su versión de equipo: Quizlet Live , una opción que desatará la adrenalina de nuestro alumnado, ¡garantizado! Para jugar a Quizlet Live en primer lugar debemos crear las tarj...

descarga vídeos de cualquier web con #StreamTransport

Meses atrás os mostré un truco para descargar vídeos desde #Chrome fuera cual fuese la web. Sin embargo, el método podía resultar un tanto farragoso, además del hecho de que para algunas webs, como la de EITB (TV autonómica vasca) no funciona. Pero hace unos días Iñaki (no diré apellido) del Berritzegune de Irún me enseñó una manera de poder descargar vídeos de cualquier web sin tener que recurrir al "método largo" que os citaba en el post de hace unos meses, mediante un software gratuito: Stream Transport . Lo que hace Stream Transport es lo que os enseñé a hacer anteriormente de forma manual, pero de una forma rápida y sencilla: coge la extensión de vídeo oculto en el código de la página web y nos descarga el archivo de vídeo. Vídeo-tutorial vídeotutorial realizado por obiwan2208 Características Descarga vídeos de webs bajo protocolos HTTP, RTMP, RTMPT, RTMPE, RTMPTE, lo que lo hace compatible casi con la totalidad de pági...