Module 1 HTML & CSS Flashcards

1
Q

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

A

In the head element which contains information about the page. Head element can also contain the title element which is seen in top of browser or browser tab. Example also, favicon, preview image.

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

In 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 !Doctype declaration and HTML element. Head should come before 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

It 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 tags.

A
  1. head, 2. body of visible content, 3. h1-h6 headings, 4. p paragraph, 5. img image tag to add images
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

They provide additional information about the contents of the element. They are made up of a name and a value separated by equal sign =. Example from reading: lang=”en-us” for p tag

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

Ampersand. Escape characters are special characters used in and reserved. Typed out as a code. Also allows for adding symbols such as currency, math characters, copyright/trademark, etc.

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

How do block level elements affect document flow?

A

They take up full width of the max width of container and its own 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

They take up only the space needed within that 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 entire parent container and height of the content. This can be changed by css.

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 is only the content and height is of the content. Inline will not let you change size, it is always only size of content.

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 are numbered (lettered when nested), unordered lists are 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

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

the a tag with herf attribute

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 http link to a website

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

What is a relative URL?

A

A link to a folder or page within the website

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

You have to move up the directory first with ../

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

You just have to name the child folder

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

You have to chain ../../ up the directories.

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

You just name the file directly

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

Allows webpage author to gather information entered by a user

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

text, password, text area, radio, checkbox, dropdown, multiple select, file input, submit

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 elements.

A

text, password, radio, checkbox, file, email, search, etc.

24
Q

Is an HTML ‘a’ element a block element or an inline element?

A

Inline

25
Q

What are the six primary HTML elements for creating tables?

A

table, thead, tbody, th, tr, td, tfoot

26
Q

What purpose do the thead and tbody elements serve?

A

They set up the rows defining the head of the columns of the table. They are semantic elements.

27
Q

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

A

Financial reports, or schedules.

28
Q

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

A

selector, declaration, property, value

29
Q

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

A

Use the period .classname

30
Q

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

A

Use the html element name

31
Q

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

A

Use the pound #idname

32
Q

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

A

Hex, rgba (a is for opacity in css3), or color names.

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

Selectors that specify special states of a selected element

37
Q

What are CSS pseudo-classes useful for?

A

They can highlight elements when users mouse over or select them to draw attention or keep track of something.

38
Q

Name at least two units of type size in CSS.

A

px, em. Also, rem, in, ch, and more.

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

By default div elements are blocks

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 position aka normal flow.

45
Q

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

A

It sets an element relative to where it would have been in normal flow. And it does not affect flow of rest of document.

46
Q

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

A

It can be shifted from its original flow position.

47
Q

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

A

Removes it from the flow. Analogy: Acts like element is “dead” from the flow.

48
Q

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

A

It fits it absolutely within the nearest non static parent container.

49
Q

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

A

It has to be within a non-static containing block.

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, inheritance, specificity, importance

52
Q

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

A

Which is the last ruleset that was established

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

with the “inherit” value.

54
Q

List the three selector types in order of increasing specificity.

A

element, class id.

55
Q

Why is using !important considered bad practice?

A

It overrides everything breaks cascade order.