Styling

Question 1

How can we style a button to be perfect square in CSS.

Answer 1

We could use height and width to style a perfect square

We could also use aspect-ratio set to 1 to style a perfect square.

Question 2

How could be style a button to be a circle in CSS

Answer 2

We could style a circle by setting aspect-ratio: 1;

border-radius: 50%;

Question 3

What syntax do we use when setting aspect-ratio in CSS?

Answer 3

aspect-ratio: width/height;

Question 4

Does aspect-ratio work with non-replaced content?

Answer 4

Yes, aspect-ratio works with non-replaced content (divs, etc)

Question 5

Where in most web-pages would aspect-ratio be useful?

Answer 5

When we are using a background-image as a Hero image, we can control its responsiveness with aspect-ratio

Question 6

What is the default style for box-sizing?

What does this mean for the size of a box?

Answer 6

Content-box is the default for box-sizing

This means that padding and border-width are added to content size to determine the actual size of the box.

Question 7

What is a typical reset value for box-sizing in CSS

Answer 7

box-sizing: border-box;

This resets the box width to be content, padding, and border combined.

Question 8

What are percentage based width and height relative to?

Answer 8

They are relative to the space made available by the parent element

Question 9

Where is the border color set?

Answer 9

It can be set either with a direct value

or

If not specified it will inherit the text color

Question 10

What does the value currentColor do in Css?

Answer 10

It uses the current text color as the color value.

Question 11

Do you need a border to declare a border-radius value?

Answer 11

No, you do not.

Question 12

What is the difference between border and outline in CSS

Answer 12

Outline does not affect layout and does not change its size or move it.

Question 13

What is the syntax for a outline declaration?

Answer 13

outline: [width] [style] [color];

You can also have outline-offset: [value];

Question 14

Should we add styles to our heading elements (h1, h2, h3, etc)

Answer 14

Generally no, we should use utility classes to style elements and allow headings to retain semantic value.

Question 15

Why should we avoid styling heading elements/

Answer 15

To reserve heading elements for semantic markup and accessibility.

Question 16

How can we add a gradient to allow text to show a bit more clear?

Answer 16

background: linear-gradient(top color, bottom color)

Question 17

What background effect might we use to make text pop?

Answer 17

we might use background: linear-gradient(top, bottom)

Question 18

If we have a group of similar containers and would like to highlight one with different colors, what might be an option?

Answer 18

To highlight a single card or container, we might locally redefine a primary variable with new values

–primary-clr: var(–accent-clr)

Question 19

How to we alter the value of a variable based on a media query in CSS?

Answer 19

We can redefine the :root variable value in a media query

@media (min-width: 800px) {

:root {

–font-size: 3rem }

}

Question 20

Where is the before pseudo-element inserted (::before)?

Answer 20

It is inserted before the content of the element selector, not before the element itself.

Question 21

Where is the after pseudo-selector inserted (::after)?

Answer 21

it is inserted after the content on the selector (not after the selector itself)

Question 22

Can we use ::before or ::after with images?

Answer 22

No, because images are replaced content, they don’t actually have content per-se

Question 23

When should we add breakpoints to our CSS?

Answer 23

We should consider looking at our layout and basing breakpoints on when the layout begins to fail.

Question 24

When does em not scale relative to the parent element’s font-size?

Answer 24

When we use em to control padding on an element, the padding relative size is based on the font-size of the element with the padding.

Question 25

What is the main benefit of setting padding and margins of elements containing typography in ems?

Answer 25

The main benefit is that these paddings and margins will scale when font-size changes with styling or media queries.

Question 26

With the :last-child pseudo-class, where is the “last-child” determined from?

Answer 26

The :last-child pseudo-class looks to see if the prepended selector is the last-child of an element, and will apply the style rule to that selector:

li:last-child - looks for an li that is the last-child of a parent element. If is exists, that li get the style rule applied.