Set - 3

Question 1 :

Why does my content shift to the left on some pages (in FF)?

Answer :

That'll be the pages with more content? The ones that have a vertical scrollbar? If you look in IE there's probably a white space on the right where there would be a scrollbar if there were enough content to require one. In Firefox, the scrollbar appears when it's needed and the viewport becomes about 20px smaller, so the content seems to shift to the left when you move from a page with little content to one with lots of content. It's not a bug or something that needs to be fixed, but it does confuse and irritate some developers.

If, for some reason, you'd like Firefox to always have scrollbars - whether they're needed or not - you can do this :

CSS html {
    height:100.1%;
}


Question 2 :

How do I combine multiple sheets into one?

Answer :

To combine multiple/partial style sheets into one set the TITLE attribute taking one and the same value to the LINK element. The combined style will apply as a preferred style, e.g.:

<LINK REL=Stylesheet HREF="default.css" TITLE="combined">
<LINK REL=Stylesheet HREF="fonts.css" TITLE="combined">
<LINK REL=Stylesheet HREF="tables.css" TITLE="combined">


Question 3 :

What is attribute selector?

Answer :

Attribute selector is a selector defined by 1) the attribute set to element(s), 2) the attribute and value(s), 3) the attribute and value parts:

1a) A[title] {text-decoration: underline}
All A elements containing the TITLE attribute will be underlined

1b) A[class=name] {text-decoration: underline}
The A elements classed as 'name' will be underlined

2) A[title="attribute element"] {text-decoration: underline}
The A elements containing the TITLE attribute with a value that is an exact match of the specified value, which in this example is 'attribute element', will be underlined

3) A[title~="attribute"] {text-decoration: underline}
The A elements containing the TITLE attribute with a value containing the specified word, which in this example is 'attribute', will be underlined


Question 4 :

What is parent-child selector?

Answer :

Parent-child selector is a selector representing the direct descendent of a parent element. Parent-child selectors are created by listing two or more tilde (~) separated selectors.

BODY ~ P {background: red; color: white}
The P element will be declared the specified style only if it directly descends from the BODY element:
<BODY> <P>Red and white paragraph </P> </BODY>

BODY ~ P ~ EM {background: red; color: white}
The EM element will be declared the specified style only if it directly descends from the P element which in its turn directly descends from the BODY element:

<BODY> <P> <EM>Red and white EM </EM> </P> </BODY>


Question 5 :

How can I specify background images?

Answer :

With CSS, you can suggest a background image (and a background color, for those not using your image) with the background property. Here is an example:

body {
    background: white url(example.gif) ;
    color: black ;
}

If you specify a background image, you should also specify text, link, and background colors since the reader's default colors may not provide adequate contrast against your background image. The background color may be used by those not using your background image. Authors should not rely on the specified background image since browsers allow their users to disable image loading or to override document-specified backgrounds.