padding, border, marginbackground-colorUse the padding, border, margin, background-color properties to style specific elements in the markup. cats.html needs only background-color, padding and border. dogs.html needs background-color, padding, border and margin. fish.html needs background color, margin and padding.
You do not need to add any markup to the document other than the style tag for the embedded style sheets. Write styles using element selectors to style the page. You may use any colors you like, but emulate the appearance and location of padding, borders and margins as closely to the screenshots as possible.
Read each of the separate page instructions carefully. They tell you pretty much exactly what to do.
You will need write styles using the following element selectors: body, header, footer, aside. Of course there are many more tags in the page, but we don't always style every tag ;-). You need to use background-color, padding and border properties only. Do not use margin in this layout. Pay close attention to the screenshot. The border and padding are only on one side of the aside's display box. The footer is equally padded on all four sides.
Remember that padding and borders have the potential to make the display box "boxy" and change where the margin calculates from and whether it "collapses" or not. Only one display box in this layout is "boxy." Can you tell by looking at the screenshot which display box this is?
You will need write styles using the following element selectors: body, header, main, footer, article, nav. Of course there are many more tags in the page, but we don't always style every tag ;-). You need to use background-color, padding, border and margin properties. Pay close attention to the screenshot.
This page is more complicated. The header, main, footer, article have all been made "boxy" so margins don't collapse and calculate from tops and bottoms of ancestor display boxes rather than adjacent elements with margins in the layout. border and padding are the properties that make the display boxes "boxy."
In this layout, margin is only used on the main; every other interval you see is created with padding. Can you tell where the margins on the main are? They are not equal on all four sides. Top and bottom have the same amount of margin. The left has more. The right has no margin.
This page gets rid of default padding and default margins. Sometimes you need to either eliminate or alter the browser default box properties. It's important to know which elements use these properties for their default display so if you don't want them, you can get rid of them.
You need background colors in header, main, footer, aside, nav, body; nothing is needed for the article. You must get rid of the margin on the body.. You must get rid of the padding and margin on the ul. You must get rid of the margin on the heading tags.
The only tag in this design that keeps its default margin is the paragraph tag. You can see it between the site id and the tagline, and between the tagline and the main menu. You can also see it in the article, between the page name and the separate paragraphs of text. Lastly, you can see it as an interval between the end of the main and the beginning of the footer (the body background color shows here). That is because the footer is laid out underneath the margin in the final paragraph of the article, which is inside the main.
Don't ever get rid of the margin on the paragraph tag. If you do, you no longer have visible paragraphs. That is why I left it in this page. In your real sites, you will often zero out or change margin and/or padding on the body, heading tags and lists. But never on paragraphs.
Where did the list bullets go? They are displaying off the page because there is no more padding on the left of the list. They are there, but you can't see them. ;-)
You want to be sure you've written valid markup and valid styles. Use the online validator tools to check your work. If there are errors, read what the validator says about them and check the lines in your markup where the errors occur.