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
  • {}
A

target all the element on the page

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

what is “selector” and what is “delectation”?

A

xx {???}

xx is the “selector” and ??? is the “delectation”

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

what is “property” and what is “value”?

A

h1,h2 { font-family: xxx; color: ???}

font-family and color is the “property”

xxx and ??? is the “value”

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

declaration block

A

a set of rules, code

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

xxx {} is class or id?

A

(#) is ID
. is Class

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

.xxx {} is a class or id?

A

. is class
(#) is id

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q
  • {} mean?
A

universal selector

target all elements on the page

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

h1, h2, h3 {} means the css rule for which selector?

A

Type selector

target h1, h2, h3 elements

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

body {
font-family: roboto, sans-serif, helvetica}

A

sans-serif in here means a *fallback value.

When font style roboto is not available , sans-serif will apply.
sans fails, helvetica

always set font family with two type.
Mac for roboto
Win for sans-serif

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

rgb(red,green,blue)
hul(x,x,x)

A

they are css function

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

x.?? {} means the css rule for which selector?

A

a class selector.

means all the x with ?? class

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

xx>?? {} means the css rule for which selector?

A

Child selector

target any ?? that are the children of xx (but no other ?? in the page)

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

x(blank space)? {} means the css rule for which selector?

x ? {}

A

Descendant selector

target any ? elements that are sit inside the x element

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

x+? {} means the css rule for which selector?

A

ADJACENT SIBLING SELECTOR

target the first ? element right after x element (but not other x elements)

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

x~? {} means the css rule for which selector?

A

General SIBLING SELECTOR

target all the ? elements after x elements

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

rem

A

2rem means 200% of html initial value (which is 16px, can be adjust by css)

3 rem means 300%

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

em

A

2em means 200% of parent value

<div font-size 16px

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

cross axies (align-items)

A

top to bottom

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

main axies(justify-content)

A

left to right

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

align-items to control the single row in flexbox

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

aligh-content control all the rows in flexbox

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

box-sizing: content -box

A

content keeps the same size, just add width and height according to the padding, border, margin.

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

box-sizing: border-box

A

content will shrink for the space for padding, border, margin.

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

row

A

a vertical space. every line

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

column

A

a horizontal space left to right, a small part of row

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

What are the four components of “the Cascade”.

A

source order, inheritance, !important, Specificity

27
Q

transform

A

element in broswer is 3d

scale is shift rotate on z
rotate is turn around on x
translate is change origin point (top left)

rotateXY Zmaybe on Y?

28
Q

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

A

css rule declaration block

29
Q

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

A

Dot (.) + class name

30
Q

In CSS, how do you select elements by their tag name?

A

write the name of element directly

31
Q

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

A

To select an element with a specific id, write a hash (#) character, followed by the id of the element.

32
Q

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

A

rgb, hue , hex

33
Q

colors that can make transparent?

A

rgba, huea

34
Q

What CSS properties make up the box model?

A

margins, borders, padding, and the actual content.

35
Q

Which CSS property pushes boxes away from each other?

A

margin

36
Q

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

A

padding

37
Q

What is a pseudo-class?

A

A pseudo-class is a selector that selects elements that are in a specific state, e.g. they are the first element of their type, or they are being hovered over by the mouse pointer.

A pseudo-class is used to define a special state of an element.

For example, it can be used to:

Style an element when a user mouses over it
Style visited and unvisited links differently
Style an element when it gets focus

38
Q

What are CSS pseudo-classes useful for?

A

When a user points to an object on a web page with a mouse, it’s helpful if that object responds in some way. For example, when a user hovers over a link, the color and background-color of that link could be reversed.

39
Q

Name two types of units that can be used to adjust font-size in CSS.

A

font-size
font-family
font-weight

40
Q

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

A

font-family

41
Q

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

A

row

42
Q

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

A

nowrap

43
Q

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

A

static

44
Q

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

A

It moves the item it was applied to, but doesn’t affect the rest of the document flow.

relative positioning doesn’t affect the layout, the positioned element is still in its initial place logically, hence the occupied space is reserved. But it could be displaced visually by top , right , bottom , left offsets/properties.

Positioning allows you to take elements out of normal document flow and make them behave differently, for example, by sitting on top of one another or by always remaining in the same place inside the browser viewport.

45
Q

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

A

relative positioning doesn’t affect the layout, the positioned element is still in its initial place logically, hence the occupied space is reserved. But it could be displaced visually by top , right , bottom , left offsets/properties.

It makes the element get positioned relative to where it would be in the normal document flow.

46
Q

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

A

Absolutely positioned elements are removed entirely from the document flow. That means they have no effect at all on their parent element or on the elements that occur after them in the source code. An absolutely positioned element will therefore overlap other content unless you take action to prevent it.

Surrounding elements ignore the space the absolute positioned element would have taken up. The absolute item no longer has a place in the document flow.

47
Q

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

A

it will follow the parent which is set to display:flex. if parents not , grandparents . it can be put in anywhere of flex div without affect normal stuff.

The element is placed relative to where it is in its containing element, so make sure the containing element is set to relative also. It will go back to the first HTML element that is not static.

48
Q

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

A

by setting its parent to display:flex

49
Q

What are the four box offset properties?

A

top, right, bottom. left

50
Q

What are the four components of “the Cascade”.

A

source order, inheritance, !important, Specificity

51
Q

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

A
52
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
53
Q

List the three selector types in order of increasing specificity.

A

tag, class, id

54
Q

Why is using !important considered bad practice?

A

important property is considered a bad practice. That’s because it breaks the natural cascading of stylesheets, which makes maintaining and debugging your website much more difficult. However, there are specific use cases in which using the ! important property is ideal.

55
Q

What does the transform property do?

A

The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.

56
Q

Give four examples of CSS transform functions.

A

rotate, scale, skew, or translate

57
Q

The transition property is shorthand for which four CSS properties?

A

The transition CSS property is a shorthand property for transition-property , transition-duration , transition-timing-function , and transition-delay .

58
Q

<meta></meta>

A

name=”viewport”—this meta deal with viewport
content=”width=device-width — this content width is exact same as device
initial-scale=1— scale is 1 and cannot change

59
Q

@media

A
60
Q

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

A
61
Q

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

A

<meta></meta>

62
Q

What is a breakpoint in responsive Web design?

A

the exact pixel the page will break

63
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

less media rules, flex

64
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

less media ruls

Web Development (7 decks)

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