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

Both should be one level down from 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 let the browser know which version of HTML to open the page with.

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

What is the purpose of HTML attributes?

A

HTML attributes provide additional information about HTML elements.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
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
7
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
8
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
9
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
10
Q

What is the difference between an ordered list and an unordered list in HTML?

A

An ordered list is organized by number, while an unordered list is displayed with unordered bullet points by default.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
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
12
Q

What HTML tag is used to link to another website?

A

the < a > tag

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

What is an absolute URL?

A

A URL directly to an image on the world wide web.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
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
15
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
16
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
17
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
18
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
19
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
20
Q

Give five examples of form control elements.

A

< input >, < label >, < select >, < textarea >, < button >, < fieldset >, < legend >, < datalist >, < output >, < option >, < optgroup >

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

Give three examples of type attributes for HTML < input > elements.

A

“text”, “radio”, “checkbox”, “password” , “file”, “submit”, “image”, “hidden”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
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
23
Q

What are the six primary HTML elements for creating tables?

A

< table >, < thead >, < th >, < tbody >, < tr >, < td >

24
Q

What purpose do the thead and tbody elements serve?

A

Helps people who use screen readers and also allows you to style these sections differently than the rest of the table.

25
Q

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

A

Sports statistics, banking info.

26
Q

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

A

Selector group, Declaration block

27
Q

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

A

By preceding the class name with a ‘.’.

28
Q

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

A

By entering the name of the element type.

29
Q

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

A

By preceding the class name with a ‘#’.

30
Q

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

A

Names, Hex, RGB

31
Q

What CSS properties make up the box model?

A

Content, Padding, Border, Margin

32
Q

Which CSS property pushes boxes away from each other?

A

Margin

33
Q

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

A

Padding

34
Q

What is a pseudo-class?

A

A keyword added to a selector that specifies a special state of the selected element

35
Q

What are CSS pseudo-classes useful for?

A

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, the status of its content, or the position of the mouse.

36
Q

Name at least two units of type size in CSS.

A

px, rem, em, %, …

37
Q

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

A

font-family:

38
Q

What is the default flex-direction of a flex container?

A

row

39
Q

What is the default flex-wrap of a flex container?

A

nowrap

40
Q

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

A

Because div elements are block level elements by default.

41
Q

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

A

flex-direction: row;

42
Q

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

A

static positioning.

43
Q

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

A

It takes its place in the normal document flow and can then be modified from its final position.

44
Q

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

A

You can make it appear anywhere.

45
Q

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

A

An absolutely positioned element no longer exists in the normal document flow.

46
Q

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

A

You can make it appear anywhere.

47
Q

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

A

By making its parent’s position relative;

48
Q

What are the four box offset properties?

A

top, bottom, left, right

49
Q

What are the four components of “the Cascade”.

A

Source order, Inheritance, Specificity, and !important.

50
Q

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

A

The order that your CSS rules are written in your stylesheet.

51
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

Through inherited properties; When no value for an inherited property has been specified on an element, the element gets the computed value of that property on its parent element.

52
Q

List the three selector types in order of increasing specificity.

A

type selectors, class selectors, ID selectors

53
Q

Why is using !important considered bad practice?

A

It makes debugging more difficult by breaking the natural cascading in stylesheets.

54
Q

What is a breakpoint in responsive Web design?

A

A limit where a media rule is activated.

55
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

The column will be sized in relation to its parent element.

56
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 second, because of source order.