La cuestión es que últimamente recibo muchas preguntas que denotan un gran desconocimiento de lo qué es CSS, para qué sirve, cómo se utiliza, dónde se incluye y otras cosas muy básicas que con el tiempo que llevo publicando ya superé personalmente hace un tiempo (poco, ciertamente) y que quizás omito en las explicaciones de manera inconsciente cuando algunos parece ser que sí que las necesitáis.
Así que cómo por aquí estamos alumnos de todos los cursos, el truquillo de hoy lo publicaré en dos entregas para que sirva también para entender al menos un poco que es eso del CSS (Cascade Style Sheets, Hojas de estilo en cascada). Pero muy someramente, que no me veo capaz de realizar un buen manual completo sobre el particular. Para el que quiera ver un poquito más, también sin complicaciones, que eche un vistazo a este enlace y para el que realmente quiera aprender a fondo, recomiendo visita a este y este otro.
Introducción y nomenclatura
Las hojas de estilo pretenden servir para separar lo que es la estructura de una página web de lo que es su formato, su aspecto. De esta manera uno programa con cajas HTML los contenidos del sitio y luego, desde un fichero aparte (un archivo con extensión .css), se dicta cómo se presentarán esas cajas en cuanto a colores, fuentes, ancho, fondos, etc.
La gran ventaja es que si en el futuro decidimos cambiar algo, no habrá que ir cambiando todas las páginas una por una, sino que simplemente cambiamos las propiedades de un tipo u otro de caja desde la hoja de estilo y automáticamente se cambiará ese algo en todas las páginas.
La hoja de estilo es un conjunto de reglas, compuestas a su vez de selectores y declaraciones. El selector es lo que se usará como apodo o nombre de lo que queremos configurar desde la hoja y aplicar en el HTML y las declaraciones son propiedades a las que se le asignan los valores deseados (más información sobre nomenclatura CSS)
Utilización
Una vez que por ejemplo ponemos lo anterior en nuestra hoja de estilo, observaremos que en nuestra web... no pasa nada. Ya dije que el selector es lo que relaciona HTML y CSS por lo que si queremos que una caja adopte esos valores de ancho, color de fondo, borde y tamaño de letra (eso es lo que hemos definido antes), necesitamos incluir ese selector de esta manera en la caja en cuestión:
<div class="cajacutre">Hola mundo</div>
Sabiendo un poco de inglés la cosa resulta relativamente fácil. Lo que hemos añadido es como una marca que le dice al intérprete del navegador que esa caja tiene que ser de un determinado tipo o clase. Una clase que antes hemos dicho que se llama selector y que tiene unas propiedades y valores concretos definidos en la hoja de estilo.
Ahora sí que veremos como cambia el aspecto de esa caja, mientras que todas las demás que no lleven ese cajacutre seguirán con el aspecto genérico.
Normalmente la cosa se hace al revés y primero se incluyen selectores en la estructura HTML para luego ir configurando y cambiando el CSS según queramos ir cambiando cosas, pero no he encontrado otra forma de explicarlo.
De cualquier manera, cuando incluimos una regla en una hoja de estilo o modificamos una existente, lo que sucede es que todas las cajas marcadas con ese selector cambiarán su aspecto según las propiedades-valores que hayamos definido.
Y al contrario, si queremos que una caja sin marcar comience a tener un aspecto definido con reglas con CSS, deberemos añadirle el selector oportuno. En cualquier caso resulta una manera muy cómoda de cambiar de una tacada cajas homogéneas de nuestro sito o incluso el aspecto de todas las páginas. Buen invento este.
Dónde va el CSS
He dicho antes que el estilo se ha de poner en un fichero .css. Se crea el fichero con todas las reglas, se aloja, se obtiene la dirección y en la página HTML se incluye con una etiqueta link. Ese sería el procedimiento normal y esta la línea que habría que incluir en la cabecera de nuestra plantilla. En el caso de Blogger, entre la etiqueta <head> y el <b:skin><![CDATA[/*:
<link href="http://loquesea.com/estilo.css" rel="stylesheet" type="text/css"/>
Pero hay otras formas. Por ejemplo se puede poner estilo directamente mezclado con el HTML (aunque parece ser que no es algo muy ortodoxo), insertándolo entre etiquetas style:
<style>
.cajacutre {
width: 100px;
background-color: black;
border: 1px solid red;
font-size: 12px;
}
</style>
.cajacutre {
width: 100px;
background-color: black;
border: 1px solid red;
font-size: 12px;
}
</style>
E incluso se puede insertar dentro de una caja en concreto. En este caso no se necesita indicar selector alguno pues se entiende que ese estilo afectará a esa única caja:
<div style="widht: 100px; background-color: black;">Hola mundo</div>
Y además está Blogger, que usa su propio lenguaje y su propio sistema, y que aunque admite cargar hojas de estilo externas y las otras dos opciones anteriores, está preparado para que el CSS se inserte directamente en la plantilla. Eso entre otras muchas cosas raras que hace...
En Blogger las reglas van entre las etiquetas skin, esto es entre <b:skin><![CDATA[/* y ]]></b:skin>. Si editáis la plantilla y miráis las tripas, comprobaréis que hay muchas cosas entre ambas. Todo eso es el CSS, lo que marca el aspecto de vuestro blog.
Con Vista Previa y sin pinchar en ningún caso en Guardar si se trata sólo de probar, podréis ver el efecto que causa cambiar el valor de alguna propiedad. También podéis probar a quitar una declaración o añadir otra al selector que gustéis.
Y para los que tenga una plantilla de las del Nuevo Diseñador existe una opción adicional para no tocar la plantilla, que sería incluyendo el CSS dentro del cajetín del apartado Avanzado del diseñador.
No sé si me quedé corto o largo con la explicación, pero os espero en la próxima entrada -mañana- para rematar con el ejemplo sobre Imágenes redondas
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Buenas tardes.
ResponderEliminarGracias por la explicacion, pero yo, que soy torpe, pregunto. Si en vez de modificar alguna parte de mi plantilla, quiero instalar una externa que ya viene preparada. Como lo hago?
Muchas gracias
Para eso tienes que ir al Escritorio (o Panel de Control) de Blogger. Luego seleccionas en el menú lateral "Plantilla" y arriba a la izquierda verás un botón que dice "Crear/Restablecer copia de seguridad". Al pinchar en él de las dos opciones que hay la segunda es para lo que quieres (Sube una plantilla desde un archivo de tu equipo)
EliminarHola Oloman, yo quisiera cambiar la fuente únicamente en las pestañas que salen bajo mi cabecera, y trasteando el editor de html sólo he conseguido cambiarlo haciendo que todo el resto del blog también cambie (Cambiando el valor en outer-wrapper).
ResponderEliminar¿Podría hacerlo mediante CSS?
Muchas gracias!
Claro y de facto es lo que has hecho. Cuando cambiaste el valor de outer-wrapper cambiaste el CSS. El editor se llama HTML pero realmente hay tanto HTML como CSS en nuestras plantillas.
EliminarPero bueno, antes de nada prueba con el Diseñador de Plantillas, que si te funciona desde allí se puede cambiar fácilmente lo que quieres.
hola,
ResponderEliminarsoy nueva en blogger, bueno, de hecho en todo lo relacionado a blogs y en PageSpeed de mi blog me da este mensaje que no logro solucionar
Es necesario mover 1 bloque(s) de estilo del cuerpo del documento al encabezado.
Es necesario mover el nodo de enlace http://www.blogger.com/.../228702327-lightbox_bundle.css al encabezado del documento
Como resuelvo?
Gracias.
Ese nodo lo inserta Blogger automáticamente y no creo que sea fácil cambiarlo. De todas maneras lo de PageSpeed son sugerencias y no siempre es posible salvarlo todo.
Eliminar