Styling

Question 1

Set font color to red

Answer 1

color: red;

Question 2

Set font to “Gill Sans”

Answer 2

font-family: "Gill Sans", sans-serif;

Always provide web-safe web as a backup

Question 3

Set font to bold

Answer 3

font-weight: bold

Question 4

Set font size to 17px

Answer 4

font-size: 17px

Question 5

Add solid red underline to text in p

Answer 5

text-decoration: underline solid red

Question 6

Capitalize text in p

Answer 6

text-transform: capitalize

Question 7

Center the text in p

Answer 7

text-align: center

Question 8

Increase line height by 50%

Answer 8

line-height: 1.5

Question 9

Break words in p when necessary

Answer 9

word-break: normal;

Question 10

What are web safe fonts

Answer 10

Web safe fonts: certain number of fonts that are generally available across all systems and can therefore be used without much worry.

Example: serif, sans-serif, monospace

Question 11

How to set text shadow, what are the arguments

Answer 11

Arguments:
- Horizontal offset: positive values move the shadow right, and negative values left.
- Vertical offset: positive - up, negative - down.
- The blur radius (optional): a higher value means the shadow is dispersed more widely.
- Color (optional)

text-shadow: 4px 4px 5px red;

Question 12

Change list marker (like ul) to circle

Answer 12

list-style-type: circle;

Question 13

Change list marker (like ul) to 🥕 (unicode char) or set it’s color to red

Answer 13

\::marker {
  color: red;
  content: "🥕";
}

Question 14

Change link color depending on it’s state. List all the stated and how to targe them.

Answer 14

• Link: A link that has a destination (i.e., not just a named anchor). :link pseudo class.
  
  • Visited: :visited pseudo class.
  • Hover: :hover pseudo class.
  • Focus: A link that is focused (e.g., moved to by a keyboard user using the Tab key or something similar, or programmatically focused using HTMLElement.focus()) — :focus pseudo class.
  • Active: A link that is activated (e.g., clicked on but not released yet), :active pseudo class.

ORDER IS IMPORTANT! (LoVe Fears HAte.)

a:link {
  color: #6900ff;
}

a:visited {
  color: #a5c300;
}

a:focus {
  color: #a5c300;
}

a:hover {
  color: #a5c300;
}

a:active {
  color: #a5c300;
}

Question 15

Different strategies for fitting images inside a box, how to set them.

Answer 15

• cover sizes the image down, maintaining the aspect ratio so that it neatly fills the box. As the aspect ratio is maintained, some parts of the image will be cropped by the box.
  
  • contain scales the image down until it is small enough to fit inside the box. This results in “letterboxing” as it is not the same aspect ratio as the box.
  • fill will fill the box but not maintain the aspect ratio.

object-fit: cover;

Question 16

Table: size your columns according to the width of their headings (not how much content they contain)

Answer 16

```table {
table-layout: fixed;
}
~~~

Question 17

Table: Prevent double border around cells

Answer 17

```table {
border-collapse: collapse;
}
~~~

Question 18

Table: Implement zebra striping

Answer 18

tbody tr:nth-child(odd) {
  background-color: #ff33cc;
}

tbody tr:nth-child(even) {
  background-color: #e495e4;
}