exercise-1

Exercise 1: Basic Syntax

In this exercise, you'll practice selecting HTML elements, and assigning basic styles to the elements. To do this, you'll make a nametag that looks like this:

As described in module-4, start by forking and cloning this repository. If you're feeling ambitious, I suggest you try to mimic the rendering without the following instructions. The HTML elements are already in place, so you'll apply the following styles in your css/main.css file:

Apply the following styles to the container element of your name tag:

• Assign a width of 400px
• Assign a height of 200px
• Make the text centered by assigning the appropriate value to the text-align property
• Give it a border that is 1px solid red
• Make a thick red bottom border of 20px
• Give the container rounded edges by setting the border-radius property to 10px

Give the top section of your name tag the following styles:

• The font-family should be sans-serif
• The bottom borer should be 1px solid black
• To set the text color, assign the color property a value of white
• Round the top-left and top-right borders to match the container styles

Select all top-level headers and assign the following styles:

• Set the top and bottom margins to 0px
• Set a font-size 3 times the root element's font-size
• To achieve the font appearance, you'll need to set a font-weight of 100, and a font-variant of small-caps

Assign the following styles to second-level headers:

• Set a margin-top of 1px, and a margin-bottom of 3px
• Achieve the font look by setting the font-style to italic and the font-size to .8rem

Assign a color of red to all elements with class red.

Manipulate the name area by assigning these styles:

• Set the font-size to 3rem
• Set the font-family to fantasy
• Assign a margin of 25px

See the complete branch for answers.