I. CSS (hojas de estilo en cascada)
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>
<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).
h3 {
color:blue;
}
ul {
color:green;
}
.noticia ol {
color:red;
}
color:blue;
}
ul {
color:green;
}
.noticia ol {
color:red;
}
Hace que:
- Los títulos de tercer nivel (h3) sean de color azul (blue).
- Las listas desordenadas (ul) sean de color verde (green).
- 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:
- El título de primer nivel sea rojo (red).
- El título de segundo nivel sea azul (blue).
- 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.