Curso de Css. Propiedades de color, tamaño, alineación y bordes en Css.

Bueno, Unas lineas mas abajo vemos la representación que hace el navegador de la página de pruebas que hemos creado. De momento no tiene mas estilo que el que aporta las etiquetas de html utilizadas, los encabezados, las listas, etc. Empecemos a ver cosillas que podemos retocar con css, a través de la hoja de estilo que tenemos vinculada.

Ya dijimos en páginas anteriores que pondríamos las propiedades de css en la hoja de estilo de forma vertical:

Empecemos nuestra práctica cambiando el estilo de los encabezados de todas las páginas que esten vinculadas a la hoja de estilo. Cambiemos el color, el tamaño y lo vamos a colocar centrado en la página. Para ello escribimos en nuestra hoja de estilo las siguente propiedades:


Si provais estas propiedades, comprobareis como el encabezado h1, se desplaza al centro de la página que muestra el navegador, todo lo que este permita, hemos reducido su tamaño ó tamaño de la fuente y el color a su vez cambia, en este caso a color olive. El tamaño lo hemos cambiado con la propiedad «font» y como medida hemos cojido el pixel. 18px es lo mismo que decir 18 pixels. Hay otro tipo de medidas, por ejemplo el «em». Algunas cosas conviene escalarlas en «em», por ser algo más preciso, todo es cuestión de probar. El color se puede escribir así, es decir tal cual se nombra, (pero en Inglés) ó con su equivalente en Hexadecimal. En internet hay muchos sitios, que cuelgan tablas de construcción de colores en hexadecimal. Seguramente las useis, porque siempre necesitamos o buscamos algún color surgido de una mezcla de colores y para eso no nos queda mas remedio que utilizar esas tablas y sacar el equivalente en hexadecimal.

Esto es fácil de entender. Normalmente solo tenemos un encabezado h1, por página, pero ¿Que pasaría, si en vez de ser un encabezado h1, fuese un h2 y en la página tubiésemos tres h2?. Pues lo que sucedería, es que los tres h2, se centrarian en la página que muestra el navegador y el color del texto de todos sería olive. ¿Como haríamos entonces, si solo quisiesemos dar estilo a uno de los tres encabezados, dejando el resto sin modificar?.Para solucionar esto usaremos un identificador ó «id», este identificador no nos es desconocido, ya lo vimos en el curso de html, cuando vimos la parte de crear marcadores. Identificaríamos el título de esta manera:

<h2
id=»nombredel_id»>
ENCABEZADO<h2>

En la hoja de estilo lo haríamos así, utilizando el símbolo de la almohadilla:

Una vez hecho esto, ya podremos modificar ese título por separado, sin que afecte a los demás. Solo puede haber un mismo nombre de id por página, si quisiesemos identificar más de un elemento con el mismo nombre en la misma página, tendríamos que usar el identificador de clase, class. De esta manera:

<h2
class=»nombredeclase»>
ENCABEZADO<h2>

En la hoja de estilo se representa de esta manera:

Se puede escribir tan solo el nombre de clase sin necesidad de anteponer el elemento y también funciona:

Hay que tener cuidado de no equivocarse y poner el punto «.» para las clases y la almohadilla «#» para los identificadores únicos ó Id.

¿Te ha gustado? Compártelo.