Brainscape's Knowledge GenomeTM

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


See full index

Dev > HTML & CSS > Flashcards

HTML & CSS Flashcards

1
Q

make element fixed in CSS

A

«element» {
position: fixed;
top/right/bottom/left: «value»;
}

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

make element sticky in CSS

A

«element» {
position: sticky;
top/right/bottom/left: «value»;
}

» no overflow hidden/scroll/auto on ancestor elements

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

insert stylesheet into HTML

A

≤head≥
≤link rel=”stylesheet” href=”«path»”≥
≤/head≥

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

insert JavaScript into HTML

A

≤body≥
…
≤script src=”«path»”≥…≤/script≥
≤/body≥

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

set name of browser tab in HTML

A

≤head≥
≤title≥«tab name»≤/title≥
≤/head≥

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

set favicon in HTML

A

≤head≥
≤link rel=”icon” href=”«path»”≥
≤/head≥

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

setup HTML link to open up in new browser tab

A

≤a target=”_blank” href=”«path»”≥…≤/a≥

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

create text input in HTML

A

≤form≥
≤input type=”text”≥
≤/form≥

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

create required input element in HTML

A

≤form≥
≤input required≥
≤/form≥

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

provide placeholder text for input element in HTML

A

≤form≥
≤input placeholder=«placeholder text»≥
≤/form≥

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

normalize browser styles in CSS

A

*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: inherit;
}

html: {
font-size: 0.625%;
} // sets 1rem to 10px

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

set global font settings in CSS

A 
body {
  font-family: «font», «font fallback»;
  font-weight: «weight»;
  font-size: «size»;
  line-height: «line height»;
  color: «color»;
  box-sizing: border-box;
}
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

set background image in CSS

A

background-image: url(«relative path»);

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

fix cropping origin of background image in CSS

A

background-position: top;

» default: top left
» px, %, or top, right, bottom, left, center

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

stack background images in CSS

A

background-image: «image1», «image2», …;

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

set linear gradient in CSS

A 
linear-gradient(
  «direction»,
  «color1» «_pos1»,
  «color2» «_pos2»,
  ...
)

» direction: to «keyword»/«angle»deg
» direction default: to bottom

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

clip HTML element in CSS

A

clip-path: «shape»;

» shape: inset/polygon/circle/ellipse/?rectangle/url(«path to svg»)

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

define polygon in CSS

A

polygon(«x1» «y1», «x2» «y2», …)

» x axis: →
» y axis: ↓

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

set text case in CSS

A

text-transform: «case»;

» case: uppercase/lowercase/capitalize/full-width/inherit/none

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

move HTML element in x or y direction in CSS

A

transform: translate(«xpos», «ypos»);

» x axis: →
» y axis: ↓
» default references is element itself
» reference can be set with ‘transform-box’

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

use custom animation on element in CSS

A

«parent element» {
backface-visibility: hidden;
}

«element» {
animation: «custom animation name» «duration»s _…;
}

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

normalize anchor tag appearance in CSS

A 
«a»:link, «a»:visited {
  text-decoration: none;
  _display: inline-block;
  _color: «color»;
}
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

animate element transition to state in pseudo class in CSS

A

«element» {
…
transition: «target property/all» «duration»s;
}

«element»:«pseudo class» {
«target property»: «target value»;
}

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

set shadow in CSS

A

box-shadow: _«direction» «x» «y» «_blur» «__spread» «color»

» direction: ‘inset’ to invert

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

order and setup of animation property in CSS

A

animation: «name» «duration»s «delay»s «count» «function» «direction» «fill-mode» «state»

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

set animation direction in CSS

A

animation-direction: normal/reverse/alternate/alternate-reverse

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

set animation transition function in CSS

A

animation-timing-function: linear/ease_-in_-out/step_-start_-end/steps()/cubic-bezier()

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

set animation state in CSS

A

animation-play-state: paused/running

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

extend animation values beyond animation time in CSS

A

animation-fill-mode: forwards/backwards/both

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

how is a CSS rule priority evaluated?

A 
importance
       ⋁
specificity
       ⋁
