I designed this site using CSS. If you're seeing this paragraph, your browser does not support CSS. You can still see the page, but you're missing a lot!.

CSS Week 5

Week 1 Quiz


1 How do you set a different margin for all sides of an element?
The parentheses are part of the answer, I know they don't belong in the code.
img { margin : 10px(top) 5px(right) 15px(bottom) 20px(left); }


2 True or False? Margins collapse when they have adjacent vertical margins.
True.

3 What might happen if you use a hanging indent without margins or padding?
Some of the words may be cut off.

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. Whatever rule is closest to the text you want to affect wins. Also, the one on the bottom of the page is technically considered closest to the text.

5 What does Cascade mean?
Cascade refers to the order in which styles are applied elements. The general rule is that whatever is closest to the text will win.

6 What does the !important attribute do?
Rules marked with !important are given higher priority no matter where they appear in the hierarchy.

7 Explain what display:inline; and display:block; mean. How could you use these to your advantage?
p { display : inline; } - Normally the p tag is a block level element and begins on a new line. with display : inline, p is changed to an inline element and there will be no blank lines between paragraphs.
display : block wil put things on their own line. For instance, img { display : block; } will put pictures on their own line.
A way to use the display property would be to set up a "warning paragraph" that only non-CSS compliant browsers would see. I used one at the top of the page.

More Experiments With margins

Here is an image with margins of 10px x 20px: a rose Here is another sentence so you can see the margin. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla tellus. Donec porta auctor elit. Donec interdum, tortor in ullamcorper ultrices, wisi mi elementum pede, eget volutpat nulla magna sed urna. Vestibulum sed ligula a felis tincidunt pharetra. Proin fermentum, lacus in pellentesque sodales, lectus magna adipiscing libero, id placerat tortor justo sit amet orci. Sed elit nibh, posuere elementum, malesuada non, adipiscing sit amet, purus. Suspendisse semper mollis odio. Phasellus imperdiet metus ut pede. Cras tellus erat, semper at, tristique eu, cursus molestie, purus. Sed auctor enim eget nunc. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla tellus.

Here is a heading with a dotted border on top and solid on bottom.

 

Here is an example of a hanging indent.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla tellus. Donec porta auctor elit. Donec interdum, tortor in ullamcorper ultrices, wisi mi elementum pede, eget volutpat nulla magna sed urna. Vestibulum sed ligula a felis tincidunt pharetra.

Email Me.

Valid HTML 4.01!

Valid CSS!