X22c: Layout with CSS

1.
Discuss the limitations of CSS page layout; 
...ANSWER:.
§	The main problem is that for the most part, browsers don't support it as well as we'd like, and not as universally as they support tables.
§	A secondary problem is that centering isn't directly provided for in CSS-2, so either cumbersome work-arounds must be used, or we're back to using tables - at least for some purposes.
			[X22cB1]

2.
What are the four types of CSS positioning? 
...ANSWER:.static, absolute, fixed, and relative. 	[X22cC1]

3.
Describe static CSS positioning. 
...ANSWER:. Static positioning follows the normal flow of elements from top to bottom, as written in the code.	[X22cC2]

4.
Describe absolute CSS positioning. 
...ANSWER:. Absolute positioning refers to where an element appears with respect to its parent element. This differs from fixed positioning, which refers to the window.	[X22cC3]

5.
Describe fixed CSS positioning. 
...ANSWER:. With fixed positioning, you can determine an element's position relative to the window it appears in.	[X22cC4]

6.
Describe relative CSS positioning. 
...ANSWER:. Relative positioning is relative to the position the element would have occupied if we left it alone - that is, relative to its static position.	[X22cC5]

7.
Explain two ways to hide elements with the display property; 
... DO NOT USE THIS QUESTION until relevant info is put into module.	[X22cD1]

8.
Write HTML with in-line CSS to place this paragraph: 
	"Hello, World!"
10 pixels down and 15 pixels to the left of its parent element, assuming the parent element is simply the body of the HTML file. 
...ANSWER:.
	<p style="position: absolute; top: 10px; left: 15px;">Hello, World!</p>
			[X22cE1]

9.
Write HTML with in-line CSS to place this paragraph: 
	"Hello, World!"
10 pixels down and 15 pixels to the left of the upper left corner of the window in which it appears.
...ANSWER:.
	<p style="position: fixed; top: 10px; left: 15px;"> Hello, World!</p>
			[X22cE2]

10.
Write HTML with in-line CSS to place this paragraph: 
	"Hello, World!"
10 pixels down and 15 pixels to the left of the space it would normally have occupied.
...ANSWER:.
	<p style="position: relative; top: 10px; left: 15px;">Hello, World!</p>
			[X22cE3]

11.
Write HTML with in-line CSS to color the text of this paragraph red: 
	"Hello, World!"
...ANSWER:.
<p style="color: red">Hello, World!</p>
			[X22cF1]

12.
Write HTML with in-line CSS to place bluesky.gif as the background image of this paragraph: 
	"Hello, World!"
...ANSWER:.
<p style="background-image: url(bluesky.gif);">Hello, World!</p>
			[X22cF2]

13.
Write HTML with in-line CSS to color the background of this paragraph yellow: 
	"Hello, World!"
...ANSWER:.
<p style="background-color: yellow">Hello, World!</p>
			[X22cF3]

14.
List at least three of the types of border that can be set in CSS and the keyword to set them.
...ANSWER:. Keyword: border-style; any 3 of the following values: 
§	solid
§	dotted
§	dashed
§	double
§	groove
§	ridge
§	inset
§	outset
			[X22cG1]

15.
Define and explain the difference between padding and margin; 
...ANSWER:. 
§	Padding is inside, between the border and the contents
§	Margin is outside, between the border and any external elements.
			[X22cH1]

16.
Write HTML with in-line CSS to set the height of this paragraph to 40 pixels, and the width to 200 pixels: 
	"Hello, World!"
...ANSWER:.
<p style="height: 40px; width: 200px;">Hello, World!</p>
			[X22cI1]

17.
Explain the concept of overflow and how to handle it in CSS. 
...ANSWER:. If the height and/or width of an element is set, but the content is too big to fit, there are options controlled by the overflow property. Options are: 
§	visible (the default)
§	hidden (making it impossible for the user to see)
§	scroll (the UA puts in a scroll-bar or its equivalent so the user can scroll through the content)
§	auto (leave it up to the UA how to handle the overflow)
§	inherit (use the value set for the parent element)
		.	[X22cJ1]