CSS

Question 1

Explain the CSS “box model” and the layout components that it consists of.

Provide some usage examples.

Answer 1

The CSS box model is a rectangular layout paradigm for HTML elements that consists of content, padding, border, and margin.

Question 2

How would you select every <a> element whose href attribute value begins with “https”?</a>

Answer 2

a[href^=”https”]

Question 3

How would you select every <a> element whose href attribute value ends with “.pdf”.</a>

Answer 3

a[href$=”.pdf”]

Question 4

How would you select every <a> element whose href attribute value contains the substring “css”.</a>

Answer 4

a[href*=”css”]

Question 5

How would you add automatic numbering to headers?

Answer 5

#page {
  counter-reset: heading;
}

h1:before {
content: counter(heading)”) “;
counter-increment: heading;
}

h1 {
counter-reset: subheading;
}

h2:before {
content: counter(heading)”.” counter(subheading)”) “;
counter-increment: subheading;
}

Question 6

What is the difference between position:relative and position:absolute?

Answer 6

The word relative in position:relative means that it is “relative to itself”. If you put position:relative on an element it will not affect it’s positioning at all. It will remain exactly as it would be if you left it as the default state. At this point you are able to move the element in any direction from it’s original position using top:, right:, bottom: and left:. position:relative also introduces the ability to us z-index, which decides which elements overlap others.

If you want to place an element wherever you want it, you might use position:absolute. The first thing that happens is that the element will be removed from the flow of elements on the page. Using position:absolute you can now position the element anywhere relative to the next parent of the element that has position:relative (or absolute). You position the element using top:, right:, bottom: and left:. position:absolute also brings z-index into play.