HTML & CSS Flashcards

1
Q

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

A

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

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

Within the html element starting with head and followed by body

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 let the browser know how to interpret the code and what version of HTML we are using

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, title, body, p, div, span, ul, ol, li

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 additional details to the element such as the style for the given element, assisting with screen reading, sources, etc

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

<, >, &, “, ‘, /, x

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

They designate an entire line for the element. By default, the width will match the width of the parent element and the height takes up the size of the content. Both width and height can be customized, if desired.

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

They minimize white space and only use the amount of space that is required

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

The entire width of its parent element and height of its contents

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

The width and height of its contents

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 lists will number each listed item. Unordered lists will have each listed item on a bullet point.

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 tag

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

What is an absolute URL?

A

The full pathway to a site on the internet

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

What is a relative URL?

A

The pathway to a site within the folder/directory the user is currently in, or in other words, the same domain.

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

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

File name only

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 collect information from users or to help them search

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

select, text, textarea, checkbox, submit, input, button

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

radio, text, textarea, checkbox, password, email, submit

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

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

Semantic elements used to separate different sections of the table

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

Train times, flight status, hotel bookings, etc.

28
Q

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

A

selector, property, values

29
Q

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

A

.class

30
Q

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

A

element name

31
Q

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

A

#id

32
Q

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

A

rgba, hexcode, color name, hsl, hue, brightness, saturation, opacity

33
Q

What types of CSS properties can you set colors on?

A

Background, border, color (which sets both text and border)

34
Q

What CSS properties make up the box model?

A

Border, margin, padding, content

35
Q

Which CSS property pushes boxes away from each other?

A

Margin

36
Q

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

A

Padding

37
Q

What is a pseudo-class?

A

A keyword added to a selector that specifies a special state of the selected element

38
Q

What are CSS pseudo-classes useful for?

A

Classes that allow you to change the appearance of elements when users interact with them

39
Q

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

A

px, rem, em, %

40
Q

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

A

Font-family

41
Q

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

A

Row

42
Q

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

A

No wrap/nowrap

43
Q

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

A

Div elements are block elements, which mean they will take up the entire width of the parent container

44
Q

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

A

Row, horizontal, x-axis

45
Q

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

A

Container, row, column

46
Q

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

A

One

47
Q

What is the purpose of a container?

A

To create a section of the page that you can control

48
Q

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

A

position: static

49
Q

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

A

The targeted element shifts in the specified direction. Other elements will remain where they would be with normal flow.

50
Q

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

A

Positions the element in relation to where it would have been with normal flow.

51
Q

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

A

The targeted element will be taken out of the document flow. Surrounding elements will act as though the absolute positioned element is not there.

52
Q

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

A

It will position the element to the top of the page or in relation to the nearest relative/non-static containing element.

53
Q

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

A

Set the containing block to position: relative

54
Q

What are the four box offset properties?

A

top, bottom, right, left

55
Q

What are the four components of “the Cascade”?

A

Source order, inheritance, specificity & !important

56
Q

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

A

The vertical order of which rulesets appear on the CSS file

57
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

58
Q

List the three selector types in order of increasing specificity.

A

Type, class, ID

59
Q

Why is using !important considered bad practice?

A

Creates likelihood for code being missed in updates, or extra manual steps to do so

60
Q

What does the transform property do?

A

Allows you to manipulate elements

61
Q

Give four examples of CSS transform functions.

A

Rotate, translate, scale, skew

62
Q

The transition property is shorthand for which four CSS properties?

A

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

63
Q

What is a breakpoint in responsive Web design?

A

A point at which the media query triggers

64
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

It will always be in relation to the current size or view

65
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 will make the bottom rule set the priority