CSS

LENGUAJE CSS

Definición.- Las Hojas de Estilo (o CSS, por Cascading StyleSheets) son un mecanismo que permiten aplicar formato a los documentos escritos en HTML ó XHTML (y en otros lenguajes estructurados, como XML) separando el contenido de las páginas de su apariencia. Para el diseñador, esto significa que la información estará contenida en la página HTML, pero este archivo no debe definir cómo será visualizada esa información, sino la hoja de estilos asociada a él. Las indicaciones acerca de la composición visual del documento estarán especificadas en el archivo de la CSS. 

Sintaxis 

El código CSS es un código escrito con texto, pero también tiene unas normas de escritura, por otra parte bastante lógicas.

En primer lugar, si lo que pretendemos mediante CSS es modificar el estilo de una o varias etiquetas HTML en una página web, deberemos indicar a qué etiqueta o etiquetas afecta la modificación. Esta parte se llama Selector. Para indicar el selector, salvo casos especiales, escribiremos el nombre de la etiqueta o una referencia a ella. Por ejemplo, si en esta parte escribimos h1, el estilo que apliquemos afectará a todas las etiquetas h1 que haya en la página.

Después tendremos que escribir qué es lo que queremos cambiar de ese texto y cómo. Todo ello formará un bloque, que llamaremos declaración. En CSS se emplean los signos { y } para delimitar este bloque;( fíjate bien que son llaves). De momento tenemos lo siguiente:

Ejemplo: h1 { }

Dentro de las llaves escribiremos qué es lo que queremos cambiar y el nuevo valor que le daremos. Se trata de una serie de palabras clave que indican qué es lo que hay que cambiar. Cada una de estas palabras clave es una propiedad. El valor de esta propiedad lo indicamos escribiéndolo después del nombre de la propiedad, del que va separado por el signo de dos puntos (:)

Ejemplo: h1 { font-size : 12px }

En este ejemplo font-size es la propiedad, mientras que 12px es el valor. Como puede observarse ambas están separadas por el signo de dos puntos. Lo que indicamos en este ejemplo es que el tamaño de letra (font-size) será de 12 pixels (12px) para todos los textos que estén encerrados dentro de una etiqueta h1.

Dentro de una misma declaración (signos de llaves) puede haber más de una propiedad con su valor, éstas deben ir separadas por el signo de punto y coma.

Ejemplo: h1 { font-size : 12px; color : blue }

El signo de punto y coma, se puede poner al final de la última propiedad, no es obligatorio, pero resulta conveniente, por si queremos añadir alguna propiedad más.

El lenguaje CSS se basa en este tipo de estructura, que podemos resumir de la siguiente forma:

selector { propiedad : valor; propiedad : valor; }

Ejemplo 

P {

font-size: 12pt;

font-family: arial,helvetica;

font-weight: normal;

}

H1 {

font-size: 36pt;

font-family: verdana,arial;

text-decoration: underline;

text-align : center;

background-color: Teal;

}

BODY {

background-color : #006600;

font-family : arial;

color : White;

}