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:

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

{

color:red;

text-align:center;

font-weight:14px;

}

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:

<body>
<h1>EJEMPLOS DE PROPIEDADES CSS.</H1>
<P>Esta es una página web creada, para trabajar las propiedades css sobre 
ella. Se espera que el visitante acabe el curso con total aprovechamiento del 
mismo y adquiera todas las habilidades para a posteriori pueda emprender 
sus propios proyectos web haciendo uso del html y css aprendido.</p>
<p>Espero que mi esfuerzo se vea recompensado con vuestro total dominio 
de las materias aquí mostradas.</p>
<p>En este curso aprenderemos a realizar lo siguiente:</p>
<ul>
<li>Aprenderemos a aplicar distintos tipos de fuentes, tamaños,
colores al texto.</li>
<li>Aprenderemos a alinear los elementos en la zona del documento que 
queramos</li>
<li>Crearemos marcos y bordes para los elementos</li>
<li>etc</li>
</ul>
<p>Para un correcto aprovechamiento del curso, debeis seguir estos pasos:</p>
<ol>
<li>Práctica</li>
<li>Práctica</li>
<li>Práctica</li>
<li>etc</li>
</ol>
</body>

<body>

<h1>EJEMPLOS DE PROPIEDADES CSS.</H1>

<P>Esta es una página web creada, para trabajar las propiedades css sobre

ella. Se espera que el visitante acabe el curso con total aprovechamiento del

mismo y adquiera todas las habilidades para a posteriori pueda emprender

sus propios proyectos web haciendo uso del html y css aprendido.</p>

<p>Espero que mi esfuerzo se vea recompensado con vuestro total dominio

de las materias aquí mostradas.</p>

<p>En este curso aprenderemos a realizar lo siguiente:</p>

<ul>

<li>Aprenderemos a aplicar distintos tipos de fuentes, tamaños,

colores al texto.</li>

<li>Aprenderemos a alinear los elementos en la zona del documento que

queramos</li>

<li>Crearemos marcos y bordes para los elementos</li>

</ul>

<p>Para un correcto aprovechamiento del curso, debeis seguir estos pasos:</p>

<ol>

<li>Práctica</li>

</ol>

</body>

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.