CSS nivel 1

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.

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP