CSS

Question 1

What declaration block should you use to add “cursor: pointer” to links when hovering over them?

Answer 1

a {}

Styling the cursor on a:hover {} can cause unwanted behaviors, while styling the cursor in the a {} block will still only modify the cursor when hovering.

Question 2

What are the four main states of links? What are their associated pseudo-classes?

Bonus: In what order should their CSS rules be written for proper cascading?

Answer 2

Normal (not clicked), hover, active (clicked), and visited.

:link
:visited
:hover
:active

The above order properly cascades the link states.

Question 3

What are the four layers of the box model?

Answer 3

From innermost to outermost:
- Content
- Padding
- Border
- Margin

Question 4

What does the text-transform property determine?

Bonus: what are the four main values (including the default)?

Answer 4

The capitalization of text on the screen.

none: default value, no rule imposed
uppercase: text will be all-caps
lowercase: text will be no-caps
capitalize: the first letter of each word will be capitalized

Question 5

What is the difference between the following selectors?

div p {}
div > p {}

Answer 5

The descendant selector (“div p {}”) will apply rules to any p element which descends from a div element.

The child selector (“div > p{}”) will only apply rules to p elements with a parent element of div.

Question 6

What is the difference between the following selectors?

div + p {}
div ~ p{}

Answer 6

The adjacent sibling selector (“div + p {}”) will apply rules to any p elements which come immediately after a sibling div element.

The general sibling selector (“div ~ p {}”) will apply rules to any p elements which are at any point preceded by a sibling div element.

In other words: the adjacent sibling selector applies to elements which come directly after a specific sibling, while the general sibling selector applies to elements which come any time after a specific sibling.

Question 7

What do the following selectors apply rules to?

p::before {}
p::after {}

Answer 7

They style any text inserted with the “content” property in that selector. In this example, text will be inserted immediately before or after p elements.

Example:

p::before {
content: “example text”;
color: red;
}

The above example will insert red text saying “example text” before all p elements. Note that the content property can be a reference, rather than a static string.