HTML & CSS Flashcards

1
Q

Where do you put non-visible content about the HTML document?

A

head element

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

Where do you put visible content about the HTML document?

A

body element

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

Where do the <head> and <body> tags go in a valid HTML document?

A

<html> element
</html>

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

What is the purpose of a <!DOCTYPE> declaration?

A

To specific version of HTML used

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

Give five examples of HTML element types.

A

html, head, body, title, h1

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

What is the purpose of HTML attributes?

A

to give more detail/description for elements

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

Give an example of an HTML entity (escape character).

A

© for copyright symbol

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

How do block-level elements affect the document flow?

A

start on new line and next element start on new line

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

How do inline elements affect the document flow?

A

can appear on the same line next to another inline elements

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

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

A

width = 100% of container
height = auto

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

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

A

width = auto (content)
height = auto

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

What is the difference between an ordered list and an unordered list in HTML?

A

by default one is number and one is bulleted

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

Is an HTML list a block element or an inline element?

A

block element

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

What HTML tag is used to link to another website?

A

anchor element <a></a>

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

What is an absolute URL?

A

link to external sources

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

What is a relative URL?

A

link to internal sources (jump between internal files or divider)

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

How do you indicate the relative link to a parent directory?

A

../ (forward slash)

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

How do you indicate the relative link to a child directory?

A

directory/file

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

How do you indicate the relative link to a grand parent directory?

A

../../

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

How do you indicate the relative link to the same directory?

A

./ or pointing to file

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

What is the purpose of an HTML form element?

A

to group form elements together (boundary)

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

Give five examples of form control elements.

A

<form>, <input></input>, <select>/<option>, <textarea>, <button>
</button></textarea></option></select></form>

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

Give three examples of type attribute values for HTML <input></input> elements.

A

text, radio, checkbox, submit, password

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

Is an HTML <input></input> element a block element or an inline element?

A

inline element

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

What are the six primary HTML elements for creating tables?

A

<table>, <tr>, <thead>, <tbody>, <tfoot>, <th>, <td>
</td></th></tfoot></tbody></thead></tr></table>

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

What purpose do the thead and tbody elements serve?

A

define set of rows into either head or body

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

Give two examples of data that would lend itself well to being displayed in a table.

A

sport statistic & stocks info

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

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

A

selector, declaration block, declaration, property, value, rule-set

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

In CSS, how do you select elements by their class attribute?

A

using . (dot/period)

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

In CSS, how do you select elements by their tag name?

A

using tag name

31
Q

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

A

using #

32
Q

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

A

rgb, hex#, hsl

33
Q

What CSS properties make up the box model?

A

content (width x height), padding, border, margin

34
Q

Which CSS property pushes boxes away from each other?

A

margin

35
Q

Which CSS property add space between a box’s content and its border?

A

padding

36
Q

What is a pseudo-class?

A

keyword of special state for selector

37
Q

What are CSS pseudo-classes useful for?

A

can pick up very specific element or state that can be interact with the users

38
Q

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

A

rem, px, %, em

39
Q

What CSS property controls the font used for the text inside an element?

A

font-family

40
Q

CSS property with 4 sides value, which side does the first, second, third and forth value represent

A

top, right, bottom, left (clockwise)

41
Q

CSS property with multiple value is called?

A

shorthand property

42
Q

CSS font-family require back up value called?

A

fallback value

43
Q

text-align property can be applied to inline block, block or inline element?

A

inline block & block elements

44
Q

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

A

row (left-right)

45
Q

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

A

no-wrap

46
Q

what does flex-flow combined?

A

flex-direction & flex-wrap

47
Q

Why do two div elements “vertically stack” on one another by default?

A

because div is a block element

48
Q

What is the default flex-direction of an element with display: flex?

A

row

49
Q

What are the three primary components of a page layout? (Which helper classes do you need?)

A

container, row, column

50
Q

What is the minimum number of columns that you should put in a row?

A

1

51
Q

What is the purpose of a container?

A

to confine a space (specify width) where the flex-items (row & column) are placed into

52
Q

in layout classes, what is the purpose of class=row

A

to give a section out of container in a vertical direction

53
Q

in layout classes, what is the purpose of class=column

A

to give a section out of row in a horizontal direction

54
Q

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

A

position: static

55
Q

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

A

it doesn’t

56
Q

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

A

it will appear in relative to it’s original/true position

57
Q

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

A

remove from document flow entirely, doesn’t affect other elements at all

58
Q

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

A

it will go within the nearest ancestor element with position non-static, if there’s no non-static element, then it will base of the viewport

59
Q

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

A

set it within a parent element with relative position (or other non-static positions) defined

60
Q

What are the four box offset properties?

A

top, bottom, left, right

61
Q

what does fixed position property do to block element?

A

striped it of block properties

62
Q

What are the four components of “the Cascade”.

A

Inheritance, specificity, important, source order

63
Q

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

A

the vertical order within the code file, the rule beneath another rule will govern

64
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 properties can be passed down without additional CSS rule on the children

65
Q

List the three selector types in order of increasing specificity.

A

universal <- element <- class <- ID <- inline style <- !important

66
Q

Why is using !important considered bad practice?

A

can’t be overridden (top of chain)

67
Q

What does the transform property do?

A

let you rotate, scale, skew or translate by modify the coordinate space of the css

68
Q

Give four examples of CSS transform functions.

A

translate, rotate, scale, skew

69
Q

The transition property is shorthand for which four CSS properties?

A

property_name, duration, timing-function, delay

70
Q

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

A

min-width, max-width

71
Q

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

A

viewport meta tag

72
Q

What is a breakpoint in responsive Web design?

A

area where styling would change to new set

73
Q

What is the advantage of using a percentage (e.g. 50%) width instead of a fixed (e.g. px) width for a “column” class in a responsive layout?

A

would not require more breakpoints during small transition

74
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 (Cascade SS)