Brainscape's Knowledge GenomeTM

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


See full index

Web Development > CSS > Flashcards

CSS Flashcards

1
Q

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

A

selector, declaration, inside the declaration block, there are properties and values.

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

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

A

using the dot notation in front of the selector name.

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

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

A

using element name

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

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

A

using hash notation in front of the selector name.

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

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

A

RGB Values, Hex Codes, Color Names

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 add space between a box’s content and its border?

A

padding

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

What is a pseudo-class?

A

a keyword added to a selector that specifies a special state of the selected element(s). classes applied by the browser under special circumstances.

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

What are CSS pseudo-classes useful for?

A

Pseudo-classes let you apply a style to an element under specific circumstances. apply styling as a result of user interaction.

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

Name at least two units of type size in CSS.

A

pixels, percentages, ems

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

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

A

font-family

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

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

A

row

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

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

A

no wrap

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

Why do two div elements “vertically stack” on one another by default?

A

because div is a block level element.

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

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

A

row

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

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

A

static

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

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

A

normal document flow, other neighboring elements will stay the same. once the positioned element has taken its place in the normal flow, you can then modify its final position, including making it overlap other elements on the page.

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

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

A

stays the same until top, right, bottom, left properties to modify the elements position.

20
Q

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

A

not part of normal document flow and no space is created for the element in the page layout. It sits on its own layer separate from everything else.

21
Q

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

A

It is positioned relative to its closest positioned ancestor, otherwise, it is placed relative to the initial containing block.

22
Q

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

A

set its ancestor to any other position than static.

23
Q

What are the four box offset properties?

A

top, right, bottom, left

24
Q

What are the four components of “the Cascade”.

A

source order, specificity, inheritance, important.

25
Q

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

A

the order that your CSS rules are written in your stylesheet. style that comes lower in your stylesheet gets applied.

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 no value for an inherited property has been specified on an element, the element gets the computed value of that property on its parent element. Only the root element of the document gets the initial value given in the property’s summary.

27
Q

List the three selector types in order of increasing specificity.

A

element selector, class selector, id selector.

28
Q

Why is using !important considered bad practice?

A

it makes debugging difficult by breaking the natural cascading in your stylesheets.

29
Q

What does the transform property do?

A

lets you rotate, scale, skew, or translate an element. Modifies the coordinate space of the css.

30
Q

Give four examples of CSS transform functions.

A

matrix, translate, scale, rotate, skew

31
Q

The transition property is shorthand for which four CSS properties?

A

transition property, transition duration, transition-timing-function, and transition-delay. transition property always needs to be on the normal rule, not on pseudo class.

32
Q

What event is fired when a user places their cursor in a form control?

A

focus

33
Q

What event is fired when a user’s cursor leaves a form control?

A

blur

34
Q

What event is fired as a user changes the value of a form control?

A

input

35
Q

What event is fired when a user clicks the “submit” button within a from element?

A

submit

36
Q

What does the event.preventDefault method do?

A

the event does not get explicitly handled, its default action should not be taken as it normally would be. prevents default behavior for that element for that event.

37
Q

What does submitting a form without event.preventDefault do?

A

prevent the browser from automatically reloading the page with the form’s values in the URL. page refreshes. without preventDefault.

38
Q

What property of a form element object contains all of the form’s controls.

A

elements

39
Q

What property of form a control object gets and sets its value?

A

elements.value

40
Q

What is one risk of writing a lot of code without checking to see if it works so far?

A

it will be really hard to debug

41
Q

What is an advantage of having your console open when writing a JavaScript program?

A

you can check your work and know when things are going wrong.

42
Q

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

A

color, hover, height, min-width, max-width.

43
Q

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

A

meta tag with content attribute, width equals device-width, initial-scale 1. viewport meta tag.

44
Q

What is a breakpoint in responsive Web design?

A

point at which media query is introduced.

45
Q

What is the advantage of using a percentage width instead of a fixed width for a “column” class in a responsive layout?

A

easier to structure the column because you are going based off % of the viewport, not px value. more flexible and easier to work with.

46
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, which ever styling comes later gets applied.

Web Development (7 decks)

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