Síntesis de una Propiedad Css.

Ya sabemos introducir elementos en una página web, utilizando html, ahora veremos como modificar esos elementos con propiedades css. Para ello debemos conocer primero la forma que tiene o la síntesis de una propiedad css, que seria así:

elemento {propiedad:valor}

Donde «elemento» es el elemento de nuestra página que queremos aplicar estilo. «Propiedad» se refiere al tipo de propiedad que queremos cambiar, ya sea el color de texto, tamaño, alineación, etc, a la cual le aplicamos un valor, ya sea un valor expresado en numeros o de otro género. Por ejemplo, tenemos un encabezado, etiquetado con <h1> y queremos que se presente de color rojo el texto. El código css quedaria así:

h1{color:red}

Con este simple código en nuestra hoja de estilo cambiariamos todos los encabezados h1 de nuestras páginas web que estuviesen vinculadas a dicha hoja, ya sean diez o cien mil páginas. Entre las llaves { } podemos poner cuantas propiedades css queramos cambiar para ese elemento, separando cada propiedad y su correspondiente valor con un punto y coma «;». Ejemplo:

h1{color:red;text-align:center;font-weight:14px;etc}

El problema de poner muchas propiedades en la misma linea reside en su comprensión posterior, por ello lo mejor para evitar esto, es establecer las propiedades en vertical, sin olvidar poner el punto y coma al final de cada linea, de esta manera:

Como veis poner las propiedades en vertical hace bastante más entendible el código y su posterior modificación. Ya tenemos todo a punto para empezar a trabajar sobre nuestros archivos, tan sólo nos queda introducir los elementos en nuestra página web creada y empezar a ver los distintos tipos de propiedad css que podemos utilizar. Todos estos ejemplos se van a realizar en la parte del Body de nuestra página web creada, así que omitiré el resto de etiquetas básicas, para clarificar y simplificar lo explicado. Estos serán los elementos del contenido de nuestra primera página y su estructura html:

  • Un encabezado o Título.
  • Párrafos de texto.
  • Una lista desordenada.
  • Una lista ordenada.

 

El html del cuerpo quedaría así con estos elementos:

En la siguiente página veremos el resultado de este marcado en el navegador y empezaremos a aplicar propiedades css.

¿Te ha gustado? Compártelo.