3.3: tp-3 (Especificidad)

Objetivo

Practicar el uso de la especificidad en CSS para aplicar estilos de manera precisa.

Formato de Entrega

HTML Inicial

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>TP3 - Especificidad CSS</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<style type="text/css">
		body {
			font-size: 18px;
			background-color: #ffe;
			color: #210;
		}

		#contenedor {
			max-width: 40ch;
			margin: 2rem auto;
			padding: 1rem;
		}

		h1 {
			font-size: 2rem;
			text-align: left;
		}

		p {
			font-family: sans-serif;
		}

		#primer-parrafo {
			font-size: 1.3rem;
			background-color: #eec;
		}

		p.importante em {
			font-weight: bold;
			color: #144;
		}

		p.novelas a {
			outline: none;
			text-decoration: none;
		}
		p.novelas a:hover {
			text-decoration: underline;
			background-color: #ccd;
		}

		body p.fuente.parrafo {
			color: #bbb !important;
			font-size: 0.9rem;
			opacity: 50%;
			text-align: center;
		}
	</style>
</head>
<body>
	<article id="contenedor">
		<h1 class="titulo">Gandalf</h1>
		
		<p id="primer-parrafo" class="importante parrafo">
			Gandalf es un personaje ficticio perteneciente al <em>legendarium</em> del escritor británico <a href="https://es.wikipedia.org/wiki/J._R._R._Tolkien">J. R. R. Tolkien.</a>
		</p>
		
		<p class="novelas parrafo">
			Es uno de los principales personajes de las novelas <a href="https://es.wikipedia.org/wiki/El_hobbit">El hobbit</a> y <a href="https://es.wikipedia.org/wiki/El_Señor_de_los_Anillos">El Señor de los Anillos</a>, aunque también aparece en <span class="complicado" style="color: #622">El Silmarillion</span>, donde se narran sus orígenes.
		</p>
	</article>

	<p class="fuente parrafo">
		Fuente: <a href="https://es.wikipedia.org/wiki/Gandalf">https://es.wikipedia.org/wiki/Gandalf</a>
	</p>
</body>
</html>

Consigna

1. Crear Archivo CSS

Crear en el repositorio de Github un archivo style.css al mismo nivel que el archivo HTML anterior, esto sería en /tp-3/style.css.

2. Agregar estilos CSS

Dentro de este archivo CSS, siempre teniendo en cuenta las reglas ya existentes en el HTML, implementar las siguientes reglas:

  1. Una regla para centrar (declaración text-align: center) el título <h1>.

  2. Una regla para aplicar una fuente con serifas (declaración font-family: serif;) a todos los párrafos del documento.

  3. Una regla para que el elemento con id #primer-parrafo tenga color de fondo #CEE.

  4. Una regla para cambiar el color a #933 para los elementos <em> del primer párrafo.

  5. Una regla para que todos los links muestren outline (declaración outline: 1px solid #333).

  6. Una regla para que el texto p.fuente tenga su opacidad en 100% (se puede usar la declaración opacity: 100%;).

  7. Una regla para que los párrafos sin id tengan un color de fondo rgba(190, 120, 240, 0.6).

3. Bonus Track

  1. Una regla para que el texto del elemento p.fuente tenga color #000.

  2. Una regla para que el elemento con la clase .complicado aparezca en negrita y con color #C62.

Atención