HTML / CSS Flashcards

1
Q

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

A

Between the head tags

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

Between the body tags

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

The head goes at the top of the HTML document. The body tag goes at the bottom of the HTML document, below the head tags

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

Declaration to tell a 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

<div> <a> <img></img> <span> </span></a></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

HTML attributes give additional information regarding the 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

© copyright

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-level elements take start on a new row and take 100% width of its parent container

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 are only as wide as their content

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’s width is 100% of its parents container

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

As wide as its 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 list is ordered numerically. Unordered list items are listed as 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 tag. The URL is listed 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

An absolute URL contains all information necessary to locate a resource

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

What is a relative URL?

A

A relative URL points to a file relative to the current 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 directory followed by /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

Name of file in current directory or ./ 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

Allow you to collect information from visitors to your site

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 input, radio buttons, submit buttons, checkboxes, and text area

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

type, name, size, maxlength, value, id, selected

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

Is an HTML 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, thead, tbody, tfoot, th, 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

The HTML element defines a set of rows defining the head of the columns of the table. The HTML Table Body element () encapsulates a set of table rows ( elements), indicating that they comprise the body of the table ().

27
Q

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

A

Sports statistics and schedules

28
Q

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

A

selector & declaration

29
Q

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

A

.class-name {}

30
Q

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

A

element-name {}

31
Q

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

A

class-name {}

32
Q

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

A

RGB / RGBA, Hex code, or Named colors

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 add 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). (:hover can be used to change a button’s color when the user’s pointer hovers over it.)

37
Q

What are CSS pseudo-classes useful for?

A

Pseudo-classes let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on certain form elements), or the position of the mouse (like :hover, which lets you know if the mouse is over an element or not).

38
Q

Name at least two units of type size in CSS.

A

px, %, (small, medium, large)

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

It does not change document flow

46
Q

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

A

It is relative to where it normally appears on page

47
Q

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

A

It removes it from the document flow

48
Q

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

A

Position changes relative to its containing block

49
Q

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

A

Make the containing box non-static

50
Q

What are the four box offset properties?

A

left, right, top, bottom

51
Q

What are the four components of “the Cascade”.

A

Importance, inheritance, specificity, source order

52
Q

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

A

The order that your CSS rules are written in your stylesheet

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

inheritance

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

it makes debugging more difficult by breaking the natural cascading in your stylesheets. When two conflicting declarations with the !important rule are applied to the same element, the declaration with a greater specificity will be applied.

56
Q

What does the transform property do?

A

The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.

57
Q

Give four examples of CSS transform functions.

A

matrix, translate, scale, rotate, 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

width and flex-basis

60
Q

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

A

viewport

61
Q

What is a breakpoint in responsive Web design?

A

The point at which a media query is introduced

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

%s are better for responsiveness

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

The style is being selected based on its position in the stylesheet