La sintaxis de CSS

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


La estructura de 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.

La declaración debe estar definida entre llaves({...})


Sintaxis

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.

p{color:blue}

Si el valor está compuesto por varias palabras, debemos definirlo entre comillas.

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

Si deseas especificar más de una propiedad, deberás 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, puedes describir cada propiedad en diferentes líneas.

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

Si deseas definir una misma propiedad para varios selectores, solo debe agruparlos separándolos 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 p puede ser de color azul o de color rojo. El valor del selector class debe ir antepuesto por un punto (.)

Sintaxis

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

Ejemplo

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

Código
<head>
<style type="text/css">
p.azul {color:blue}
p.rojo {color:red}
</style>
</head>

<body>
<p class="azul">Este texto es de color azul</p>
<p class="rojo">Este texto es de color rojo</p>
</body>
Resultado

Este texto es de color azul

Este texto es de color rojo

Con el selector class también podemos definir diferentes estilos para cualquier elemento HTML.
Por ejemplo definimos un class rojo y uno azul.

Sintaxis

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

Ejemplo

Por ejemplo definimos un class rojo y lo utilizamos en dos ocasiones.

Código
<head>
<style type="text/css">
.azul {color:blue}
.rojo {color:red}
</style>
</head>

<body>
<h3 class="rojo">Este título es de color rojo</h3>
<p class="azul">Este texto es de color azul</p>
<p class="rojo">Y este texto es de color rojo</p>
</body>
Resultado

Este título es de color rojo

Este texto es de color azul

Y este texto es de color rojo


El selector ID

El selector id se utiliza para definir un atributo el cual tiene un valor único en todo el documento. Hacemos referencia a él anteponiendo el símbolo "#".

Sintaxis

#centrado {text-align:center} /* afecta a cualquier elemento que lo use */
h3#subrayado {text-decoration:underline} /* afecta solo al elemento h3 */

Ejemplo

Definimos un id general y uno para un selector en particular.

Código
<head>
<style type="text/css">
#centrado {text-align:center}
h3#subrayado {text-decoration:underline}
</style>
</head>

<body>
<h3 id="centrado">Título centrado</h3>
<h3 id="subrayado">Título subrayado</h3>
<p id="centrado">Texto centrado</p>
<p id="subrayado">El selector id no afecta al elemento p ya que el mismo no ha sido definido como texto subrayado</p>
</body>
Resultado

Título centrado

Título subrayado

Texto centrado

El selector id no afecta al elemento p ya que el mismo no ha sido definido como texto subrayado


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 */
}


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

En la Web