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
What are the six primary HTML elements for creating tables?
""
26
What purpose do the thead and tbody elements serve?
The thead element defines a set of rows for the heading of the table, the tbody element contains the body of the table
27
Give two examples of data that would lend itself well to being displayed in a table.
Time tables, ticket sales data
28
What are the names of the individual pieces of a CSS rule?
Selector and declaration which include a property and a value
29
In CSS, how do you select elements by their class attribute?
Using .class
30
In CSS, how do you select elements by their tag name?
Using the tag name
31
In CSS, how do you select an element by its id attribute?
Using #id
32
Name three different types of values you can use to specify colors in CSS.
RGB values, hex codes, color names
33
What CSS properties make up the box model?
Padding, border, margin
34
Which CSS property pushes boxes away from each other?
Margin
35
Which CSS property adds space between a box's content and its border?
Padding
36
What is a pseudo-class?
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
What are CSS pseudo-classes useful for?
They are useful for improving UI/UX on your site.
38
Name two types of units that can be used to adjust font-size in CSS.
Pixels and percentages
39
What CSS property controls the font used for the text inside an element?
font-family
40
What is the default flex-direction of a flex container?
row
41
What is the default flex-wrap of a flex container?
Nowrap
42
Why do two div elements "vertically stack" on one another by default?
Because they are block elements
43
What is the default flex-direction of an element with display: flex?
row
44
What are the three primary components of a page layout? (Which helper classes do you need?)
Container, row, column
45
What is the minimum number of columns that you should put in a row?
1
46
What is the purpose of a container?
To contain elements on the page and keep things organized
47
What is the default value for the position property of HTML elements?
Static
48
How does setting position: relative on an element affect document flow?
It does not affect the document flow unless you use offsest
49
How does setting position: relative on an element affect where it appears on the page?
It does not affect where the element appears on the page, unless you use offsets
50
How does setting position: absolute on an element affect document flow?
The element is taken out of normal flow and no longer affects the other elements on the page
51
How does setting position: absolute on an element affect where it appears on the page?
It may or may not move depending on its containing element
52
How do you constrain an absolutely positioned element to a containing block?
Setting the containing block to a non static position value
53
What are the four box offset properties?
Top, bottom, left, and right.