HTML & CSS Flashcards

1
Q

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

A

head tag

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 tag

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

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

A

html tag

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

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

A

To let the browser know which version of HTML we’re using

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

Give five examples of HTML element tags.

A

a, p, div, body, img

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

provides the element with additional information

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

& amp; (without the space)

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

takes up the entire width and moves to a 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

doesn’t affect document flow. span elements will stay on the same line

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 is 100% of the available space and height is 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 and height are both 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

ordered - structured and numbered

unordered - no structure and no numbers. bullet points

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

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

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

url to external page

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

What is a relative URL?

A

url to something on the same page

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

../

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

name of the child folder, followed by a forward slash, then the file name

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

just use the file name

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 receive input from a user and make a webpage interactive. also the form element itself hold and contains all the form control elements

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

input, textarea, select, option, button

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

Give three examples of type attributes for HTML «a>input</a>> elements.

A

radio, checkbox, submit

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

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

A

inline

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, td, thead, tbody, tfoot

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

thead - the heading for the tables

tbody - the main content and meat of the table

27
Q

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

A

sports graphs, anything that should be in an excel document

28
Q

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

A

declaration block, selectors, property, and value

29
Q

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

A

with a .

30
Q

In CSS, how do you select elements by their type?

A

just write out the element

31
Q

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

A

with a #

32
Q

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

A

hex codes, RGB values, and a color name

33
Q

What CSS properties make up the box model?

A

margin, padding, border

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

classes that are applied based on a certain state

37
Q

What are CSS pseudo-classes useful for?

A

It can be combined with a CSS selector to add an effect to existing elements based on their states

38
Q

Name at least two units of type size in CSS.

A

pixel and em

39
Q

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

A

font-family

40
Q

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

A

row

41
Q

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

A

no wrap

42
Q

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

A

divs are by default block elements

43
Q

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

A

row

44
Q

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

A

static

45
Q

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

A

no document flow

46
Q

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

A

does not change document flow

47
Q

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

A

completely takes it out of document flow

48
Q

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

A

within the nearest non-static element

49
Q

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

A

set it to something other than static

50
Q

What are the four box offset properties?

A

top, right, bottom, left

51
Q

What are the four components of “the Cascade”?

A

source order, specificity, inheritance, and !important (important rule)

52
Q

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

A

styling that is lower in the style sheet takes precedence over what’s higher in the style sheet

53
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

condition where child elements can use styling elements from parents elements

54
Q

List the three selector types in order of increasing specificity.

A

type < class < ID

55
Q

Why is using !important considered bad practice?

A

!important always wins

56
Q

What does the transform property do?

A

rotate, skew, scale, etc on the coordinate space

57
Q

Give four examples of CSS transform functions.

A

rotate, translate, scale, skew

58
Q

The transition property is shorthand for which four CSS properties?

A

transition-property, transition-duration, transition-timing-function, and transition-delay.

59
Q

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

A

min-width & max-width

60
Q

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

A

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

61
Q

What is a breakpoint in responsive Web design?

A

point where our styling would break

62
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

with percentages the layout adapts to the exact dimensions of the viewport’s width.

63
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

bottom one wins due to source order.