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

selector {
declaration block
}

within declaration block
properties: 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

.name of class

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

name of type aka element

ex: h1, div

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

name of id

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

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

A
  • hex code
  • rgb ()
  • rgba ()
  • hsl
  • hsla
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
  • margin
  • border
  • padding
  • content (width & height)
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 CSS class that is applied by a browser! It can be added to the selector to apply pre-set behaviors/state to the selected elements. But the developer cannot make it take affect, only the browser can when it’s conditionss are met.
ex) :hover
:visited
:nth-child()

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

It lets us apply style to an element in relation to the user’s activity!
It also help cut down the amount of code.
ex) :hover
:visited

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

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

A

rem
px
em* (grows exponentially if inside a layer)

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

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

It doesn’t.

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

It will appear relative to itself in its static state, with the specified values of top, right, bottom, left

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

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

A

The element is removed from the normal document flow, and the other elements inside will shift.

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

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

A

It will appear relative to the closest non-static ancestor with the specified values of top, right, bottom, and left. (if none, it will be relative to the initial containing block)
Usually by default top left corner, but it does NOT matter since we always manipulate it by using box offset properties!

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

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

A

By making the containing block non-static.

  • since least intrusive one is relative, we usually use RELATIVE
  • OR making all other elements static?
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

What are the four box offset properties?

A

top, bottom, left, right

  • acts like padding in PUSHING away the element from the specified box offset property
  • use small measurements to keep the element close to the edge of desired position (for changing viewport!)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

What are the 4 components of “the Cascade”

A

source order
inheritance
specificity
importance

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

List 3 selector types in order of increasing specificity

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

Why is using the !important rule considered bad practice?

A

It overrides EVERYTHING!
There is no other way to override it without using another !important.
*in other words, it is a non-verbal way to communicate that this is vital and SHOULD stay this way

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

:first-child

A

pseudo-class that represents the first element among a group of sibling elements

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

transform property and 4 functions

A

elements are rendered in a coordinate plane, this lets us adjust where the element falls within the coordinate plane. Shifting its origin point

-scale()
-translate()
-rotate()
-skew()
-matrix()
*allows movement without affecting size on 3 coordinate planes X, Y, Z
*acts within the same stacking context as positioning elements
meaning it can become a container for an position: fixed/absolute
ex) margin for button with pseudo-class behavior
vs. transform: translateY(0.25rem) for button with pseudo-class behavior

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

What is a breakpoint in responsive Web design?

A

point in the viewport size where the layout would change

30
Q

What is the advantage of using % width instead of fixed px for responsive layout?

A

makes it flexible due to creating enough wiggle room reduces need to write more code

31
Q

what are the 4 components of “the Cascade”?

A
  1. Source Order
  2. Inheritance
  3. Specificity
  4. !important
32
Q

serif vs sans serifs

A

serif has fancy curl at the end

sans serif is modern and clean

33
Q

properties with multiple values WITH comma vs. WITHOUT comma

A

without comma = short-hand property
ex) padding, border, margin
with comma = fallback value
ex) font-family

34
Q

child selector

A

matches an element that is a direct child of another
ex) li > a {
property: value;
}
*targets all a elements that are children of an li element

35
Q

descendant selector

A

matches an element that is a descendent of another specified element (not just a direct child of that element)
ex) p a {
property: value;
}
*targets any a elements that sit inside p element, even if there are other elements nested between them

36
Q

adjacent sibling selector

A

matches an element that is the next sibling of another
ex) h1 + p {
property: value;
}
*targets the FIRST p element AFTER (not nested) any h1 element (but not other p elements)

37
Q

rem vs em

A

em = based off of parent font-size
*font-size can exponentially grow
rem = based off of root default font-size
ex) changing html’s font-size will automatically adjust all the fonts with rem values!
html {
font-size: 40px;
}

div {
font-size: 2rem; ==> is now 80px;
}

38
Q

general sibling selector

A

matches an element that is a sibling of another, although it does not have to be the directly preceding element
ex) h1 ~ p {
property: value;
}
*if you had two p elements that are siblings of h1 element, this rule would apply to both

39
Q

box-sizing: content-box VS. border-box

A

content-box does NOT include width and height of padding, border, or margin, which causes the overall width and height of the box to change when we add them.
border-box includes content, padding, and border into width and height of the box by subtracting from content.

40
Q

special feature of monospace fonts

A

every letter is the same width

41
Q

form element is inline or block?

A

block

42
Q

When any block-level element is not width: 100% what happens to the rest of the space?

A

They are considered as margin

43
Q

What special feature does margin: auto have if the element is not 100% width?

A

