A simple quiz to help gauge the CSS ability of a potential designer.

CSS Quiz.html

<div class="A">
    <div>
        Hello, I like <span class="B">cats</span>.
    </div>
    <div>
        I like <span class="B">dogs</span>.
    </div>
    <div>
        I prefer <span class="B">reptiles</span>.
    </div>
</div>

Given the above HTML, please make CSS rules that would do the following:
    For the div with class "A"":
        Set it's contents to use Arial for their font
        Give it a black border 2 pixels thick, with a 20 pixel radius for the corners
        Make it 200 pixels wide by default
        Add a 10 pixel padding to the contents
    For all direct children of the div with class "A":
        On hover set the background to some shade of purple, and the color to yellow
        As well, have the font size change to 1.2 times the default size on hover
        Have every even child align their text to the right, and every odd align to the left
    For all elements with the class "B":
        Add two red exclamation marks before and after the content
        Make the text inside bold (any level of bold will do)
        Have the last "B" in the html above underline its contents

Note: You may not modify the HTML and must use CSS for all the styling. You don't have to worry about vendor prefixes for anything. Try to do as much as you can without searching online.