CSS: Sintaxis y conceptos

CSS define una serie de términos que permiten describir cada una de las partes que componen los estilos CSS. El siguiente esquema muestra las partes que forman un estilo CSS muy básico:

A continuación se detallan cada uno de los términos:

Regla: cada uno de los estilos que componen una hoja de estilos CSS. Cada regla está compuesta de una parte de "selectores", un símbolo de "llave de apertura" ({), otra parte denominada "declaración" y por último, un símbolo de "llave de cierre" (}).

Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS.

Declaración: especifica los estilos que se aplican a los elementos. Está compuesta por una o más propiedades CSS.

Propiedad y valor: La propiedad permite modificar el aspecto de una característica del elemento y el valor indica el nuevo valor de la característica modificada en el elemento.

selector { propiedad: valor;}
ejemplo: body { color: black; }

selector { propiedad1: valor1; propiedad2: valor2;}
ejemplo: body { color: black; background-color: white;}

selector1, selector2{ propiedad:valor;}
ejemplo: h1, h2, h3 { color: maroon; }



Por ejemplo, si quisiera definirse un fondo blanco con letras grises y fuente Arial de 10 puntos de tamaño, la regla sería la siguiente:

body {
background-color: #fff;
color: #666;
font-family: Arial, sans-serif;
font-size: 10pt;
}

Cada una de las líneas deberán terminar en punto y coma. Además, #fff representa al color blanco y #666 un gris oscuro.


REFERENCIA

CSS

SELECTORES

COLORES

BOX MODEL

FONDOS

POSICIONAMIENTO

VISUALIZACIÓN

TIPOGRAFÍA

TEXTO

ENLACES

IMÁGENES

LISTAS

TABLAS

FORMULARIOS

LAYOUT

Ejercicios

ANEXO