Empezar a Usar CSS - Segunda Parte

En un post anterior “Empezar a Usar CSS” iniciamos una serie de consejos para quienes se inician en el mundo de las hojas de estilos CSS. Como pudimos ver, la aplicación de CSS se basa en un selector y su declaración. El selector es el identificador del elemento HTML o XML (en este articulo obviaremos XML) al cual le aplicaremos estilos y su declaración es el valor o conjunto de valores para dicho selector, decimos el valor o conjunto de valores porque se pueden aplicar tantos como sean necesarios. Ej.:

Elemento HTML al que queremos aplicar estilos =  Parrafo (ver la diferencia entre HTML y CSS)

Tag HTML=

<P>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum 

Estilo = Font Arial, color gris oscuro, alineación justificada, margen superior de 10px, margen inferior 10px, margen izquierdo 30px y color de fondo amarillo claro.

Bien, aquí tenemos todo lo que deseamos hacer con un párrafo de nuestra página web. Veamos como lo aplicamos en CSS:

<style type="text/css">
<!--
p {font-size: 12px; font-family:Arial, Helvetica, sans-serif; color:#333333; text-align:justify; margin-top:10px; margin-bottom:10px; margin-left:30px; background-color:#FFFFCC}
-->
</style>

Este será el resultado:

En otras palabras, la hoja de estilos le esta diciendo a la pagina HTML:
Donde quiera que encuentres un TAG HTML de parrafo, aplícale lo siguiente:
Font size: 12 px
Tipo de Font: Arial, si el usuario no tiene instalado Arial, usa Helvetica si no usa sans-serif
Color del Font: Gris #333333
Justificación del Texto: Justificado
Márgenes: 10px desde arriba, 10px desde abajo y 30 px desde la izquierda
Color de Fondo: Amarillo #FFFFCC

Tipos de Selectores
Es muy importante saber que existen tres tipos de selectores que se utilizan dependiendo el alcance de lo que queremos estilizar:

SELECTOR CLASS o clase: Puede ser aplicado a cualquier TAG HTML
SELECTOR TAG: Redefine el estilo o look de un TAG HTML
SELECTOR ADVANCED o avanzado: Se utiliza para elementos HTML que poseen un ID o están identificados

Si usamos en una hoja de estilos un selector TAG significa que será aplicado dicho estilos a todos los elementos HTML que estén contenidos en ese TAG. Ej.:
-En el ejemplo que hemos descrito arriba la hoja de estilos se aplicara a todos los párrafos de la pagina.

De aquí la importancia de conocer los tipos de selectores que usaremos.

En un próximo post vamos a ver en detalle cada uno de los Tipos de Selectores e ilustraremos un ejemplo para mejor entendimiento.

Hasta la próxima.