Las hojas de estilo CSS (Cascade Style Sheets) son las que definen la apariencia de los documentos HTML. En ellas definimos tanto los estilos (colores, tipografía, márgenes...) como la posición de los elementos en la página.
Aplicación de estilos de más general a más concreto
| Redefinir etiquetas HTML | Identificadores | Clases | |
| HTML | <body> |
<div id="nombre">Contenido</div> | <span class="nombre">Contenido</span> |
| CSS | body { |
#nombre { propiedad: valor; } |
.nombre { propiedad: valor; } |
Para crear el archivo CSS: Archivo > Nuevo > Página básica (CSS)
Al igual que en los documentos HTML, tan pronto como hayamos creado el archivo es conveniente guardarlo. La extensión en este caso será .css
El siguiente paso es vincular el CSS con el documento HTML:
El HTML es el que "llama" al CSS, el que establece el vínculo. Por lo tanto, los vincularemos desde el documento HTML: Ventana > propiedades donde pone Estilo > Adjuntar hoja de estilos (buscamos el archivo que acabamos de crear)
Es importante vincularlos desde el principio, así veremos aplicado cualquier cambio immediatamente.
Vamos a aplicar los estilos desde lo más general a lo más concreto. Para ello, empezaremos redefiniendo los estilos de las etiquetas de HTML que ya tenemos en el documento estructurado.
La más general es la etiqueta <body>, que engloba toda la parte "visible" del documento. Por ello, nos servirá para definir los valores por defecto de toda la página (fondos, tipografía, tamaño, color...).
En el CSS utilizaremos como selector el nombre de la etiqueta. Por ejemplo:
body {
propiedad: valor;
propiedad: valor;
}
Una vez definidos los estilos por defecto, continuaremos con el resto de etiquetas que hayamos utilizado en la estructuración del documento (h1, h2, h3... p, ul, ol, li...)
En la mayoría de los casos no será suficiente redefinir los estilos de las etiquetas HTML para conseguir el diseño que necesitamos. En muchas ocasiones necesitaremos crear contenedores para dividir la página en trozos a los que podamos aplicar los estilos.
Estas divisiones las crearemos en el HTML, utilizando la etiqueta <div>
<div> Contenido </div>Para referirnos desde el CSS a una etiqueta <div> concreta será necesario que le pongamos un nombre. Si es único utilizaremos un identificador id, si lo vamos a utilizar varias veces en la página utilizaremos una clase class
<div id="nombre"> Contenido </div>
<div class="nombre"> Contenido </div>
En la hoja de estilos nos referiremos a los identificadores con el nombre com una almohadilla # delante, y a las clases con el nombre precedido de un punto .
#nombre {
propiedad: valor;
propiedad: valor;
}
.nombre {
propiedad: valor;
propiedad: valor;
}
Con las divisiones estamos aplicando estilos a bloques de contenido, pero en ocasiones necesitamos aplicarlos a elementos más concretos. Podemos hacerlo de varias maneras:
a) Aplicando un identificador id o una clase class a una etiqueta HTML. En este caso sólo estamos afectando a aquel elemento concreto. Por ejemplo, si sólo queremos que un párrafo tenga unas propiedades, le podemos dar un identificador o una clase. En la hoja de estilo nos referimos al identificador o clase de la manera habitual:
<p id="nombre"> Contenido </p>
<p class="nombre"> Contenido </p>
b) En el caso de que no tengamos ninguna etiqueta HTML a la que darle un identificador o clase, podemos utilizar la etiqueta <span>, que es similar a la de crear divisiones, pero en este caso no creamos bloques de contenido (es un elemento inline, por lo que no nos provoca saltos de línea). El caso más habitual se produce cuando necesitamos que unas palabras de una frase tengan un estilo determinado. Por ejemplo:
<p>Un párrafo con <span class="azul">palabras en azul</span> y el resto no </p>+ info: Propiedades CSS