centers the element!

44
Q

text-align can center elements, why?

A

sets the horizontal alignment of the inline-level content inside a block element
is very much like inline/horizontal align!
applies on child elements!
so make sure to place it on the parent element that HOLDS the element needed to center!

45
Q

What is vh and vw?

A

units that stand for viewport height and viewport width
1vh = 1%
*vw will almost never be used! Because it takes account of the scroll bar, which disappears and reappears = viewport size flickering!

46
Q

What happens to the image size if you don’t set a size?

A

It is brought in as its original size!

47
Q

semantic vs utility classes

A

semantic = tells what the element is
COULD potentially have a LOT of specific properties for ONE specific section/element
ex) .container/.hero-image
utility = tells the purpose of the class and MORE RESUSABLE!
ex) .row/.column/.white-text

48
Q

CSS flexbox row vs. column

what kind of properties should they have?

A 
row = vertical chunk
ONLY display: flex!
column = horizontal chunk within a row
ONLY flex-basis!
ALWAYS inside rows!
49
Q

border-style

A

shorthand property for border-top/bottom/right/left-style

50
Q

.container should only have which properties?

A

ONLY margin: auto and max-width!

51
Q

CSS layout classes are usually named according to UTILITY, why?

A

reusability! DO NOT add additional styling!! ex) padding, color

52
Q

flex-basis vs width

A

flex-basis = width for flexbox and ONLY works for elements directly inside flexbox
ex) columns are always inside a row, which will always have display: flex!
width = for elements in general
ex) images inside columns are not going to be affected by flex-basis, since columns are NOT a flexbox!

53
Q

flexboxes unique behaviors (2) for its children!

A

all their direct child elements become the size of its content
only allows flex context for all its DIRECT children

54
Q

Child element and Parent element, which one shows up on top?

A

Child!
Nesting = child shows up on top!
CSS is three dimensional

55
Q

Positioning, why so special?

A

Lets us manipulate the visual position of an element regardless of its position in code!

56
Q

fixed positioned element shows up where?

A

basically like an absolute positioned element with no ancestors that is non-static!
STUCK to VIEWPORT
ex) login, membership requirement, ads, etc.

57
Q

What happens if an absolute positioned element does NOT have any non-static ancestor?

A

It is placed relative to the viewport

58
Q

When do we use absolute positioning? USUALLY?

A

to create layers for elements that cannot have children elements! Usually to put an element on top of an image, since images cannot have child elements!

59
Q

absolute position box offset property trick to make something width and height 100%?

A

top, bottom, right, left = 0px;

60
Q

positioning and flexbox?

A

flexbox only perceives if position set to relative,
since most of other positions are considered GHOST no longer part of normal document flow (meaning all flexbox content properties do NOT apply)

61
Q

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

A

rule sets order of appearance top to bottom inside the stylesheet.css file (lower is stronger)

62
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

inheritance (it is not applicable to everything)

usually text/font related properties are inheritable

63
Q

any selector type > *

A

means ALL elements that is the direct child of the “any selector type”
NOTE: * (universal selector) has no specificity power! 0-0-0

64
Q

body element has a default margin of ____?

A

8px

65
Q

What happens to an element with the display: none?

A

The element is completely removed from document flow in CSS! Visually, it disappears, but programmatically, it still exists.

66
Q

The transition property is shorthand for which four CSS properties?

A

transition - property
“” - duration = starts when the condition is met, and takes that long to finish transitioning to the specified property
“” - timing-function = steps, ease(default), ease-in, ease-out
“” - delay = how long to wait before starting transition
*If I apply this to a class with a pseudo-class, it will only take affect when it is satisfying the pseudo-class condition
ex)
.custom-button {
background-color: blue;
transition: background-color 0.5s;
}
.custom-button:hover {
background-color: red;
}

67
Q

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

A
  • min-width
  • max-width
  • orientation
68
Q

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

A

viewport
width=device-width (created by Apple to make content width equal to device width instead of the old-fashioned way of loading content on bigger viewport (ghost) and then squish it down to the device width, which was bad)

69
Q

What is Mobile-First Design?

A

Approach in which web designers start product design for mobile devices first!

70
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!
- Media queries are always at the bottom of the stylesheet & in the same file as the original rule
- The min-width with the smaller one will still be true even at the larger one, therefore the media query rule with the smaller min-width lower in order will supersede the one on top! (example media rule sets are in the right order)
@media only screen and (min-width: 576px) {
.col-sm-half {
width: 50%;
}
}

@media only screen and (min-width: 769px) {
.col-lg-third {
width: calc(100% / 3);
}

Web Development (13 decks)

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