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-set?

A

Declaration block
Selector
Property:value pairs

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

.class

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

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

A

idname

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

Name 3 different type values you can use to specify colors in CSS:

A

rgb
rgba
hex
hsl

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

What CSS properties make up the box model?

A 
height 
width
padding  
border 
margin
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
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
7
Q

What CSS property adds space between the content of a box and its border?

A

padding

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

What is a pseudo class?

A

A keyword added to a selector that specifies a specific state of the selected element(s).

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

What are CSS pseudo classes useful for?

A

They allow developers to style elements when the user is interacting with the elements differently than when the user is not interacting with them.

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

What is a fall back value?

A

With font-family we use a fall back value along with the value in case the browser doesn’t have the first value available.

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

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

A

px

em

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 the 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 the flex container?

A

nowrap

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

Div elements are block-level elements

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

Normal flow

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

This moves an html element from its normal flow position and shifts it up/down/left/right.

However, it doesn’t affect elements surrounding it in the flow of the document

19
Q

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

A

It shifts the element without disrupting the surrounding elements. So it moves it within its parent container essentially.

20
Q

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

A

It does not affect the normal flow of the document as elements essentially act as though the element is not there.

21
Q

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

A

It allows an element to be positioned in relation to its containing element rather than the other elements within the container.

22
Q

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

A

set the element you want your element inside of to position: relative or absolute and not static

23
Q

What are the four box offset properties?

A

top
bottom
right
left

24
Q

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

A

The further down in your style sheet the stronger the styling is considered

25
Q

How is it possible for the styles of an element to be applied to its children without additional css rule set?

A

Through inheritance as long as there isn’t more specific styling on the child elements

26
Q

List 3 selector types in order of increasing specificity:

A 
type
class
id
27
Q

Why is using !important bad practice?

A

It can make debugging a problem as it gives it supreme importance in the style sheet

28
Q

What are the 4 components of “the cascade”?

A

Source order
Inheritance
Specificity
!important

29
Q

What does the transform property do?

A

It lets you change the shape and orientation of an element

30
Q

Give four examples of CSS transform functions:

A 
rotate
translate
skew
scale
perspective
31
Q

.pokeball-wrapper:first-child > img.pokeball { }

read this

A

we have a new css rule set
with selector image elements with class pokeball
that are the direct child of
elements with class pokeball wrapper and the
pseudo-class first-child

32
Q

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

A 
color 
hover
pointer
width
orientation
min-width
max-width
33
Q

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

A

meta name=”VIEWPORT” content=”width=device-width, initial-scale=1”

34
Q

Read

@media only screen and (min-width: 768px) {

A

there is a media rule set for only media type screen with a media feature, min-width, that has a value of 768px
and an opening curly brace for the media rule set

35
Q

The “transition” property is shorthand for which four CSS properties?

A

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

36
Q

What is a breakpoint in responsive web design?

A

A point when certain media styles will begin to influence the web page. Most often associated with different viewport widths.

layout styles usually shift at these breakpoints

37
Q

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

A

the width of our content is more easily able to adapt to changes in viewport width

38
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?

A

due to source order
use smaller to larger changes in width as the you write code further down the page
use min-width over max-width

39
Q

What is JSON?

A

JSON is a text-based data interchange format following javascript object syntax

useful when you want to transmit data across a network and save them to a hard-drive

It needs to be converted to a native JS object when you want to access the data.

40
Q

What is serialization?

A

is the process of turning an object in memory into a stream of bytes so you can do stuff like store it on disk or send it over the network

Serialization means transforming something (e.g. my dog Rex) into a series of 1s and 0s - which can be transported over the phone line, stored in memory. My friends overseas can then translate those 1s and 0s back into a perfect representation of a puppy (de-serialization) so they can enjoy Rex’s company.

41
Q

What is deserialization?

A

Deserialization is the reverse process: turning a stream of bytes into an object in memory.

42
Q

How do you serialize a data structure into a JSON string using JS?

A

JSON.stringify

43
Q

How do you deserialize a data structure into a JSON string using JS?

A

JSON.parse

44
Q

A byte is:

A

a series of eight 0’s and 1’s

8 bits in a byte

Web Development (12 decks)

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