CSS 2

Question 1

static

Answer 1

This is the normal positioning scheme in which
elements are positioned as they occur in the normal
document flow.

Question 2

relative

Answer 2

– Relative positioning moves the box relative to its
original position in the flow.
– The distinctive behavior of relative positioning is that
the space the element would have occupied in the
normal flow is preserved as an empty space.

Question 3

absolute

Answer 3

– Absolutely positioned elements are removed from the
document flow entirely and positioned with respect to
the browser window or a containing element.

Question 4

fixed

Answer 4

– The distinguishing characteristic of fixed positioning is
that the element stays in one position in the window
even when the document scrolls.
– Fixed elements are removed from the document flow
and positioned relative to the browser window (or other
viewport) rather than another element in the document.

Question 5

Specifying position

Answer 5

– Once you’ve established the positioning method,
the actual position is specified with four offset
properties.
* top, bottom, left, right

Question 6

Relative Positioning– Example:

Answer 6

em{
position: relative;
top: 30px;
left: 60px;
background-color: fuchsia;
}

Question 7

Absolute Positioning
Example:

Answer 7

em{
position: absolute;
top: 30px;
left: 60px;
background-color: fuchsia;
}

Question 8

Fixed

Answer 8

div.fixed {
position: fixed;
top: 0;
left: 0;
width: 300px;
border: 3px solid #73AD21;
}

Question 9

Use the font-family property to specify a font or list of fonts

Answer 9

• body { font-family: Arial; }
• pre { font-family: Courier, monospace; }
• p { font-family: “Duru Sans”, Verdana, sans-serif; }

Question 10

Generic font families– serif

Answer 10

Examples: Times, Times New Roman, Georgia

Question 11

Generic font families– sans-serif

Answer 11

Examples: Arial, Arial Black, Verdana, Trebuchet MS, Helvetica,
Geneva

Question 12

Generic font families– monospace

Answer 12

Examples: Courier, Courier New, and Andale Mono

Question 13

More Selector Types

Answer 13

– Element selector
* p { color: navy; }
– Grouped selectors
* p, ul, p, td, th { color: navy; }

Question 14

Descendant selectors

Answer 14

– A descendant selector targets elements that are contained
within (and therefore are descendants of) another element.
– Descendant selectors are indicated in a list separated by a
character space.
– Example:
* li em{ color: olive; }
* h1 em, h2 em, h3 em { color: red; }

Question 15

Child selector

Answer 15

– A child selector is similar to a descendant selector,
but it targets only the direct children of a given
element. There may be no other hierarchical levels
in between.
– They are indicated with the greater-than symbol (>).
The following rule affects emphasized text, but only
when it is directly contained in a p element. – An emelement inside a link (a) within the paragraph
would not be affected.
* p > em {font-weight: bold;}

Question 16

Adjacent sibling selector

Answer 16

– An adjacent sibling selector targets an element
that comes directly after another element with
the same parent.
– It is indicated with a plus (+) sign.
– Other paragraphs are unaffected.
* div + p {font-style: italic;}

Question 17

ID selectors

Answer 17

– ID selectors allow to target elements by their id
values. The symbol that identifies ID selectors is
known as a hash symbol.

Question 18

ID selector example

Answer 18

<li>Happy Face T-shirt</li>

style{
li#catalog1234 { color: red; }
}

Question 19

Class selectors

Answer 19

– Class names are indicated with a period (.) at the
beginning of the selector.
– To select all paragraphs (by <p> element) with
class=“special”, use this selector
* p.special { color: orange; }
– To apply a property to all elements of the same
class, omit the element name in the selector
* .special { color: orange; }

Question 20

The Universal Selector

Answer 20

– Example
* * {color: gray; }
– It makes the foreground of every element in the document
gray.
* #intro * { color: gray; }
– It selects all elements in an “intro” section