- Estilo enriquecido CSS (Cascade Stile Sheet): Hojas de Estilo en Cascada. Permite la creación de documentos (páginas HTML) visualmente mucho más ricos separando el contenido del diseño.
- Fácil de utilizar: permite al diseñador reducir sustancialmente la carga de trabajo al diseñar un sitio web
- Reutilización en múltiples páginas: cuando la hoja de estilo (CSS) recoge aspectos comunes a varias páginas, puede ser reutilizada en cualquier sección del site aprovechando dichos efectos ya definidos.
http://camaleonscss.com/ es una web con el mismo contenido pero con diferentes ficheros
CSS, haciendo clic en sus enlaces podemos ver distintos diseños y maneras de presentar la misma información en pantalla.
- Reglas básicas de CSS (I): Con CSS podemos aplicar reglas de estilo a un tipo determinado de elementos dentro del documento HTML, así se puede conseguir el mismo efecto que usando el marcado tradicional, por ejemplo, lo que en HTML sería:
<h2><font color="red">texto del elemento</font><h2>
en el CSS, para todos los títulos del tipo <h2> sería:
H2 {
color: red;
}
CSS (II): a la expresión "H2{color: red;}" se le denomina "regla", y esta que hemos definido en concreto, colorea de rojo los elementos del tipo 'h2'.
Cada regla tiene dos partes: selector "H2", declaración "{color: red; }", y dentro de la declaración tenemos la propiedad "color" y el valor "rojo"...
Para invocar las reglas CSS desde un archivo HTML, y que estas reglas hagan efecto en los elemento del fichero HTML al visualizarlo desde un navegador web, hay que hacer una llamada al archivo CSS desde el HTML, esto se hace entre las etiquetas <head> y </head> del fichero HTML, y la orden para que haga efecto es:
<link rel="stylesheet" type="text/css" href="nombre-hoja-estilo.css">
- Definición de clases dentro del CSS: se hace igual que una regla pero con un punto delante:
.nombre {
color: red;
}
así se ha definido la clase "nombre" con la propiedad "color" y el valor "rojo". Para invocarla desde el fichero html:
<p class="nombre"> ... ... </p>
- Definición de ID (identificadores) dentro del CSS: se hace de forma parecida a las clases pero se pone delante una almoadilla # en lugar de un punto:
#nombre {
font-size: 16px;
font-weight: bold;
}
se ha definido el ID "nombre" con la propiedad de tamaño de fuente de 16 píxeles y en negrita. Para invocar este ID desde el fichero HTML:
<p id="nombre"> ... ... </p>
Los ID son más empleados que las reglas para trabajar con lenguajes de programación como Java.
Algunos navegadores web no representan algunos de estos elementos, se pueden aplicar tanto a las clases como a los ID (identificadores), justo debajo de donde se definen los primeros, y comienza con el carácter ':', la pseudo-clase o el pseudoelemento y la propiedad y su valor... Un par de ejemplos:
.diferente {
color: green;
text-transform: capitalize;
}
:first-letter.diferente{color: #ff00ff}
En este caso, se asigna a la primera letra (first-letter) de la clase diferente el color #ff00ff.
#pollo {
font-size: 16px;
font-weight: bold;
color: navy;
}
:first-letter#pollo{color: #ff0000;}
En este otro caso se aplica a la primera letra de el ID pollo el color #ff0000.
Aplicar las mismas reglas a varias clases o elementos
La utilidad de esto es no repetir código en reglas de estilo que tienen declaraciones idénticas, los selectores deben ir separados por ",", y se procede de la siguiente manera:
.clase1, h2 {
color: green; text-transform: capitalize;
}
El código anterior aplica las mismas reglas a los elementos de la clase ".clase1" y a los elementos "h2" (cabeceras de segundo grado). La clase .clase1" y el elemento "h2 pueden estar también declaradas en otra parte del archivo CSS con otras propiedades y valores diferentes en sus declaraciones.
Aplicar reglas a determinados elementos HTML dentro de una clase
Atención en el selector de la regla, los términos que están separados por espacios y los que están separados por ",", procedemos así:
.clase1 p h2, clase2 a {
color: green;
text-transform: capitalize;
}
El código anterior aplica las reglas a los elementos "p" (párrafos de texto) y a los elementos "h2" (cabeceras de segundo grado) que se encuentren dentro de la clase ".clase1". Y también aplica las mismas reglas a los elementos "a" (hipervínculos o enlaces) de dentro de la clase ".clase2".
En el documento html, también podemos incluir varias reglas en un mismo elemento de contenido separando los nombres de las clases por espacios:
<img src="url-de-la-imagen" widht=300 height=125 class="case1 clase2 ... " alt="texto alternativo" />
Y aquí una chuleta, o guía de referencia rápida de CSS:
Los colores aditivos son los usados en trabajo gráfico con monitores de ordenador, pues el monitor produce los colores partiendo de tres tubos de 