Selectores y propiedades

Cuando definimos un estilo utilizando CSS nos encontramos con dos elementos:

El selector, que define la etiqueta a la que se aplicará el estilo. Con los selectores escogemos aquella o aquellas etiquetas cuya apariencia queremos modificar.

Las propiedades, que especifican la apariencia de la etiqueta: color, fuente etc.

En el ejemplo que vimos antes el selector era H1 todo lo demás eran las propiedades. Las propiedades van siempre entre llaves y separados entre sí por puntos y comas.

propiedad: característica;

En pseudo_código sería


SELECTOR { propiedad1: caraterísticas; propiedad2: características;}

Titulo { color: verde; fuente: arial; tamaño: 12 puntos;}

O cómo vimos en el ejemplo, en código CSS:

H1 {
font-family: tahoma, arial, sans-serif;
color: #B22222;
font-size: 18px; }

las instrucciones de estilo, puedes escribirlas todas en una línea si quieres pero resulta más difícil de leer:

H1 { font-family: tahoma, arial, sans-serif; color: #B22222;   font-size: 18px; }

La última propiedad de una instrucción de estilo puede no llevar el punto y coma,

H1 {

font-family: tahoma, arial, sans-serif;
color: #B22222;
font-size: 18px }

Pero esta es una práctica muy perniciosa porque si un día decides añadir otra instrucción más (por ejemplo, negrita), es muy fácil olvidarse de que no habías puesto el punto y coma (es una cosita muy pequeña) y te pasarás horas intentando averiguar porqué tus títulos no se ven en negrita . Acostúmbrate desde ya a ponerlo siempre.

Comentarios

En CSS puedes incluir comentarios para explicar cada estilo y que así luego te sea más fácil de leer. Los comentarios no influyen en la visualización, los navegadores los ignoran. Los comentarios en css empiezan por /* y terminan con */

/* Párrafo alineado al centro*/
p
{
text-align: center;
/* de color negro */
color: black;
font-family: arial
}

Volver al índice