La sintaxis de CSS

¿Cómo se estructura CSS?

CSS funciona a base de reglas.
Cada regla está compuesta por un selector y la declaración.
La declaración a su vez esta compuesta por una propiedad y su valor.

selector{propiedad:valor}

Veamos un ejemplo donde el selector p indica que todos los elementos p del documento HTML serán afectados por la declaración cuya propiedad es color y su valor es blue(azul).

p{color:blue}

Si el valor tiene multiples palabras, agreguelo entre comillas.

p{font-family:"Times New Roman"}

Si desea especificar más de una propiedad, deberá separarlas con un punto y coma(;).

h1{color:red; text-align:center}

Para definir los estilos de forma más clara y fácil de leer, puede describir cada propiedad en diferentes líneas.

p
{
color:red;
text-align:center;
}

Si desea definir una misma propiedad para varios selectores, solo debe agruparlos separandolos con una coma(,)

p, h1, h2, h3
{
color:blue;
font-family:Arial;
}

El selector class

Con el selector class se pueden definir diferentes estilos para un mismo elemento HTML.
Por ejemplo el elemento puede ser de color azul o de color rojo.

p.azul {color:blue}
p.rojo {color:red}

Y así se vería en el documento HTML:

Este texto es de color azul.



Este texto es de color rojo.

El selector ID

HTML introduce el atributo id, el cual tiene un valor único en todo el documento. Hacemos referencia a él anteponiendo el símbolo "#".

#fondo_azul {background-color:blue}

Y en HTML se vería asi:

Este texto tiene un fondo azul.



Este texto no tiene un fondo azul.

Comentarios en CSS

Para agregar un comentario que ayude a ser más legible el documento utilizamos
"/* comentario */".

p
{
text-align:right; /* texto alineado a la derecha */
color:blue; /* color de texto: azul */
font-family:Verdana; /* tipo de fuente:Verdana */
}

Búsqueda

Otros tutoriales

HTML
Herramientas Utiles

Google

Diseño Web

Intercambio

Banners
Links

Básico

Avanzado

Ejemplos y Examen

Guías de referencia