HTML/CSS Flashcards

1
Q

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

A

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

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

Inside the html tag

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

< head >, < title >, < body >, < h1 >, < p >

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

& trade ; for trademark

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

Each block-level element starts on a new line, and takes up the entire width of whatever line it occupies.

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

Each inline element only takes up as much height and width as its element; and can be nested within other blocks.

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: entire line
height: size of element

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: size of element
height: size of element

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 lists where each item in the list is numbered vs an unordered list are lists that begin with bullet

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

the < a > tag< /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 starts with the domain name for that site, and can be followed by the path to a specific page. (Links 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 relative URL is shorter, but it can only be used to refer to links that reside on the same server as the page that refers them.

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

Use ../ to indicate the folder above the current one, then follow it with the file name.

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

Use the name of the child folder, followed by a forward slash.

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

Repeat the ../ to indicate that you want to go up two folders (rather than one).

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

Just use the file name. (Nothing else is needed.)

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

HTML forms give you a set of elements to collect data from your users.

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 >, < label >, < select >, < textarea >, < button >, < fieldset >, < legend >, < datalist >, < output >, < option >

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

Give three examples oftypeattributes for HTML< input >elements.

A

“text”, “radio”, “checkbox”, “submit”

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

Is an HTML< 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 >, < tbody >, < tr >, < 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

to group table rows into logical sections based on their content

27
Q

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

A

financial reports, TV schedules, sports results

28
Q

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

A

selector, declaration block, a property and a value

29
Q

In CSS, how do you select elements by theirclassattribute?

A

Input a period (.) character, followed by the class name.

30
Q

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

A

Input only the element name

31
Q

In CSS, how do you select an element by itsidattribute?

A

Input a hash (#) character, followed by the id of the element.

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

Borders, margins, padding

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
  • Apseudo-classis used to define a special state of an element
  • A pseudo-class acts like an extra value for a class attribute.
37
Q

What are CSS pseudo-classes useful for?

A

to change the style of an element when a user hovers over or clicks on text, or when they have visited a link

38
Q

Name at least two units of type size in CSS.

A

Pixel (px), percentage (%), ems (An em is equivalent to the width of a letter m.)

39
Q

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

A

font-family

40
Q

What is the defaultflex-directionof aflexcontainer?

A

row

41
Q

What is the defaultflex-wrapof aflexcontainer?

A

nowrap (make it fit all in one line)

42
Q

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

A

Div elements are block elements

43
Q

What is the defaultflex-directionof an element withdisplay: flex?

A

Row (left to right)

44
Q

What is thedefaultvalue for thepositionproperty of HTML elements?

A

static positioning

45
Q

How does settingposition: relativeon an element affect document flow?

A

It does not affect document flow

46
Q

How does settingposition: relativeon an element affect where it appears on the page?

A

It appears relative to where it would be on the page; any adjustments is relative to original position

47
Q

How does settingposition: absoluteon an element affect document flow?

A

removes it from the document flow

48
Q

How does settingposition: absoluteon an element affect where it appears on the page?

A

it becomes relative to the parent (any non-static position)

49
Q

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

A

change it to a non-static

50
Q

What are the four box offset properties?

A

top, left, right, bottom

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

The order that your CSS rules are written in your stylesheet; The styling provided for an element last in your stylesheet is the styling that will ultimately take effect.

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 (weakest), class, and id selectors (strongest)

55
Q

Why is using !important considered bad practice?

A

it makes debugging more difficult by breaking the natural cascading in your stylesheets

56
Q

What does the transform property do?

A

reposition elements on the page

57
Q

Give four examples of CSS transform functions.

A

rotate, skew, translate, scale

58
Q

The transition property is shorthand for which four CSS properties?

A

The transition CSS property is a shorthand property for 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, height, color

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

With percentage, you don’t beed an actual pixel number. It becomes relative to the width/height of a document; more responsive to the change of the document viewport

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

because of source order.

Cascade rule; the order matters