We'll add CSS rules that apply to the whole webpage, then specific ones for the comparison result. Here's a peek of the changes.

<html>
<head>
<style>
.city {
background-color: lavenderblush;
font-style: bold;
padding: 7px 10px 7px 10px;
}

.comparison {
background-color: blueviolet;
color: white;
padding: 7px 10px 7px 10px;
}

body {
text-align: center;
font-size: 17px;
color: midnightblue;
background-color: white;
}
</style>
</head>
<body>
<img src="https://mimo.app/i/compare-cities.png"><img>
<p class="city"><strong>Paris Rent: 1200 Euros</strong></p>
<p class="city"><strong>Barcelona Rent: 940 Euros</strong></p>
<p id="comparison" class="comparison"></p>
<p id="difference"></p>
<script>
var cityRent1 = 1200;
var cityRent2 = 940;

var isMoreExpensive = cityRent1 < cityRent2;
var comparisonLabel = "Paris is more expensive than Barcelona: " + isMoreExpensive;
console.log(comparisonLabel);

var difference = cityRent1 - cityRent2;
var differenceLabel = "Rent difference: " + difference + " Euros";
console.log(differenceLabel);

document.getElementById("comparison").innerHTML = comparisonLabel;
document.getElementById("difference").innerHTML = differenceLabel;

</script>
</body>
</html>]]>