Aspectos básicos de las hojas de estilos en cascada
Hojas de estilos en cascada
Las hojas de estilos en cascada (CSS) son un conjunto de reglas de formato que determinan el aspecto del contenido de
una página Web. La utilización de estilos CSS para aplicar formato a una página permite separar el contenido de la
presentación. El contenido de la página (el código HTML) reside en el archivo HTML, mientras que las reglas CSS que
definen la presentación del código residen en otro archivo (una hoja de estilos externa) o en otra parte del documento
HTML (normalmente, en la sección head). La separación del contenido y la presentación hace que resulte mucho más
fácil mantener el aspecto del sitio desde una ubicación central, ya que no es necesario actualizar las propiedades de las
distintas páginas cuando se desea realizar algún cambio. La separación del contenido y la presentación también depura
y simplifica el código HTML, lo que disminuye el tiempo de carga en los navegadores y agiliza la navegación para
Reglas CSS
Una regla de formato CSS consta de dos partes: el selector y la declaración (o, en la mayoría de los casos, un bloque de
declaraciones). El selector es un término (por ejemplo p, h1,un nombre de clase o un identificador) que identifica el
elemento con formato; el bloque de declaraciones define cuáles son las propiedades de estilo. En el siguiente ejemplo,
h1 es el selector y el código comprendido entre las llaves ({}) es el bloque de declaraciones:
h1 {
font-size: 16 pixels;
font-family: Helvetica;
font-weight:bold;
}
Cada declaración consta de dos partes: la propiedad (por ejemplo, font-family) y el valor (por ejemplo, Helvetica).
En la regla CSS anterior, se ha creado un estilo concreto para las etiquetas h1: el texto de todas las etiquetas h1
vinculadas a este estilo tendrá un tamaño de 16 píxeles, fuente Helvetica y negrita.
El estilo (que procede de una regla o un conjunto de reglas) reside en un lugar independiente del texto al que aplica formato (normalmente en una hoja de estilos externa o en la sección head de un documento HTML). Por
consiguiente, una regla para las etiquetas h1 puede aplicarse a muchas etiquetas a la vez (y, en el caso de las hojas de estilos externas, la regla puede aplicarse a muchas etiquetas a la vez de distintas páginas). De este modo, CSS
proporciona una capacidad de actualización extremadamente sencilla. Al actualizar una regla CSS en un lugar, el formato de todos los elementos que usan ese estilo definido se actualiza automáticamente con el nuevo estilo.
