CSS

La sintaxis de CSS

Comenzamos con la sintaxis básica de CSS y como agregar un comentario.

¿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 múltiples palabras, agréguelo 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 */
}

¿No encuentras lo que buscas?

<<< Introducción de CSS Uso de los Estilos >>>

Artículos

Los mejores 10 hostings

Buscando cual es el mejor hosting que existe en el mercado, me he topado con una gran cantidad de sitios que presentan un ranking de los 10 mejores hosting del mundo. Como cada uno tiene en su lista, diferentes empresas de alojamiento web, en un orden de ranking muy distinto, he decidido investigar cual era la mejor. continúe leyendo...

CSS

Básico

Avanzado

Ejemplos y Examen

Guías de referencia