CSS Flashcards

1
Q

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

A

Selector and Declaration. Then the declaration is made up of a property and value.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

How arekey/valuepairs related to CSS?

A

Declarations are made up of a similar pairing called property:value

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

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

A

Hexidecimal values, rgba values, hue/saturation/lightness HSLA.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What are three important considerations for choosing fonts?

A

Line-height, line-spacing, fallback fonts, typeface readability, typeface support and linking fonts. Type of font-size measurements (ems vs px vs percent)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Why must you have backup fonts assigned when selecting custom fonts?

A

Older browsers may not support your selected font and may need a font stack to make sure your page doesn’t look wack.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What CSS properties make up the box model?

A

Content, padding, border, margin.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Which CSS property pushes boxes away from each other?

A

margin

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Which CSS property pushes box content away from its border?

A

Padding

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What purpose does the CSS Cascade serve?

A

To have a type of reliable ruleset and order in terms of when selectors target the same property. Ex: you can make mass changes to a governing container if you know children in the container will want to share the same rule, however there may be a few children where you do not want this styling to happen.
Cody: it determines which styling is ultimately applied.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What is source order?

A

Order in which rules are written in the stylesheet

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

In what situations might you need to apply styling to a single element multiple times in one stylesheet?

A

Font-family. Setting a font-family for an entire page, then setting them individually for other elements. Also responsive design. Diff sets of styling for different media queries.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What is inheritance?

A

When elements take on the same styling as a parent element (like font-family).

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Why might CSS include the feature of inheritance?

A

Quality of life. Not having to make the same rule for other elements that need the same styling.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Is inheritance a good tool to use for styling? If so, on what occasions?

A

Yes, when elements will have the same properties, like fonts, padding, etc.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

What is the purpose of!important?

A

To supersede any css rule that conflicts with the property that is marked with !important.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

When is!importanta good tool to use?

A

Almost never. Utility classes. When a higher specificity affects an entire element type like , which there are lots of on the page. You can give an exemption to a whole class of buttons so they don’t get their styling overwritten. Overwritting styling I dont have control of like a wordpress template or writing libraries for css.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

What is specificity?

A

The way the browser decides how relevant a css property is to an element. Different html elements hold different specificity weight. If something weighs more, it will win over weaker elements if they have conflicting CSS properties, regardless of source order.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

How is specificity calculated?

A

There is a scoring style of 0-0-0-0. Far right column is element type. If you select all div elements, it has a score of 0-0-0-1 because you are only selecting one element type. Li > ul has a score of 0-0-0-2. A class has a score of 0-0-1-0. 1 class will beat 10000 elements.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

Why might CSS include this feature (specificity)?

A

So you can make precise selections on html elements. Quality of life. It lets you make mass changes to elements then make changes to other child elements. We don’t have to worry about source order as much.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

What is the order of selector strengths for CSS specificity (commonly referred to as the Specificity Hierarchy)?

A

!important > inline-style, ID, class/pseudo-class/attribute, element & pseudo-element, ‘*’.

21
Q

What are CSS pseudo-classes useful for?

A

Giving styling and improving user-experience. Showing that elements allow interaction or showing that an action by a user has been registered by the website.

22
Q

What does the transform property do?

A

Alters the selected element in various ways (visually)

23
Q

What is the difference between the:first-childpseudo selector and the:last-childpseudo selector?

A

:first-child selects the first sibling of an element type. :last-child selects the last sibling of an element type.

24
Q

What are 3 examples of what can be done with CSS transitions?

A

Scale, rotate, translate, skew.

Changing styling of an element, setting the duration, delay, and transition timing function of a transition.

25
Q

Why might transitions be a helpful effect for styling?

A

Styling changes on :hover to improve user experience.

26
Q

Are all properties able to be transitioned?

A

No

27
Q

What is the initial display property of< d i v >s?< /div>

A

block

28
Q

What is the difference betweendisplay: noneandvisibility: hidden?

A

Display none visually removes it from the page and the flow of the document (but can still be seen in inspector) and other elements will move in to take its place. Visibility hides the element, but still leaves a blank space for where it would have been.

29
Q

What is the difference between theblock,inline block, andinlinedisplay properties?

A

Block takes up the full width of the page and doesn’t allow content on either side of it.
Inline block same as inline and allows content on either side of it but retains features of a block element, like adjustable width and height.
Inline only takes up as much space as needed, and its height and width cannot be changed.

30
Q

Why are CSS resets helpful for cross browser compatibility?

A

Reducing inconsistencies and creating a more standardized starting point when building a page.

31
Q

Why is it important to be mindful of what you reset with your CSS resets?

A

It could cause unwanted changes to more elements than you’d like. Such as zero-ing padding and margin. Some elements are preferred with it, and some without. Careful to not use !important. If working with a team, maybe someone like’s certain stylings that you disabled. So it would be better to do a css selection on a specific thing so your coworker doesn’t have to work to overwrite it.

32
Q

What is an argument against using CSS resets?

A

User agent styles are more consistent these days.
Maybe you like the opinionated styles?’
If setting something that will overwrite your reset, or even the same, then you have duplicate code, and some have the crappy argument that it gives the browser more work to do (negligible).

33
Q

What is thedefaultvalue for the position property of HTML elements?

A

Position: static; normal flow. Block level elements.

34
Q

How does setting positionrelativeon an element affect document flow and where the element appears on the page?

A

It does not affect the flow. It’s real spot is still where it was originally, it is just being displayed in another area.

35
Q

How does setting positionabsoluteon an element affect document flow and where the element appears on the page?

A

It removes it from the flow. Elements around it ignore it as if it wasn’t there. It appears relative to the parent container, and above any other elements that might be in the same area.

36
Q

What are the box offset properties?

A

Top bottom left right. Takes percent, px, and em.

37
Q

What were floats originally designed for?

A

Better layout for print, like news and magazines.

38
Q

What are clears for with floats?

A

Restricting an element from touching either the left or right or both or ‘none’ sides of a floated element.

39
Q

What are some of the downsides for using floats in layout design?

A

It’s too space conscious. It can break logical layouts if certain previous elements get in the way. Basically all sorts of weird layout issues can happen due to how space is allocated.

40
Q

What is the defaultflex-directionof aflexcontainer?

A

row

41
Q

What is the defaultflex-wrapof aflexcontainer?

A

nowrap

42
Q

Why should flexbox not be used for building complete web page layouts?

A

You can’t make complex layouts. Everything will be the same style on the whole page. It doesn’t scale well.

It could cause weird unintended layout issues on different sized viewports or making the browser window smaller or larger.

43
Q

Why is it important to use a grid system for CSS layouts?

A

Very clean and easy to manage. Lots of flexibility. Easy to make mass changes to layout without having to make changes to a bunch of individual elements.

44
Q

What are the three core parts of a grid system?

A

Container, row, column.

45
Q

Why is it a good idea to use percentages for grid column widths?

A

So everything scales together and equally at once when on different devices or even adjusting browser window size.

46
Q

How do you think building this layout would be different without a grid system?

A

Way more complicated and time-intensive. There would be way more inconsistencies and headaches having to do with margins and padding.

47
Q

What advantages do you see with using a grid system?

A

It simplifies the entire process of creating an easy, responsive layout. It saves so much time and makes it easy to edit later on. Changing the size/styling of one thing won’t throw off everything else.

48
Q

Why are media queries crucial to responsive grid designs?

A

So all devices and all screen sizes can have an equally good viewing experience. Viewing a full sized webpage on a phone is terrible.
Make different layouts for different screen sizes.