HTML & CSS Flashcards

1
Q

Where does non-visible content about the HTML document go?

A

It is contained in 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

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

They go within the <html> document with the <head> appearing before the <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

Is to inform the browser of what type of file is coming in. Also with older versions of HTML the version of HTML is declared. In HTML 5 <!DOCTYPE html> is all that is needed.

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

<header>, <h1>, <form>, <p>, <input></input>
</p></form></h1></header>

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 are are their to give more information about a particular element, whether to change functionality or for styling purposes.

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

The copyright symbol and registered trademark symbol. Written like so i.e. ©

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

They take up the whole width of the page and as much height as needed by the content.

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 only take up the amount of space as their content requires.

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 for things that must be in order and will be labeled 1,2,3 etc. And unordered lists items do not need to be ordered in a particular way and have simple bullet points.

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

<li> elements are block elements and each one will appear on a new line.
</li>

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 with an href=”” attribute is used to link to another website.</a>

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

What is an absolute URL?

A

An absolute URL is a link to a page outside of the current pages file system.

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 will direct the page withing the current file system.

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

You can use ../ to move “up” one directory.

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

“directory-name/-file-name” will indicate the chile directory to enter for the next file or a grandchild directory.

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

../../ and you add another ../ for every directory up.

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

You just need the file name. eg, href=”index.html”

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

The purpose is to gather or submit a information request from the server.

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, button, text-area, text

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

Give three examples of type attribute values for HTML <input></input> elements.

A

radio, checkbox, email

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

What is a pseudo-class?

A

A pseudo class, is a keyword added to a selector mainly used for interactivity.

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

What are CSS pseudo-classes useful for?

A

Allows you to add styling based on the interactivity being selected.

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

What CSS properties make up the box model?

A

Padding, Margin, element size.

25
Q

Which CSS property pushes boxes away from each other?

A

Margin pushed different elements from each other.

26
Q

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

A

Padding, makes space between the content and the border.

27
Q

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

A

hsl(), hex #rrggbb, colorname

28
Q

What are the six primary HTML elements for creating tables?

A

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

29
Q

What purpose do the thead and tbody elements serve?

A

Separates the table into, a title type element of <thead> and the main part of the data in <tbody>

30
Q

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

A

Financial information, airline schedules. But most data can be displayed in a table.

31
Q

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

A

The selector, the declaration block. And usually, however can be left blank, the key-value pair of the property and value.

32
Q

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

A

.class

33
Q

In CSS, how do you select elements by their tag name?

A

Just write out the tag name with no <>

34
Q

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

A

id

35
Q

Name two types of units that can be used to adjust font-size in CSS.

A

pt, px, rem

36
Q

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

A

font-family

37
Q

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

A

The default it a row, left to right.

38
Q

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

A

Flex defaults to no-wrap cramming all items into one row.

39
Q

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

A

divs are block level elements and naturally take up the full width of the page.

40
Q

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

A

The default is row or x-axis.

41
Q

What are the three primary components of a page layout? (Which helper classes do you need?)

A

Container, row, column.

42
Q

What is the minimum number of columns that you should put in a row?

A

1 row minimum.

43
Q

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

A

Static, position offsets have no effect.

44
Q

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

A

Document flow is unaffected.

45
Q

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

A

Offest values move the object relative to its original position.

46
Q

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

A

Removes it from the document flow and other elements ignore it.

47
Q

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

A

It moves the object based on next parent that is not static, or the body.

48
Q

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

A

You set the parent to a non-static position. Generally relative.

49
Q

What are the four box offset properties?

A

top,bottom,left,right.

50
Q

What are the four components of “the Cascade”.

A

inheritance, specifity, source order, !important

51
Q

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

A

Where the rule is applied.

52
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

inheritable properties

53
Q

List the three selector types in order of increasing specificity.

A

element, class, id

54
Q

Why is using !important considered bad practice?

A

It makes it harder to make changes, especially when working with multiple groups.

55
Q

What does the transform property do?

A

Allows you to manipulate elements with css.

56
Q

Give four examples of CSS transform functions.

A

scale, rotate, skew, translate

57
Q

The transition property is shorthand for which four CSS properties?

A

transition-property, transition-duration, transition-timing-function, transition-delay

58
Q

Give two examples of media features that you can query in an @media rule.

A

screen size
and print screen preview.

59
Q

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

A

meta, viewport.