Brainscape's Knowledge GenomeTM


Top Flashcards (Certified)
All Flashcards

Dev > HTML & CSS > Flashcards

HTML & CSS Flashcards

(94 cards)

Start Studying
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
order and setup of animation property in CSS
animation: «name» «duration»s «delay»s «count» «function» «direction» «fill-mode» «state»
26
set animation direction in CSS
animation-direction: normal/reverse/alternate/alternate-reverse
27
set animation transition function in CSS
animation-timing-function: linear/ease_-in_-out/step_-start_-end/steps()/cubic-bezier()
28
set animation state in CSS
animation-play-state: paused/running
29
extend animation values beyond animation time in CSS
animation-fill-mode: forwards/backwards/both
30
how is a CSS rule priority evaluated?
``` importance ⋁ specificity ⋁ source order ```
31
how is the CSS importance priority evaluated?
``` » user !important » author !important » author » user » browser default / user agent ```
32
how is the CSS specificity priority evaluated?
inline styles » # id selectors » # class, pseudo-class, attribute selectors » # element, pseudo-element selectors
33
define variable in SCSS
$«variable»: «value»;
34
nest pseudo class in SCSS
``` «class» { ... ＆:«pseudo class» { ... } } ```
35
fix height rendering of container of floating elements in CSS
``` «container»::after { content: ''; clear: both; display: table; } ```
36
calculate darker color in SCSS
darken(«original color», «percentage»%)
37
calculate lighter color in SCSS
lighten(«original color», «percentage»%)
38
use mixin in SCSS
«element» { ... @include «mixin name» };
39
define function in SCSS
@function «name»(«_args»){ ... @return «value»; }
40
inherit all rules from another selector in SCSS | like class
«element» { ... @extend «selector»; }
41
naming convention for partial SCSS files
_«name».scss
42
horizontally center block element in another block element in CSS
margin: 0 auto;
43
use SCSS variable in calc() function
calc(... #{«variable»} ...)
44
select element by attribute in CSS
[«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
setup text as a clipping mask in CSS
background_-image/-color: «background»; background-clip: text; color: transparent; display: inline-block;
46
zoom element in CSS
transform: scale(«value»);
47
tilt element in CSS
transform: skew(«value»deg);
48
center inline element in CSS
text-align: center;
49
write → in HTML
＆rarr;
50
set border with offset in CSS
outline: «width» «type» «color»; | outline-offset: «offset»;
51
select direct child(ren) in CSS
«parent» > «child(ren)» { ... }
52
rotate element in CSS
transform: rotate(«value»deg);
53
set z-distance for 3D effect in CSS
perspective: «value»; » higher values are further away
54
hide backside of animated element in CSS
backface-visibility: hidden;
55
blend stacked background images in CSS
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
normalize ul elements in CSS
list-style: none;
57
apply filter on element in CSS
filter: «type 1» _...; » type: blur()/brightness()/contrast()/drop-shadow()/grayscale()/hue-rotate()/invert()/opacity()/saturate()/sepia()
58
setup background video in HTML
≤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
setup background video in CSS
``` «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
setup background image fit in CSS
background-size: «option 1», «_option 2»; ``` » option 1: » width » width height » cover/contain/auto » option 2 is for second background image ```
61
setup image or video fit in CSS
object-fit: «option»; » option: contain/cover/fill/scale-down/none
62
normalize input element in CSS
``` «input» { font-family: inherit; color: inherit; border: none; } ``` «input»:focus { outline: none; }
63
select placeholder of input element in CSS
«input»::placeholder { ... }
64
select invalid input element in CSS
«input»:invalid { ... }
65
select following sibling in CSS
«element» + «following sibling» { ... }
66
select general sibling in CSS
«element» ~ «general sibling» { ... }
67
setup radio buttons in HTML
≤input type="radio" name="«field name»" id="«option 1»"≥ | ≤input type="radio" name="«field name»" id="«option 2»"≥
68
setup label for input element in HTML
≤input id="«name»"≥ | ≤label for="«name»"≥«label text»≤/label≥
69
write whitespace in HTML
＆nbsp;
70
select checked input element in CSS
«input»:checked { ... }
71
write – in HTML
＆ndash;
72
setup same height columns in element in CSS
«element» { display: table; } ``` «column 1» { width: «width 1»; display: table-cell; _vertical-align: «alignment»; } ``` ``` «column 2» { width: «width 2»; display: table-cell; _vertical-align: «alignment»; } ```
73
break paragraph into columns in CSS
«paragraph» { column-count: «count»; }
74
set paragraph column gutter in CSS
«paragraph» { column-count: «count»; column-gap: «width»; }
75
setup auto hyphenation in paragraph element in CSS
«paragraph» { hyphens: auto; } » ≤html lang="«language»"≥ has to be set
76
write × in HTML
＆times;
77
setup anchor target in HTML
≤a href="#«target id»"≥...≤/a≥ ≤«target» id="target id"≥...≤/«target»≥
78
setup min-width media query in CSS
@media only screen and (min-width: «breakpoint»em) { ... } » use »em« for media queries » only screen prevents query from applying in print
79
use if and else logic in SCSS
``` @if «check 1» { ... } _@else if «check 2» { ... } _@else { ... } ```
80
variable in SCSS
$«variable»
81
media query operators in CSS
not/only/and » only: prevents older browsers not supporting media queries with media features to apply the style
82
setup responsive image resolution switching in HTML
≤img srcset=" «path 1» «factor 1»x, «path 2» «factor 2»x " src=«default path» alt=«fallback text» ... ≥
83
provide different images for different media queries in HTML (art direction)
≤picture≥ ≤source «_srcset 1» «src 1» media=«query 1»/"(«check 1»)"≥ ≤_source «_srcset 2» «src 2» media=«query 2»/"(«check 2»)"≥ ≤img ... ≥ ≤/picture≥
84
setup responsive image density switching in HTML
``` ≤img srcset=" «path 1» «width 1»w, «path 2» «width 2»w " sizes=" («check 1») «value 1»vw, («check 2») «value 2»vw, «default value»px " src="«default path»" alt="«fallback text»"≥ ```
85
setup responsive background image in CSS
«element» { background-image: «small image» @media only screen and (min-width: «width 1»), (min-resolution: 192dpi) and (min-width: «width 2»), { background-image: «big image» } }
86
setup CSS rule only for supporting browsers (graceful degradation)
@supports («rule 1») _or («rule 2») { ... }
87
apply filter to background of element in CSS
backdrop-filter: «filter»;
88
style text selection in CSS
::selection { background-color: «color 1»; color: «color 2»; }
89
setup responsive design in HTML
≤meta name="viewport" content="width=device-width, initial-scale=1.0" /≥
90
detect mobile device in media query
@media only screen and (hover: none) { ... } » non mobile devices: »hover: hover«
91
define mixin in SCSS
@mixin «name»_(«args») { ...«rules» }
92
define custom animation in CSS
``` @keyframes «custom animation name» { 0% { «start properties» } «_val»% { «intermediate properties» } 100% { «end properties» } } ```
93
define abstract selector in SCSS | like abstract class
%«abstract selector» { ...«rules» }
94
import other file in SCSS
@import "«path»/«name».scss";

Dev (10 decks)

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