Another quiz! I love these quizzes. Instead of doing two separate pages this week, I think I will try to both answer the questions and try some of the new things in this week's lesson on the same page. For starters, I used an embedded style sheet this week, because it seemed like it would be easier to edit and preview if I only had one page to work on at a time. And if that page is nice and long, I will get to see my content scroll over my background again! I'm still excited over that one.
I used a margin of 50 px in the body element, and of 20px in the "boxed" class. This paragraph and the previous one have different looks because this one did not use the .boxed class. I also used "text-indent" in the p element instead of the nbsp; character.
|
1. How do you set a different margin for all sides of an element? ~By defining a different value for each border, in the following order: top, right, bottom, left. 2. True or False? Margins collapse when they have adjacent vertical margins. ~True. The smaller margin is collapsed in favor of the larger one. 3. What might happen if you use a hanging indent without margins or padding? ~You might lose a few words from the left side of your page. 4. True or False? If you accidentally define two different rules for the same element in the same style sheet whether linked or embedded, the one closest to the top of the page will win. ~False. The rule closest to the actual text, or farther down the page will win unless the rule is marked as !important. 5. What does Cascade mean? ~Cascade means that whatever is closest to the text you want to affect wins. I used some inline elements in question 4, for example. 6. What does the !important attribute do? ~Rules marked with this attribute are given higher priority in the page no matter where they appear. 7.Explain what display:inline; and display:block; mean. How could you use them to your advantage? ~The use of display:inline; can change a block element to an inline element. There would be no blank lines between elements. The use of display:block; will cause each element to appear on its own line. These attributes can change the structure of the page. Gee this is getting so complicated that I think I need a popcorn break. |
|
In this area, I had planned to overlap the text and the image, using positioning selectors of absolute and z-index as shown in the last part of the lesson. On a separate page, it worked, but I could not succeed in overlapping the images at the bottom of this page as I had planned. Maybe this is because I have a background-attachment: fixed; attribute in my style sheet. What happened in this page was that the text and the image were layered over the quiz answers paragraph, and not at the bottom of the page as I had planned. Eventually I gave up and placed a small table instead. This is a picture of my dad in his Navy uniform, and after adding an oil painting filter to it, it now looks just like my son. Most of the positioning information is still pretty vague to me right now. I can see that a lot of further experimentation will be necessary, since my first attempt didn't work at all. On this additional page, you can see what I had originally intended to accomplish. |
 |