The CSS Box Model
Boxes inside of Boxes
Style the HTML elements to achieve a desired result.
Open the project file.
You should see a large red box with the text "Dr. J" in the top left corner.
Save the html file to your computer and open it in the HTML editor of your choice.
Review the HTML and CSS code to understand how the page was constructed. Note that each DIV element is a box, but only the DIV with an id of "a" has a background-color applied. Also, note that a CSS style is defined to set the display of all DIV elements to inline-block. This will make it easier to position the elements as needed.
Without changing any of the HTML code, add additional CSS to achieve the following result:
Try to match the styles as closely as possible. Of course, you are welcome to change the text to your own AKA (i.e. "also known as" name).
Try completing the acitivty on your own first.
If you get stuck,
- Do not change the HTML.
- Do not change the style for the DIV element with the id of red.
- Leave the CSS that sets all the DIV elements to have a display on inline-block.
- Notice the indentation of the HTML. This should make it more noticable that the DIV elements are inside of each other... they are like boxes inside of boxes.
- Create a style for the green DIV (the DIV with an id of "b") first using width, height, background-color, border, and border-radius. To make a circle, the width and height should be the same and the border-radius should be half of that value.
- Once the green DIV is correctly styled, only then move on to the blue DIV that is inside of it (the DIV with an id of "c"). The styles needed for this div are width, height, background-color, and margin.
- Once the blue DIV is correctly styled, only then move on to the yellow DIV that is inside of it (the DIV with an id of "d"). The CSS properties to use for this DIV are the same properties used for the green DIV.
- Finally when the yellow DIV is correctly styled, move on to the DIV with an id of "e" that is inside of it. As this DIV is transparent, no background-color is needed. You will be able to see the DIV by setting the border. However, since the size of the border is different on each side, use border-top, border-left, border-right, and border-bottom. For the rounded corners you will still need to set the border-radius. The only other properties you need to set are for the width, text-align, margin-left, margin-top, and font-size. A height is not needed as the text and padding inside the DIV will automatically force it to stretch vertically to contain the content.