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

Nested inside of the <html> element

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

The doctype declaration tells the browser which version of html the page is 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

H1-h6, p, img, body, div

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

Attributes provide additional information about the contents of an element

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

” & a m p ; “

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

Block elements will always appear to start on a new line and take all of the horizontal space.

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

Inline elements appear to continue on the same line as their neighboring 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

A block level element takes up the width of its parent element and the height equal to the vertical space 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 height and width of an inline element are exactly the height and width 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

An ordered list displays list items in numbers whereas an unordered list displays list items in 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 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

<a> anchor element with an href attribute</a>

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

What is an absolute URL?

A

A URL that links to an external website, containing the full path ex: “https://google.com/”

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

What is a relative URL?

A

A URL that links to a different page of the same website, using a shorthand path ex: “index.html”

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

../index.html

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

music/listings.html

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

../../index.html

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

index.html

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

It allows a site to collect user input information

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, select, button, text area, fieldset

23
Q

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

A

Email, checkbox, radio

24
Q

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

A

It is an inline element

25
Q

What are the six primary HTML elements for creating tables?

A

“<table> <tr> <td> <th> <thead> <tbody>”

26
Q

What purpose do the thead and tbody elements serve?

A

The thead element defines a set of rows for the heading of the table, the tbody element contains the body of the table

27
Q

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

A

Time tables, ticket sales data

28
Q

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

A

Selector and declaration which include a property and a value

29
Q

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

A

Using .class

30
Q

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

A

Using the tag name

31
Q

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

A

Using #id

32
Q

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

A

RGB values, hex codes, color names

33
Q

What CSS properties make up the box model?

A

Padding, border, margin

34
Q

Which CSS property pushes boxes away from each other?

A

Margin

35
Q

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

A

Padding

36
Q

What is a pseudo-class?

A

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). Allows us to give added functionality to the selector.

37
Q

What are CSS pseudo-classes useful for?

A

They are useful for improving UI/UX on your site.

38
Q

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

A

Pixels and percentages

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

Nowrap

42
Q

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

A

Because they are block elements

43
Q

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

A

row

44
Q

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

A

Container, row, column

45
Q

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

A

1

46
Q

What is the purpose of a container?

A

To contain elements on the page and keep things organized

47
Q

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

A

Static

48
Q

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

A

It does not affect the document flow unless you use offsest

49
Q

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

A

It does not affect where the element appears on the page, unless you use offsets

50
Q

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

A

The element is taken out of normal flow and no longer affects the other elements on the page

51
Q

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

A

It may or may not move depending on its containing element

52
Q

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

A

Setting the containing block to a non static position value

53
Q

What are the four box offset properties?

A

Top, bottom, left, and right.