CSS Unit 2.2 CSS Enhanced design

Question 1

The font property is a shorthand property for:

Answer 1

font-style
font-variant
font-weight
font-size/line-height
font-family
(see css tricks)

Question 2

What css short hand property can we use instead of the “background-image”? What are some values we can give this property? (3)

Answer 2

background:
url()
top center /* be to add a ‘/’ after */
repeat-y

Question 3

If we wanted to add a gradient to a call out button that goes from bottom to top right how would that look?

Answer 3

linear-gradient (to top right, #000, #000);

Question 4

In a style pane when using chromedev tools, what does it mean when you see a crossed out declaration and a/or a greyed out one?

Answer 4

Crossed out declarations mean they’re being over ridden and greyed out means it’s just not being applied.

Question 5

Define Normalize.css

Answer 5

is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. It’s a modern, HTML5-ready, alternative to the traditional CSS reset.

Question 6

Define “flexbox container”

Answer 6

sets the context for flexbox layout; it contains flex items, the actual elements you layout using flexbox.

Question 7

Define “flex item”

Answer 7

Every direct child of a flex container is called a flex item; there can be any number of flex items inside a flex container.

Question 8

In css make a class a flex box container

Answer 8

.class {display: flex;}

Question 9

define “flex-direction” property

Answer 9

CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).

Question 10

Using “flex box” properties how do we make flex items wrap so they don’t off the edge of a viewport?

Answer 10

flex-wrap: wrap;

Question 11

Define “justify-content”

Answer 11

property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.

Question 12

define the “order” property

Answer 12

property sets the order to lay out an item in a flex or grid container. Items in a container are sorted by ascending order value and then by their source code order.