source order
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
31
Q

how is the CSS importance priority evaluated?

A 
» user !important
» author !important
» author
» user
» browser default / user agent
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
32
Q

how is the CSS specificity priority evaluated?

A

inline styles
» # id selectors
» # class, pseudo-class, attribute selectors
» # element, pseudo-element selectors

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

define variable in SCSS

A

$«variable»: «value»;

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

nest pseudo class in SCSS

A 
«class» {
  ...
  ＆:«pseudo class» {
    ...
  }
}
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
35
Q

fix height rendering of container of floating elements in CSS

A 
«container»::after {
  content: '';
  clear: both;
  display: table;
}
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
36
Q

calculate darker color in SCSS

A

darken(«original color», «percentage»%)

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

calculate lighter color in SCSS

A

lighten(«original color», «percentage»%)

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

use mixin in SCSS

A

«element» {
…
@include «mixin name»
};

39
Q

define function in SCSS

A

@function «name»(«_args»){
…
@return «value»;
}

40
Q

inherit all rules from another selector in SCSS

like class

A

«element» {
…
@extend «selector»;
}

41
Q

naming convention for partial SCSS files

A

_«name».scss

42
Q

horizontally center block element in another block element in CSS

A

margin: 0 auto;

43
Q

use SCSS variable in calc() function

A

