Sintaxis de estilo (CSS)

Haz una pregunta

Qué es un estilo en CSS

Al definir un estilo se utilizan reglas de texto simples para describir el aspecto de los elementos de la página. Una regla CSS se caracteriza por dos elementos principales: un selector de tipo para especificar a qué etiquetas del documento se aplica el estilo y una declaración de estilo, que se define entre paréntesis, para especificar qué estilo aplicar a las etiquetas seleccionadas. A su vez, la declaración está compuesta por una o más propiedades, seguidas por el carácter ":" (dos puntos), uno o más valores asociados a cada propiedad, entre comillas y separados por comas si hay múltiples valores, y todos seguidos por un punto y coma. La sintaxis es la siguiente:


Sintaxis de una regla CSS

La siguiente sintaxis define, por ejemplo, el estilo que se aplicará a un hipervínculo (etiqueta <A>), es decir fuente Verdana de 18 píxeles de tamaño, en negrita y en color amarillo:

A {
font-family: Verdana;
font-size: 18px;
font-style: bold;
color: yellow
}

Selectores de etiqueta

Los selectores de etiqueta (o selectores de elementos) son las palabras que están delante de los paréntesis y que indican las etiquetas a las que se aplica el estilo que aparece entre paréntesis.

Para definir el estilo de una etiqueta HTML en particular, solo debe usarse el nombre de la etiqueta (sin los caracteres < y >). Por ejemplo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<STYLE type="text/css">
<!--

tag {properties}
-->
</STYLE>
</HEAD>
<BODY>

<tag> ... </tag>

...
</BODY>
</HTML>

Selectores múltiples

También se puede aplicar un estilo a múltiples etiquetas al separar los nombres de las mismas con una coma (,). La sintaxis de tal selector, denominado selector múltiple, es:

type-selector1, type-selector2  { /* style */  }

Selector universal

A través del selector universal (*) se puede definir un estilo que se aplicará a todos los elementos HTML. La sintaxis del selector universal es:

*  { /* style */  }

Nota:
El selector universal generalmente no se implementa en navegadores.

Selectores anidados

Se puede seleccionar una etiqueta dentro de un contexto dado, es decir, según los elementos que se encuentran alrededor, mediante selectores contextuales. Existen varios tipos de selectores contextuales. El selector anidado se usa para crear una regla que se aplica solamente cuando el elemento Y está anidado dentro del elemento X. Su sintaxis es:

selector_X selector_Y { /* style; */ }

Para el siguiente código HTML:

<p> <i>Nota</i>, esto es una <b>advertencia</b> </p>
<b> Leer detenidamente </b>

La siguiente regla solo afecta a la palabra "advertencia" (la única rodeada por etiquetas <B> que están a su vez anidadas dentro de un grupo de etiquetas <P>):
P B { font-weight: bold; color: red; } 


El selector de hermanos adyacentes se usa para crear una regla que se aplica solamente cuando el elemento Y le sigue inmediatamente al elemento X. Su sintaxis es la siguiente:

selector_X + selector_Y { /* style; */ }


Para el siguiente código HTML:

<p> <i>Nota</i>, esto es una <b>advertencia</b> </p>
<b> Leer detenidamente </b>

La siguiente regla solo afecta a la palabra "advertencia" (la única rodeada por etiquetas <B> que a su vez siguen al grupo de etiquetas <l>):
I + B { font-weight: bold; color: red; } 


El selector de hijo se usa para crear una regla que solamente se aplica cuando el elemento Y es descendiente del elemento X. La regla no se aplica si Y se encuentra dentro de una o más etiquetas intermediarias. Su sintaxis es:

selector_X > selector_Y { /* style; */ }

Para el siguiente código HTML:

<p> <b><i> Nota </i></b>, esto es una <i><b> advertencia </b></i> </p>
<b> Leer detenidamente </b>

La siguiente regla solo afecta al elemento <i> Nota </i> (la única rodeada por etiquetas <B> que están a su vez dentro de un grupo de etiquetas <P>):
P > B { font-weight: bold; color: red; } 

Propiedades de estilo


Comentarios

Es posible (y se recomienda) documentar las hojas de estilo a través de la incorporación de comentarios que aportan información adicional (una razón para elegir un estilo u otro, el tipo de documento al que se va a aplicar, el contexto, etc.). Los comentarios CSS están marcados con los signos /* y */:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
/* Esto es un comentario */
tagA {properties}
tagB {properties}
tagC {properties}
-->
</STYLE>
</HEAD>
<BODY>
...
</BODY>
</HTML>

Nota:
Puede aplicarse un estilo "en línea" a cualquier etiqueta HTML, excepto a las siguientes: BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE.
Jean-François Pillou

Nuestros contenidos son redactados en colaboración con expertos del ámbito tecnológico bajo la dirección de Jean-François Pillou, fundador de CCM.net y director digital en el Grupo Figaro. CCM es un sitio de tecnología líder a nivel internacional y está disponible en 11 idiomas.

Más información sobre el equipo de CCM

Consulta también