4. Sintaxis CSS

4.4. Practica lo aprendido

Vamos a cambiar el color de texto de los elementos del siguiente código HTML:


<h1>Título 1</h1>

<div id="bloque-a">
<p>Soy un párrafo.</p>
<p>Soy otro párrafo.</p>
</div>

<div id="bloque-b">
<h2>Título 2</h2>
<p>Soy otro párrafo.</p>
</div>

Es decir; tenemos:
  • Un título de primer nivel (h1).
  • Dos capas (div), cada una de las cuales tiene un identificador (bloque-a y bloque-b respectivamente).
  • Dentro del bloque-a tenemos dos párrafos (p).
  • Dentro del bloque-b tenemos un título de segundo nivel y un párrafo (p).
Si hemos comprendido el apartado CSS sabremos que esto:

h3 {
color:blue;
}

ul {
color:green;
}

.noticia ol {
color:red;
}

Hace que:
  1. Los títulos de tercer nivel (h3) sean de color azul (blue).
  2. Las listas desordenadas (ul) sean de color verde (green).
  3. Las listas ordenadas (ol) que están dentro de algún elemento con la clase “noticia” sean de color rojo (red).
    Atención: hemos dicho la “clase noticia”, no el identificador “noticia”.
    Recordemos que para hacer referencia a una clase utilizamos un punto. Así: “.noticia”. ¿Y para hacer referencia a un identificador?

El ejercicio:

Tenemos el código HTML que hemos mencionado unas líneas más arriba.

La tarea consiste en escribir el código CSS necesario para que:
  1. El título de primer nivel sea rojo (red).
  2. El título de segundo nivel sea azul (blue).
  3. Los párrafos del bloque-a (los del bloque-b no) sean verdes (green).
Comprueba el resultado abriendo el archivo con un navegador como Firefox, Google Chrome, Safari o Internet Explorer.