Sintaxis CSS
En el momento de definir los estilos debemos tener en cuenta que estos se pueden declarar directamente sobre la etiqueta HTML o que podemos definirlos en su conjunto para toda la página HTML.
Definición en la propia etiqueta html
La sintaxis básica para especificar un estilo en una etiqueta determinada es:
<etiqueta STYLE="propiedad:valor;....">... </etiqueta>
Donde etiqueta representa un TAG estandar del HTML y la palabra STYLE es el atributo que indica que a dicha etiqueta le vamos a asociar un estilo. El resto ya es la definición propia del estilo que viene definido por un par propiedad:valor separados entre si por dos puntos y del resto de pares por un punto y coma.
En propiedad indicamos que caracteristica (tipo de fuente, color, etc...) queremos cambiar y en valor el valor que le damos.
Por ejemplo si a un parrafo le queremos dar un tamaño de fuente 10 y un margen izquierdo de 20 pts.
<P STYLE="font-size:10pt; margin-left:20pt;">
Mi Primer parrafo con Estilo
</P>
Pero la asignación individual a cada etiqueta de los estilos puede resultar un poco pesada también contamos con la posibilidad de definirlos de forma global para toda la página.
Novedades
Para definir una hoja de estilos de forma global en un documento HTML se emplea la etiqueta <STYLE> de la siguiente manera:
<STYLE TYPE="text/css">
<!-
......
Estilos y sus propiedades
......
-->
</STYLE>
Observa como la definición de estilos va encerrada entre comentarios para asegurar la compatibilidad con los browsers que no las soporten. Esta sintaxis funciona tanto en Explorer 3.X y superiores como en Opera, Mozilla y Netscape 4, aunque en este último se pueden definir también de forma propietaria utilizando Javascript.
La definción del estilo se realiza de forma similar a la indicada arriba:
etiqueta {propiedad:valor; .........}
con la diferencia de que colocamos entre llaves {} la definción del estilo.
Un ejemplo típico sería:
<STYLE TYPE="text/css">
<!-
H1 {color:blue;}
P {font-size:10pt; marginleft:20pt;}
-->
</STYLE>
donde estamos indicando que todo el texto que se encuentra entre las etiquetas <H1></H1> sera de color azul , y el que esta entre las etiquetas <P></P> sera de un tamaño de 10 ptos. y tendra un margen izquierdo de 20 ptos.
Otro detalle interasante es que podemos introducir comentarios en un hoja de estilos mediante las etiquetas /*........*/ de la misma manera que se hace por ejemplo en el lenguaje C.
Tutoriales
