Tag selectors


It can get very boring to keep writing style="..." for every HTML element you create:

<b style="color: red">this</b><br/>
<b style="color: red">code</b><br/>
<b style="color: red">is</b><br/>
<b style="color: red">very</b><br/>
<b style="color: red">messy</b>

this
code
is
very
messy

It's also hard to change the color later - you have to change it everywhere you used the color!

Programmers are very lazy, so they invented a shortcut way to define the styles for multiple HTML elements at once using selectors.

The easiest kind of selector is an element selector, and it works like this:

<style>
  b{
    color: red
  }
</style>

<b>this</b><br/>
<b>saves</b><br/>
<b>so</b><br/>
<b>much</b><br/>
<b>typing</b>

this
saves
so
much
typing

Now, if you want to change the color, you only have to change it in one place:

<style>
  b{
    color: rgb(100, 100, 50);
  }
</style>

<b>this</b><br/>
<b>saves</b><br/>
<b>so</b><br/>
<b>much</b><br/>
<b>typing</b>

this
saves
so
much
typing


Challenge

Use CSS selectors to make this HTML look more colorful (don't edit the HTML - just add some <style>):

<h1>Romeo and Juilet</h1>
<h2>Act I</h2>
<b>SAMPSON</b><br/>
<p>Gregory, o' my word, we'll not carry coals.</p>
<b>GREGORY</b>
<p>No, for then we should be colliers.</p>
<b>SAMPSON</b><br/>
<p>I mean, an we be in choler, we'll draw.</p>
<b>GREGORY</b>
<p>Ay, while you live, draw your neck out o' the collar.</p>
<b>SAMPSON</b><br/>
<p>I strike quickly, being moved.</p>

Solutions

Try this challenge on your own first, then come back here to see other people's solutions.

Try this challenge on your own first, then come back here to see other people's solutions.