Apuntes de CSS

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.

Definición de CSS

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.

Definición de atributos

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.

Jerarquía y Herencia de las reglas CSS

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.

Jerarquía por orden de declaración de estilos

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;}

Jerarquía por tipo de selector CSS

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.

Jerarquía por orden de escritura en el mismo CSS

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.

Herencia desde el contenedor al contenido

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...)

Definición de Selectores

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.

Selectores adyacentes

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.

En resumen:

Formas de aplicar CSS a los elementos HTML

Veamos ahora de forma más práctica cómo aplicar lo estilos CSS a los elementos HTML.

Definiendo la etiqueta 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.

Ejemplo

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.

Definiendo una clase CSS

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 {}.

Ejemplo

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.

Clases aplicadas a diferentes elementos HTML

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:

Ejemplo


	<h3>Titular 1 </h3>
	<h3 class="resaltado">Titular 2 </h3>
	<h3>Titular 3 </h3>

	

Veremos:

Titular 1

Titular 2

Titular 3

Etiquetas combinadas con clase CSS

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.

Ejemplo

		
<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

Combinar más de una clase en un mismo elemento

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.

Ejemplo

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.

Selectores Id

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 {}

Ejemplo

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: