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:
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.
|