HTML/CSS Flashcards

(67 cards)

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
What purpose do the thead and tbody elements serve?
thead holds the headers for the table. and tbody holds the data for the body - for the most part.
26
Give two examples of data that would lend itself well to being displayed in a table.
sports results, student grades
27
What are the names of the individual pieces of a CSS rule?
css selector, declaration block, properties, values
28
In CSS, how do you select elements by their class attribute?
put . before the class name
29
In CSS, how do you select elements by their tag name?
just type the tag as is before the declaration block
30
In CSS, how do you select an element by its id attribute?
put # before the ID name
31
Name three different types of values you can use to specify colors in CSS.
RGB values, hex codes, colornames
32
What CSS properties make up the box model?
border, margin, padding, content: (height & width)
33
Which CSS property pushes boxes away from each other?
margin
34
Which CSS property add space between a box's content and its border?
padding
35
What is a pseudo-class?
a class on the html element that gets applied under a specific state
36
What are CSS pseudo-classes useful for?
creating functionality events for elements being interacted with under a specific state
37
Name two types of units that can be used to adjust font-size in CSS.
pixels (px), or em.
38
What CSS property controls the font used for the text inside an element?
font-family
39
What is the default flex-direction of a flex container?
row (all lined up in 1 row)
40
What is the default flex-wrap of a flex container?
no wrap, (doesn't move on to the next line)
41
Why do two div elements "vertically stack" on one another by default?
because they're block
42
What is the default flex-direction of an element with display: flex?
row
43
What are the three primary components of a page layout? (Which helper classes do you need?)
container row column
44
What is the minimum number of columns that you should put in a row?
one
45
What is the purpose of a container?
to confine all the content,
46
purpose of a row class
row class's purpose is to take up a vertical chunk of the page.
47
purpose of a column class
is to take up a horizontal chunk
48
What is the default value for the position property of HTML elements?
static
49
How does setting position: relative on an element affect document flow?
document flow is unaffected
50
How does setting position: relative on an element affect where it appears on the page?
shift relative to their original position, its also opposite. top pushes down, bottom pushes up.
51
How does setting position: absolute on an element affect document flow?
removed from the document entirely, so the documents don't perceive it as existing at all.
52
How does setting position: absolute on an element affect where it appears on the page?
positions against the closest non-static container
53
How do you constrain an absolutely positioned element to a containing block?
By setting the containing block to relative, making it non-static
54
What are the four box offset properties?
top, right, bottom, left
55
What does the transform property do?
lets you rotate scale skew or translate an element. modifies the coordinate space of the css visual formatting model.
56
Give four examples of CSS transform functions.
scale, rotate, skew, transform
57
The transition property is shorthand for which four CSS properties?
transition-delay transition-duration transition-property transition-timing-function
58
Give two examples of media features that you can query in an @media rule.
width, height, orientation. e.g (min-width: 300px)
59
Which HTML meta tag is used in mobile-responsive web pages?
viewport metatag
60
What is a breakpoint in responsive Web design?
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
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?
it allows you have a little wiggle room with your designs so that you don't have to make excessive media queries
62
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?
because of source order, needs to grow in order
63
What are the four components of "the Cascade".
Source Order, Specificity, Inheritance, !important
64
What does the term "source order" mean with respect to CSS?
governs the strength of the rule of the stylesheet, styling lower in the stylesheet is stronger
65
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
using inherited
66
List the three selector types in order of increasing specificity.
type, class, ID
67
Why is using !important considered bad practice?
it's considered too strong, it's like a nuclear bomb for css.