Set - 5

Question 16 :

When is auto different from 0 in margin properties? 

Answer :

In vertical margins, auto is always equal to 0. In horizontal margins, auto is only equal to 0 if the width property is also auto. Here are three examples, assume that there is a <P> that is a child of<BODY>:

Example 1: auto value on the width.

BODY {width: 30em;}
P {width: auto; margin-left: auto; margin-right: auto;}

Since the width property is auto, the auto values of the two margins will be ignored. The result is a P that is 30em wide, with no margins.

Example 2: two auto margins

BODY {width: 30em;}
P {width: 20em; margin-left: auto; margin-right: auto;}

The P will be 20em wide and the remaining 10em will be divided between the two margins. Paragraphs will be indented 5em at both sides.

Example 3: one auto margin

BODY {width: 30em;}
P {width: 20em; margin-left: 2em; margin-right: auto;}

In this case, paragraphs are 20em wide and are indented 2em on the left side. Since the total width available is 30em, that means the right margin will be 8em. 
Note that the default value of width is auto, so setting one or both margins to auto is only useful if you set the width to something other than auto at the same time.


Question 17 :

How does a simple CSS style rule look ?

Answer :

P { font-family: serif; font-size: 1.2em; }
Here we see a rule with a 'selector' P that has been given two style declarations, i.e. two 'property:value' pairs.
'font-family' and 'font-size' are properties of the content of element P , and these properties are assigned the values of 'serif' and '1.2em' respectively.
A colon ':' is the value assignment symbol in CSS, so using an equal sign '=' instead is an error and is required by the CSS specification to be ignored. Any browser that appears to honor this style is behaving improperly.
For length values a 'unit' is always needed and there shall never be any space between a number and its length unit.
A value given as e.g. '1.2 em' is an error and is required by the CSS specification to be ignored. Any browser that appears to honor this style is behaving improperly.
A semicolon ';' between declarations is required but it's also good "rule of thumb" to put a ';' even after the last declaration.
Finally, curly braces '{&hellip;}' group one or more declarations into a final CSS rule.


Question 18 :

Why are there gaps above and below my form in IE?

Answer :

A lot of the time, when you find gaps that you can't account for, they are due the default styles of different browsers - especially the margins and padding. IE gives forms some margins above and below forms while Firefox doesn't. It's like with lists - you'll find bigger padding and margins for lists in IE than in Firefox. Paragraph margins are different, as are the margins on heading tags (h1,h2, etc).

A good way to not get caught out by these problems is to set all margins and padding to zero at the top of your style sheet and then add them as and when you feel the a need for them, in that way, any margins and padding will be the same in different browsers.

CSS
* {
margin:0;
padding:0;
}


Question 19 :

If one were to set Text and Link colors using a style sheet, should one also define the background colors for these elements as well? 

Answer :

It is generally true that you should give background or background-color a value, but not necessarily a color value. E.g., if the document has a background image, you would "highlight" all links if you give them a background color.

body { background-image: url(light-texture.png) #FFF; color: #000 }
a:link, a:visited, a:active { color: #00F; background-color: transparent; }

By setting the background-image explicitly to transparent, you lower the risk of another rule in the cascade giving links a background that would highlight them.


Question 20 :

How do you override the underlining of hyperlinks? 

Answer :

CSS has the ability to explicitly control the status of underlining for an element - even for hyperlinks. The correct way to do this in an external or document-level style sheet is:
A { text-decoration: none }
and within an anchor element as:
<a HREF="example.htm" STYLE="text-decoration: none">link text</a>

Note: The underlining of hyperlinks is a long-standing visual convention that assists in the visual identification of active hyperlink areas. Many users expect to see hyperlinks underlined and may be confused and/or irritated if they are not used. User-defined style sheets address this user need by allowing the user to have final control over this feature. Unfortunately, wide support for this ability does not yet exist.