All examples

Building blocks
Practice specificity

Exercise 1: good news

The following alert brings good news, but it's red.

Change the order of the CSS, so that the good news alert is green.

Do not change any CSS rules or HTML.

Example code

							<div class="alert alert--good-news">
  <h2>Yay, your vinyl is on its way!</h2>
	<p> Your order of <b>Black Radio 3</b> 
	by <b>Robert Glasper</b> was successful 
	and will be delivered before Friday 9 March.</p>
</div>

<style>
.alert--good-news {
	border-color: green;
	background-color: #e0ffda;
}
.alert {
  border: 1px solid red;
	background-color: #ffdada;
	padding: 1em;
}
  .alert h2 {
	  margin: 0 0 .25em;
		font-size: 1.1em;
	}
</style>

Preview

Exercise 2: heading colour

In the style block of this example, we're setting the h2's colour to blue.

Make one update anywhere to make sure the heading is actually blue.

Example code

							<div class="alert">
	<h2 style="color: green;">Yay, your vinyl is on its way!</h2>
	<p>Your order of <b>Black Radio 3</b> 
	by <b>Robert Glasper</b> was successful 
	and will be delivered before Friday 9 March.</p>
</div>

<style>
h2 { color: blue; }

.alert {
	border: 1px solid #ccc;
	padding: 1em;
}
	.alert h2 {
		margin: 0 0 .25em;
		font-size: 1.1em;
	}
</style>

Preview

Answers

Show answers

Find the completed exercises below:

Exercise 1

Example code

							<div class="alert alert--good-news">
	<h2>Yay, your vinyl is on its way!</h2>
	<p> Your order of <b>Black Radio 3</b> 
	by <b>Robert Glasper</b> was successful 
	and will be delivered before Friday 9 March.</p>
</div>

<style>
.alert {
	border: 1px solid red;
	background-color: #ffdada;
	padding: 1em;
}
.alert--good-news {
	border-color: green;
	background-color: #e0ffda;
}
	.alert h2 {
		margin: 0 0 .25em;
		font-size: 1.1em;
	}
</style>

Preview

Exercise 2

You could make the heading blue by removing the inline style, or by setting !important to the style.

Example code

							<div class="alert">
	<h2>Yay, your vinyl is on its way!</h2>
	<p>Your order of <b>Black Radio 3</b> 
	by <b>Robert Glasper</b> was successful 
	and will be delivered before Friday 9 March.</p>
</div>

<style>
h2 { color: blue !important; }

.alert {
	border: 1px solid #ccc;
	padding: 1em;
}
	.alert h2 {
		margin: 0 0 .25em;
		font-size: 1.1em;
	}
</style>

Preview