CSS es otro tipo de lenguaje de marcas que controla la presentación del documento HTML en el navegador. Su nombre es Cascade Style Sheets, Hojas de Estilo en Cascada. La palabra cascada hace referencia a que los atributos definidos en CSS permiten la herencia, de forma que un atributo definido a un elemento contenedor puede ser propagado a su contenido. También se refiere a que un elemento HTML puede ser modificado a la vez por distintas reglas o definiciones CSS establecidas de forma jerárquica.
Los estilos CSS pueden definirse tanto dentro del mismo documento HTML como en un archivo aparte
vinculado al documento HTML. Cuando lo definimos dentro del documento lo hacemos escribiendo todas las
definiciones de estilo dentro de la etiqueta <STYLE>. También puede definirse el
estilo CSS para un elemento usando el atributo "style" del elemento. Aunque en este segundo
caso el alcance del CSS es más restringido, puesto que sólo afecta al elemento y por lo tanto no permite
ningún tipo de herencia.
Cuando lo definimos en un archivo separado, lo hacemos mediante la etiqueta
<LINK>, y usamos el atributo "href" para indicar donde se encuentra la hoja
de estilos. La extensión de las hojas de estilo es ".css".
Tanto si escribimos usando la etiqueta <STYLE> como si lo hacemos en una hoja de estilos aparte, la sintaxis del CSS es la misma. En el atributo "style" de las etiquetas HTML también usaremos la misma sintaxis, pero en él sólo podremos definir atributos de CSS, y no clases o reglas más amplias.
Los atributos o propiedades CSS están definidos en inglés, y la forma de declararlos es nombre_atributo: valor_atributo; el nombre va separado del valor por los dos puntos, y siempre termina la declaración con punto y coma. El conjuto de propiedades de un mismo elemento se agrupan entre llaves {}. Ejemplo de definición para las etiquetas p:
p {
color: black;
margin: 20px 50px;
border: 2px dotted #00FF00;
}
Con esta regla estamos indicando que todos los párrafos del documento se muestren con color de texto negro, un margen superior e inferior de 20 píxeles, y derecho e izquierdo de 50 píxeles, y un borde que rodea los cuatro lados del párrafo de 2 píxeles de grosor, de color verde y punteado, como podemos comprobar en este mismo párrafo.
Vamos a ver de qué manera se establece la jerarquía entre las diferentes formas de declarar el CSS de un documento. Y de qué forma afecta esto a la herencia de las propiedades CSS entre los componentes del documento HTML.
El primer principio de jerarquía en CSS es el de la cercanía, en la estructura del documento, del elemento donde se define el estilo al contenido que está modificando. Así, si queremos modificar el color de un elemento <P>, lo podriamos hacer en 3 lugares diferentes, y prevalecerá el más cercano:
Si, por un lado, en el <HEAD> del documento tenemos en primer lugar una etiqueta
<LINK> que apunta a una hoja de estilos que contiene esta definición:
p {color: black;}; y a continuación, también dentro del <HEAD>
definimos una etiqueta <STYLE> con la declaración p { color: red;}; y,
poro otro lado, dentro del elemento P, establacemos el atributo style="color: blue"; el
elemento se mostrará con el color azul, porque es la última definición que recibe cuando el navegador
"lee" el código del documento.
Si el elemento no tuviese definido el atributo style, en ese caso el color del párrafo sería
rojo, puesto que sería el último valor declarado en el documento.
Importante: Si en
el <HEAD> del documento el orden en que escribimos las etiquetas hubiera sido el
contrario, poniendo primero el <STYLE> del documento y luego el
<LINK> a la hoja de estilos, el color del párrafo sería negro, porque esa sería la
última declaración leída sobre el elemento: p {color: black;}
Pero la jerarquía también se puede definir en una misma hoja de estilos (o en la declaración de estilo
del documento), entre los diferentes tipos de definiciones que permite el CSS. Supongamos que tenenmos
el elemento <p class="parrafo" id="entrada">, es decir, un elemento P con una clase y
un id definido. CSS nos permite definir el estilo para la etiqueta P, para la clase
".parrafo", y para el id "#entrada". Y la jerarquía, de menor a mayor, sería esa: la
más lejana es la etiqueta, luego la clase, y por último prevalece el elemento id.
Así, si tenemos en
nuestro css: p { color: red;} que es la forma de definir el estilo de la etiqueta, y
tenemos también .parrafo {color: blue;}, que es la forma de definir el estilo de la clase;
y por último tenemos #entrada {color: black}, que es la forma de definir el estilo del
elemento id, el citado párrafo tendrá el color negro, puesto que es la definición más cercana. Y esto
será así con independencia del orden en el que aparecen definidos los elementos en la hoja de estilos.
Es decir, que aunque hayamos definido primero el id, a continuación la clase, y por último la etiqueta
en el CSS, el color del párrafo seguiría siendo el definido en el id.
Esto último lo decimos porque un tercer caso de herencia o jerarquía viene dado por el orden en el que se definen las reglas en la hoja de estilos, y, de nuevo, cuando hablamos de hoja de estilos, vale lo mismo para la etiqueta <STYLE>.
Si en el CSS definimos la clase .encabezado {color: orange;} y más adelante en el mismo
archivo volvemos a decir .encabezado {color: yellow;} el elemento HTML que contenga la
clase "encabezado" se mostrará de color amarillo, porque aunque es la misma regla y tiene la misma
importancia a nivel jerárquico, prevalece su última aparición en el código.
La herencia de atributos desde elementos contenedores hacia su contenido sólo se da entre los atributos de formato a nivel de contenido, pero no entre los atributos de formato a nivel de contenedor. Por ejemplo, se propagan todos los atributos relacionados con el formato de texto (familia, tamaño, color...), pero no lo hacen los relacionados con la presentación de la "caja" (ancho, alto, borde, margen, padding...)
Además de definir los selectores CSS de la forma que hemos visto (por etiqueta, por clase y por id), podemos crear selectores CSS más complejos mediante la combinación de estos mismos elementos.
Para combinar elementos tenemos que seguir la estructura del documento HTML, creando los selectores en el
mismo orden en que aparecen en él.
Por ejemplo, si creamos una regla CSS con el siguiente selector:
.noticia p estamos definiendo el formato únicamente para aquellos párrafos que se encuentren
dentro
de un elemento con la clase .noticia.
Si lo escribimos de esta forma p.noticia el resultado es muy diferente, porque entonces
sólo
estamos formateando aquellos párrafos que tengan asignada la clase .noticia. Esto es muy diferente de
p
.noticia porque aquí nos referimos a aquellos elementos con la clase .noticia que se encuentran
dentro de un elemento p.
Otro tipo de selector anidado es que utiliza el caracter ">" para separar los elementos. Al usarlo, le estamos indicando que el segundo elemento debe estar directamente anidado en el primero. Ejemplo: el selector .noticia > p se refiere únicamente a los párrafos contenidos directamente en un elemento con la clase .noticia. Mientras que el selector .noticia p se refiere a cualquier elemento p dentro de otro con la clase .noticia, aunque no esté directamente contenido en él, sino que puede haber otros contenedores entre medias.
De forma similar,podemos seleccionar elementos dependiendo de lo que tengan al lado. Por al lado entendemos elementos que comparten el mimo contenedor, o ascendente directo. La forma de seleccionar elementos adyacentes es con el operador "+". Por ejemplo, la expresión div + p selecciona cualquier elemento p a continuación de un elemento div.
Veamos ahora de forma más práctica cómo aplicar lo estilos CSS a los elementos HTML.
Cuando definimos el estilo CSS de una etiqueta HTML, todas las apariciones de la etiqueta en el documento mostrarán el formato especificado en el CSS.
Dado el siguiente código:
<ul>
<li><a href="#">Enlace 1</a></li>
<li><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>
<li><a href="#">Enlace 4</a></li>
</ul>
Al definir este estilo:
a {
color: lightgreen;
text-decoration: none;
}
Nos devuelve este resultado:
Lo que hacemos en este caso es hacer que todos los enlaces del documento se muestren de color verde y sin el subrayado.
Cuando queremos modificar la presentación sólo de determinados elementos, y no todos los de esa etiqueta,
usamos una clase CSS.
La clase se define en el elemento HTML mediante el atributo class, por
ejemplo <p class="miclase">. Y a nivel de CSS se define poniendo un punto delante de su nombre en su
declaración: .miclase {}.
Dado este código:
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. </p>
<p class="resaltado">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
Si le añadimos la siguiente regla CSS:
.resaltado {
color: orange;
text-transform: uppercase;
}
Obtendremos:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Podemos aplicar la misma clase CSS a diferentes elementos HTML. Todos los elementos que comparten la
misma
clase mostrarán el mismo formato, puesto que la clase es un conjunto de atributos de formato
(propiedades
CSS), que modifican la presentación del elemento señalado. Es una forma de etiquetar, a nivel de
formato, un
conjunto de elementos para que tengan la misma apariencia.
En el código siguiente veremos como la misma clase .resaltado que hemos aplicado sobre un
párrafo
en el ejemplo anterior, da el mismo formato a los elementos h3 donde la aplicamos:
<h3>Titular 1 </h3>
<h3 class="resaltado">Titular 2 </h3>
<h3>Titular 3 </h3>
Veremos:
Podemos hacer el formato de un elemento más específico si combinamos en su declaración de CSS su etiqueta junto a la clase que le apliquemos.
Por ejemplo, el código <strong class="resaltado">Texto en negrita</strong> nos
devolverá
un texto en negrita, y además color naranja y en mayúsculas, tal y como define la clase
resaltado.
Pero si en la declaración de CSS hacemos esto:
strong.resaltado {
background-color: lightcyan;
}
Tendremos un elemento strong que tiene un color de fondo cuando se le aplica esa clase. Mientras que el resto de elementos con la misma clase, pero que no son strong, no muestran ese color de fondo.
<p >Texto de párrafo sin clase</p>
<p class="resaltado">Texto con clase resaltado</strong></p>
<p><strong>Texto en negrita</strong></p>
<p><strong class="resaltado">Texto en negrita y resaltado</strong></p>
Y en el CSS:
.resaltado {
color: orange;
text-transform: uppercase;
}
strong.resaltado {
background-color: lightcyan;
}
Este es el resultado:
Texto de párrafo sin clase
Texto con clase resaltado
Texto en negrita
Texto en negrita y resaltado
CSS permite aplicar varias clases a cualquier elemento HTML sin problemas. Se puede hacer para separar el formato del docuemento de una manera más organizada. Por ejemplo, podemos tener clases que se encarguen del formato de fuente, otras que se encarguen del formato de caja (bordes, fondo...) y otras para controlar la posición de los elementos. Y luego ir aplicándolas a cada elemento según las necesitemos.
Si defimos esta clase:
.bordes {
border: 3px solid red;
}
Cuando la apliquemos a cualquier elemento le aplicará los bordes definidos además del formato que ya pueda tener ese elemento.
Si hay conflicto entre los atributos definidos en las diferentes clases, prevalecen los de la clase que más abajo esté escrita en el código CSS.
Si definimos un elemento así <p class="resaltado bordes"> tendremos este resultado:
Este párrafo muestra el formato recibido por la clase resaltado y por la clase bordes.
Un atributo id sirve para idetificar de forma exclusiva un elemento dentro del documento. Y en CSS lo
podemos
usar para aplicar un formato específico solamente a ese elemento.
El atributo HTML es
id="miId",
y en el CSS se define con la almohadilla antes del nombre del elemento: #miId {}
Dado este código:
<ul>
<li><a href="#">Enlace 1</a></li>
<li><a href="#" id="seleccionado">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>
<li><a href="#">Enlace 4</a></li>
</ul>
Al aplicar esta regla:
#seleccionado {
border: 1px solid;
font-weight: bold;
}
Nos devuelve este resultado: