CSS básico. Ejemplo con imágenes redondas (1) – Money – Hard drive

Iba sólo a explicar cómo cambiar la silueta exterior de cualquier imagen mediante unas sencillas reglas CSS para que esta se viera redonda, pero eso es tan fácil que finalmente voy a aprovechar la entrada para otros fines.

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 aeste enlace y para el que realmente quiera aprender a fondo, recomiendo visita aeste yeste 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 sobrenomenclatura 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:

divclass="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 llamaselector 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 esecajacutre 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 etiquetalink. 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 etiquetahead y elb: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 etiquetasstyle:

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 etiquetasskin, esto es entreb: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.

ConVista Previa y sin pinchar en ningún caso enGuardar 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 delNuevo 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.