calc(… #{«variable»} …)

44
Q

select element by attribute in CSS

A

[«attr»«_operator»”«_value»” _i]

» operator:
  =   // equals
  |=   // equals or starts with 
  ~=   // equals one if divided by space
  ^=   // starts with
  $=   // ends with
  *=   // contains
» i: case insensitive
45
Q

setup text as a clipping mask in CSS

A

background_-image/-color: «background»;
background-clip: text;
color: transparent;
display: inline-block;

46
Q

zoom element in CSS

A

transform: scale(«value»);

47
Q

tilt element in CSS

A

transform: skew(«value»deg);

48
Q

center inline element in CSS

A

text-align: center;

49
Q

write → in HTML

A

＆rarr;

50
Q

set border with offset in CSS

A

outline: «width» «type» «color»;

outline-offset: «offset»;

51
Q

select direct child(ren) in CSS

A

«parent» > «child(ren)» {
…
}

52
Q

rotate element in CSS

A

transform: rotate(«value»deg);

53
Q

set z-distance for 3D effect in CSS

A

perspective: «value»;

» higher values are further away

54
Q

hide backside of animated element in CSS

A

backface-visibility: hidden;

55
Q

blend stacked background images in CSS

A

background-blend-mode: «mode»

» mode: normal/multiply/screen/overlay/darken/lighten/color-dodge/color-burn/hard-light/soft-light/difference/exclusion/hue/saturation/color/luminosity

56
Q

normalize ul elements in CSS

A

list-style: none;

57
Q

apply filter on element in CSS

A

filter: «type1» _…;

» type: blur()/brightness()/contrast()/drop-shadow()/grayscale()/hue-rotate()/invert()/opacity()/saturate()/sepia()

58
Q

setup background video in HTML

A

≤div class=”bg-video”≥
≤video class=”bg-video__content” autoplay muted loop≥
≤source src=”img/video.mp4” type=”video/mp4”≥
≤source src=”img/video.webm” type=”video/webm”≥
Your browser is not supported!
≤/video≥
≤/div≥

59
Q

setup background video in CSS

A 
«container» {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}
«content» {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
60
Q

setup background image fit in CSS

A

background-size: «option1», «_option2»;

» option1:
  » width
  » width height 
  » cover/contain/auto
» option2 is for second background image
61
Q

setup image or video fit in CSS

A

object-fit: «option»;

» option: contain/cover/fill/scale-down/none

62
Q

normalize input element in CSS

A 
«input» {
  font-family: inherit;
  color: inherit;
  border: none;
}

«input»:focus {
outline: none;
}

63
Q

select placeholder of input element in CSS

A

«input»::placeholder {
…
}

64
Q

select invalid input element in CSS

A

«input»:invalid {
…
}

65
Q

select following sibling in CSS

A

«element» + «following sibling» {
…
}

66
Q

select general sibling in CSS

A

«element» ~ «general sibling» {
…
}

67
Q

setup radio buttons in HTML

A

≤input type=”radio” name=”«field name»” id=”«option1»”≥

≤input type=”radio” name=”«field name»” id=”«option2»”≥

68
Q

setup label for input element in HTML

A

≤input id=”«name»”≥

≤label for=”«name»”≥«label text»≤/label≥

69
Q

write whitespace in HTML

A

＆nbsp;

70
Q

select checked input element in CSS

A

«input»:checked {
…
}

71
Q

write – in HTML

A

＆ndash;

72
Q

setup same height columns in element in CSS

A

«element» {
display: table;
}

«column1» {
  width: «width1»;
  display: table-cell;
  _vertical-align: «alignment»;
}
«column2» {
  width: «width2»;
  display: table-cell;
  _vertical-align: «alignment»;
}
73
Q

break paragraph into columns in CSS

A

«paragraph» {
column-count: «count»;
}

74
Q

set paragraph column gutter in CSS

A

«paragraph» {
column-count: «count»;
column-gap: «width»;
}

75
Q

setup auto hyphenation in paragraph element in CSS

A

«paragraph» {
hyphens: auto;
}

» ≤html lang=”«language»”≥ has to be set

76
Q

write × in HTML

A

＆times;

77
Q

setup anchor target in HTML

A

≤a href=”#«target id»”≥…≤/a≥

≤«target» id=”target id”≥…≤/«target»≥

78
Q

setup min-width media query in CSS

A

@media only screen and (min-width: «breakpoint»em) {
…
}

» use »em« for media queries
» only screen prevents query from applying in print

79
Q

use if and else logic in SCSS

A 
@if «check1» {
  ...
} _@else if «check2» {
  ...
} _@else {
  ...
}
80
Q

variable in SCSS

A

$«variable»

81
Q

media query operators in CSS

A

not/only/and

» only: prevents older browsers not supporting media queries with media features to apply the style

82
Q

setup responsive image resolution switching in HTML

A

≤img srcset=”
«path1» «factor1»x,
«path2» «factor2»x
“ src=«default path» alt=«fallback text» … ≥

83
Q

provide different images for different media queries in HTML (art direction)

A

≤picture≥
≤source «_srcset1» «src1» media=«query1»/”(«check1»)”≥
≤_source «_srcset2» «src2» media=«query2»/”(«check2»)”≥
≤img … ≥
≤/picture≥

84
Q

setup responsive image density switching in HTML

A 
≤img srcset="
    «path1» «width1»w,
    «path2» «width2»w
" sizes="
    («check1») «value1»vw,
    («check2») «value2»vw,
    «default value»px
" src="«default path»" alt="«fallback text»"≥
85
Q

setup responsive background image in CSS

A

«element» {
background-image: «small image»

@media only screen and (min-width: «width1»),
(min-resolution: 192dpi) and (min-width: «width2»), {
background-image: «big image»
}
}

86
Q

setup CSS rule only for supporting browsers (graceful degradation)

A

@supports («rule1») _or («rule2») {
…
}

87
Q

apply filter to background of element in CSS

A

backdrop-filter: «filter»;

88
Q

style text selection in CSS

A

::selection {
background-color: «color1»;
color: «color2»;
}

89
Q

setup responsive design in HTML

A

≤meta name=”viewport” content=”width=device-width, initial-scale=1.0” /≥

90
Q

detect mobile device in media query

A

@media only screen and (hover: none) {
…
}

» non mobile devices: »hover: hover«

91
Q

define mixin in SCSS

A

@mixin «name»_(«args») {
…«rules»
}

92
Q

define custom animation in CSS

A 
@keyframes «custom animation name» {
  0% { «start properties» }
  «_val»% { «intermediate properties» }
  100% { «end properties» }
}
93
Q

define abstract selector in SCSS

like abstract class

A

%«abstract selector» {
…«rules»
}

94
Q

import other file in SCSS

A

@import “«path»/«name».scss”;

Dev (10 decks)

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