Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

LearningFuze > CSS Quiz Questions > Flashcards

CSS Quiz Questions Flashcards

1
Q

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

A

selector {
(declaration block)
property: value;
}

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

How are key/value pairs related to CSS?

A

within a declaration block

there are properties(keys) and values

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

color keyword: (blue);
hexadecimal value: #ffffff
RGB function: rgb(255,255,255)

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
  1. Readability,
  2. Availability: if it is used as a default on certain browsers.
  3. Does it work with the theme of the website (professional/casual etc)
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

In case your first choice of font is not recognized by certain browsers/computers.

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

It determines what styling properties take priority and inheritance of others (ie: if there are two different values for the same property)

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

What is source order?

A

The order that the css rules are written

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

ie: if you wanted to change the styling of content dynamically(with a button press)

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

What is inheritance?

A

Child elements will acquire the css rules from their parent elements

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

Why might CSS include this feature?

A

Makes things easier and more efficient

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

What is the purpose of !important?

A

Makes a css property supersede all other properties

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

When is !important a good tool to use?

A

Usually never

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

What is specificity?

A

The priority of which css rules take place on an element (selector strength)

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

How is specificity calculated?

A

There is a numeric value associated with every selector, and the higher value will take priority. If the values are equal then source order wins

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

Why might CSS include this feature?

A

To make sure certain styling does not get overwritten accidentally by other selectors

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

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

A 
* universal, div (element selector), .class selector, :pseudoclass, #id selector, style="inline-styling", !important
Refer to SpeciFISHity bookmark
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

What is the CSS Cascade?

A

The whole umbrella of factors to determine html styling priorities such as: inheritance, specificity, importance.

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

What are CSS pseudo-classes useful for?

A

Changes appearance of elements when a user interacts with them

22
Q

What does the transform property do?

A

Lets you rotate, scale, skew, or translate an element

23
Q

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

A

:first-child selects the first child of its parent element
:last-child selects the last child
:nth-child(n) selects nth child

24
Q

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

A

Change color of an element, translate, affect scale of an element, etc.

25
Q

Why might transitions be a helpful effect for styling?

A

Makes the UI feel more comfortable for users

26
Q

Are all properties able to be transitioned?

A

Only properties that are animatable can be transitioned

27
Q

How do block-level elements affect the document flow?

A

They are put onto a new line and creates a block taking up the entire width of the line, and forces the next element to start on a new line

28
Q

How do inline elements affect the document flow?

A

Only takes as much space as it needs, stays within the bounds of it’s previous element

29
Q

What are the default width and height of a block-level element?

A

Default width is the entire length of the line it is on, and the height is : auto (the size of the content)

30
Q

What are the default width and height of an inline element?

A

Height and width are both : auto (size of the content)

31
Q

What accessibility considerations must be considered when choosing HTML elements?

A

Options for screenreaders: correct syntax for tags such as < strong > and < em >, < alt >
lang=”en” .

32
Q

What is the initial display property of < div >s?

A

Block level

33
Q

What is the difference between display: none and visibility: hidden?

A

Display:none removes the element from the flow of the page.
Visibility:hidden hides the element but still leaves space on the page where it used to be

34
Q

What is the difference between the block, inline block, and inline display properties?

A

Block starts on a new line, inline starts on the same line, inline block is same as inline but the height and width can be changed.

35
Q

Why are CSS resets helpful for cross browser compatibility?

A

Helps to standardize the layout for different browsers

36
Q

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

A

Might reset something that could harm the page,

could add more unnecessary work,

37
Q

What is an argument against using CSS resets?

A

Adds a little more load time

38
Q

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

A

Static

39
Q

How does setting position: relative on an element affect document flow and where the element appears on the page?

A

Relative positions something from the point where it would have normally been

40
Q

How does setting position: absolute on an element affect document flow and where the element appears on the page?

A

Absolute position will make something no longer exist in the page flow and other elements can overlap with it

41
Q

What are the box offset properties?

A

Top, Right, Bottom, Left

42
Q

What were floats originally designed for?

A

To allow for text to appear alongside or around an image like newspapers.

43
Q

What are clears for with floats?

A

they prevent elements from touching the left or right sides of them

44
Q

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

A

It removes elements from the DOM just like position:absolute. Forces you to use float for the entire page

45
Q

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

A

Row

46
Q

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

A

nowrap

47
Q

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

A

You need to have set sizing for everything, more for smaller portions of the page.
For the entire page, you should use a grid system normally.

48
Q

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

A

Gives elements the proper ratios whether viewed on a monitor or phone. Makes it much more organized - divide work.

49
Q

What are the three core parts of a grid system?

A

Container, Row, column

50
Q

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

A

You know exactly how much room you have (100%) and know how much space you have left. Percentages maintain aspect ratio on multiple devices

LearningFuze (11 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions