Brainscape's Knowledge GenomeTM

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


See full index

Web Dev > CSS > Flashcards

CSS Flashcards

1
Q

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

A

Color names
Hex codes
RGB values

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

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

A

selector { declaration property name: declaration property value; }

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

How are key/value pairs related to CSS?

A

key/value = name/value

In CSS: property name / property value

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

Readability
Installed fonts
Sticking with theme

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

Fallback fonts in case the selected font is not installed on user’s computer

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

Read the code.

background-color : rgb (0, 0, 0)

A

There is a property of background color with the value of rgb css function and three parameters of 0, 0 0

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

What CSS properties make up the box model?

A

Margin
Border
Padding
Content

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

What CSS property pushes boxes away from each other?

A

Margin property

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

What CSS property pushes box content away from its border?

A

Padding property

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

What purpose does the CSS Cascade serve?

A

Determines what styling will be applied to an element

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

What is source order?

A

The order CSS rules are written in a stylesheet

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

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

A

Mobile responsiveness

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

What is inheritance?

A

For certain properties, when applied to a parent element will also get taken on by any child elements
*usually font or text related

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

Why might CSS include inheritance?

A

Save developers time & keep code DRY

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

What is the purpose of !important?

A

Highest level of importance for CSS rule

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

When is !important a good tool to use?

A

Almost never

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

What is specificity?

A

The weight or importance placed on different types of selectors

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

How is specificity calculated?

A

Numerical:
0.0.0
(tag selector, class selector, id selector)

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

Why might CSS include specificity?

A

Gives a tool to add more specificity if needed

To override specificity of an element

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?

A

Tag selectors
Class selectors
ID selectors

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

What is CSS Cascade?

A

How CSS determines in what order to apply styling to elements, depending on source order and specificity

22
Q

What are CSS pseudo-classes good for?

A

Can apply styles to an element in a changed state (like hover) without affecting the DOM

23
Q

What does the transform property do?

A

Manipulates an element

24
Q

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

A

:first-child - applies styling to the first element of the specified element type

:last-child - applies styling to the last element of the specified element type

25
Q

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

A
  1. Changing button colors fluidly
  2. Resizing images to make an emphasis
  3. Hiding an element slowly
    movement, scale, rotate - small movements
26
Q

Why might transitions be a helpful effect for styling?

A

More visually appealing for the user, more fluid, UI feel more comfortable for users

27
Q

Are all properties able to be transitioned?

A

No, only ones that are animatable

*usually ones that have px rem em

28
Q

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

A

Width - parent container (all available area)
Height - content (auto)
starts on new line

29
Q

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

A

Height - auto

Width - auto

30
Q

What is the initial display property of “div”?

A

Block

31
Q

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

A

display: none - removes element from flow of document
visibility: hidden - does not affect the flow of webpage

32
Q

What is the difference between block, inline block, inline?

A

Block - takes all the space
Inline - takes only as much space as needed
Inline block - still can adjust size but only takes as much space needed

33
Q

Why are CSS resets helpful for cross browser compatibility?

A

Helps to create consistency among default styling across browsers and lets you start off with the same blank slate instead of trying to fight the browser styling
* Leaving very little up to browser stylesheet

34
Q

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

A

Sometimes you could reset something you don’t mean to or harm the page

35
Q

What is an argument against using CSS resets?

A

It slows down the load times of webpage

Might end up resetting that value again anyway

36
Q

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

A

Position: static;

37
Q

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

A

Element appears relative to where it was originally

Original space remains there, does not affect document flow

38
Q

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

A

Element appears relative to it’s parent container/element (whose position isn’t static)
Taken out of the document flow

39
Q

What are the box offset properties?

A 
Top
Right
Bottom
Left
* affect the positioning of the element when not static
40
Q

What were floats originally designed for?

A

Originally designed to allow developers to float text around image element like in print

41
Q

What are clears for with floats?

A

No other element within the same parent container can touch the left or right (or both) sides

42
Q

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

A

flex-direction: row;

43
Q

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

A

flex-wrap: no-wrap;

44
Q

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

A

Mostly good for one dimensional layouts (single row or column)
Needs to have set sizing

45
Q

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

A

To maintain proper sizing & spacing

Working on a team because allows you better understand code

46
Q

What are the three core parts of a grid system?

A

Container
Row
Column

47
Q

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

A

More flexible/responsive - px would require more work to change
Evenly spaced across container

48
Q

What is a modal?

A

CSS display property value that allows you to overlay an element over a parent element or website
** Pop up window in the viewport that we are in control of

49
Q

What are some use cases for modals?

A 
Error alert
Warning before proceeding
Ad
Verification, login 
When a news site wants you to subscribe before you can read their news article or turn off adblocker
50
Q

Why does a modal usually need to occupy the entire height and width of the viewport?

A

To prevent the user from interacting with the site before you want them to

51
Q

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

A

Color, width, height

52
Q

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

A

< meta name=”viewport” content=”width=device-width, initial-scale=1” >

Web Dev (18 decks)

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