CSS Flashcards Preview

Web Development > CSS > Flashcards

Flashcards in CSS Deck (34)
Loading flashcards...
1
Q

What are the names of the individual pieces of a CSS rule?

A

Selector, Property, and Value.

2
Q

In CSS, how do you select elements by their class attribute?

A

.classname {

}

3
Q

In CSS, how do you select elements by their type?

A

nameofelement {

}

4
Q

In CSS, how do you select an element by its id attribute?

A

nameofid {

}

5
Q

Name three different types of values you can use to specify colors in CSS.

A

RGBA CSS Function, Hex Codes, and Color Names.

6
Q

What CSS properties make up the box model?

A

Border, Padding, and Margin.

7
Q

Which CSS property pushes boxes away from each other?

A

The Margin property pushes boxes away from each other.

8
Q

Which CSS property add space between a box’s content and its border?

A

The Padding property adds space between a box’s content and its border.

9
Q

What is a pseudo-class?

A

Pseudo-class is a keyword added to a selector that specifies a special state of the selected element.

10
Q

What are CSS pseudo-classes useful for?

A

To apply CSS for a special state of the element that is implied by the browser.

Ex: :hover
:nth-child(odd)

11
Q

Name at least two units of type size in CSS.

A

Pixels, Percentages, and Ems.

12
Q

What CSS property controls the font used for the text inside an element?

A

The font-family property controls the font used for the text inside an element.

13
Q

What is the default flex-direction of a flex container?

A

row is the default flex-direction of a flex container.

14
Q

What is the default flex-wrap of a flex container?

A

nowrap is the default flex-wrap of a flex container.

15
Q

Why do two «a>div</a>> elements “vertically stack” on one another by default?

A

Two «a>div</a>> elements “vertically stack” on one another because they are block-level elements by default.

16
Q

What is the default flex-direction of an element with display: flex?

A

The default flex-direction of an element with display: flex is row.

17
Q

What is the default value for the position property of HTML elements?

A

Static is the default value for the position property of HTML elements.

18
Q

How does setting position: relative on an element affect document flow?

A

Setting position: relative on an element does not affect the document flow.

19
Q

How does setting position: relative on an element affect where it appears on the page?

A

Setting position: relative on an element does not affect where it appears on the page unless an offset value is given.

20
Q

How does setting position: absolute on an element affect document flow?

A

Setting position: absolute on an element removes that element from the normal flow of documents.

21
Q

How does setting position: absolute on an element affect where it appears on the page?

A

Setting position: absolute on an element moves that element to its own layer, and can be moved around with offset values.

22
Q

How do you constrain an absolutely positioned element to a containing block?

A

You can constrain an absolutely positioned element to a containing block by using offset values.

23
Q

What are the four box offset properties?

A

The four box offset properties are: top, bottom, left, and right.

24
Q

What are the four components of “the Cascade”.

A

Source order, Inheritance, Specificity, and !important.

25
Q

What does the term “source order” mean with respect to CSS?

A

The order of the selectors in your stylesheet.

Lower css rules take precedence over higher css rules.

26
Q

How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?

A

When an inherited property is used on the parent element, and a property isn’t declared on the child.

27
Q

What does the transform property do?

A

The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.

28
Q

Give four examples of CSS transform functions.

A

transform: matrix (1, 2, 3, 4, 5, 6)
transform: translate(120px, 50%)
transform: scale(2, 0.5)
transform: rotate(0.5 turn)
transform: skew(30deg, 20deg)

29
Q

The transition property is shorthand for which four CSS properties?

A

transition-delay
transition-duration
transition-property
transition-timing-function

30
Q

Give two examples of media features that you can query in an @media rule.

A
min-width
max-width
height
width
orientation
etc.
31
Q

Which HTML meta tag is used in mobile-responsive web pages?

A

The viewport meta tag.

32
Q

What is a breakpoint in responsive Web design?

A

Point in styling to break to fit new form of styling.

33
Q

What is the advantage of using a percentage (e.g. 50%) width instead of a fixed (e.g. px) width for a “column” class in a responsive layout?

A

It matches the size of the viewport regardless of its size.

Container should have pixels.

34
Q

If you introduce CSS rules for a smaller min-width after the styles for a larger min-width in your style sheet, the CSS rules for the smaller min-width will “win”. Why is that?

A

Source order.