Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Web Development > HTML/CSS > Flashcards

HTML/CSS Flashcards

1
Q

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

A

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

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

in between the <html> 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

To let the browser know what version of html you are running

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

head, body, paragraph, header, footer

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

to further define 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

® (reserved 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

they take up the full width of their 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

they only take up as much space as they need within their container

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: 100% height: auto (only takes up as much space as needed height-wise)

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: auto height: auto (only takes up as much space as needed on both ends there)

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 numbered while unordered isn’t

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, takes up the whole width

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

anchor, <a></a>

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

What is an absolute URL?

A

a URL linking you to an external website, has to have https://

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 parent directory?

A

../

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 child directory?

A

directory(folder)/file

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 grand parent directory?

A

../../

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 the same directory?

A

just link file (index.html)

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

What is the purpose of an HTML form element?

A

allows you to group together the form control elements, sets up the boundaries of the form

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

Give five examples of form control elements.

A

input, select, textarea, label, button

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

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

A

radio, checkbox, text,

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

Is an HTML <input></input> element a block element or an inline element?

A

in-line

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

What are the six primary HTML elements for creating tables?

A

<table>, thead, <tr> (table row), <th> (table heading), tbody,<td> (table data), tfoot
</td></th></tr></table>

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

What purpose do the thead and tbody elements serve?

A

thead holds the headers for the table. and tbody holds the data for the body - for the most part.

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

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

A

sports results, student grades

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

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

A

css selector, declaration block, properties, values

28
Q

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

A

put . before the class name

29
Q

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

A

just type the tag as is before the declaration block

30
Q

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

A

put # before the ID name

31
Q

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

A

RGB values, hex codes, colornames

32
Q

What CSS properties make up the box model?

A

border, margin, padding, content: (height & width)

33
Q

Which CSS property pushes boxes away from each other?

A

margin

34
Q

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

A

padding

35
Q

What is a pseudo-class?

A

a class on the html element that gets applied under a specific state

36
Q

What are CSS pseudo-classes useful for?

A

creating functionality events for elements being interacted with under a specific state

37
Q

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

A

pixels (px), or em.

38
Q

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

A

font-family

39
Q

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

A

row (all lined up in 1 row)

40
Q

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

A

no wrap, (doesn’t move on to the next line)

41
Q

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

A

because they’re block

42
Q

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

A

row

43
Q

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

A

container row column

44
Q

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

A

one

45
Q

What is the purpose of a container?

A

to confine all the content,

46
Q

purpose of a row class

A

row class’s purpose is to take up a vertical chunk of the page.

47
Q

purpose of a column class

A

is to take up a horizontal chunk

48
Q

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

A

static

49
Q

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

A

document flow is unaffected

50
Q

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

A

shift relative to their original position, its also opposite. top pushes down, bottom pushes up.

51
Q

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

A

removed from the document entirely, so the documents don’t perceive it as existing at all.

52
Q

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

A

positions against the closest non-static container

53
Q

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

A

By setting the containing block to relative, making it non-static

54
Q

What are the four box offset properties?

A

top, right, bottom, left

55
Q

What does the transform property do?

A

lets you rotate scale skew or translate an element. modifies the coordinate space of the css visual formatting model.

56
Q

Give four examples of CSS transform functions.

A

scale, rotate, skew, transform

57
Q

The transition property is shorthand for which four CSS properties?

A

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

58
Q

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

A

width, height, orientation. e.g (min-width: 300px)

59
Q

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

A

viewport metatag

60
Q

What is a breakpoint in responsive Web design?

A

the area where your styling should shift to a new set, because it’s a point where the styling would break if not changed. requires new media query rule set

61
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

it allows you have a little wiggle room with your designs so that you don’t have to make excessive media queries

62
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, needs to grow in order

63
Q

What are the four components of “the Cascade”.

A

Source Order, Specificity, Inheritance, !important

64
Q

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

A

governs the strength of the rule of the stylesheet, styling lower in the stylesheet is stronger

65
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

using inherited

66
Q

List the three selector types in order of increasing specificity.

A

type, class, ID

67
Q

Why is using !important considered bad practice?

A

it’s considered too strong, it’s like a nuclear bomb for css.

Web Development (4 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions