HTML & CSS Flashcards

1
Q

HTML skeleton

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

A

head element

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

HTML skeleton

Where do you put visible content about the HTML document?

A

Body element

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

HTML skeleton

Where do the head and body tags go in a valid HTML document?

A

HTML element

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

HTML skeleton

What is the purpose of a doctype declaration?

A

an instruction to the web browser about what version of HTML the page is written in.(interpretation)

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

HTML Syntax

Give five examples of HTML element types.

A
  1. body
  2. p
  3. html
  4. <h1> ~ </h1><h6>
    </h6>
  5. title</h6>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

HTML Syntax

What is the purpose of HTML attributes?

A

to change the color, size, and other features of HTML elements.

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

HTML Syntax

Give an example of an HTML entity (escape character).

A

© Copy Right

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

HTML Block and Inline

How do block-level elements affect the document flow?

A

Always starts on a new line.
Always takes up the full width available
has a top and a bottom margin

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

HTML Block and Inline

How do inline elements affect the document flow?

A
does not start on a new line
only takes up as much width as necessary
Takes up the space of an entire line
left and right margin only
padding
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

HTML Block and Inline

What are the default width and height of a block-level element?

A

Content

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

HTML Block and Inline

What are the default width and height of an inline element?

A

Size of the content

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

HTML Lists

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

A

Ordered lists have numbering

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

HTML Lists

Is an HTML list a block element or an inline element?`1

A

block element

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

HTML Links

What HTML tag is used to link to another website?

A

anchor href

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

HTML Links

What is an absolute URL?

A

Exact URL to locate the resources

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

HTML Links

What is a relative URL?

A

URL that has path

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

HTML relative links

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
18
Q

HTML relative links

How do you indicate the relative link to a child directory?

A

use the name of the child directory

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

HTML relative links

How do you indicate the relative link to a grandparent directory?

A

../../

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

HTML relative links

How do you indicate the relative link to the same directory?

A

Type the name of the same directory

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

HTML forms

What is the purpose of an HTML form element?

A

Semantics and the accessibility that happens as a result

Gather data from clients.

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

HTML forms

Give five examples of form control elements.

A
input
textarea
label
fieldset
button
option
select
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

HTML forms

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

A
text
radio
checkbox
button
url
range
email
password
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

HTML forms

Is an HTML input element a block element or an inline element?

A

Inline

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

HTML tables

What are the six primary HTML elements for creating tables?

A

table, thead, tbody, tr, td, th

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

HTML tables

What purpose do the thead and tbody elements serve?

A

thead: group header content
tbody: group the body content

27
Q

Html tables

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

A

numbers? spreadsheet(anything we can store in a table)

28
Q

CSS syntax

What are the names of the individual pieces of a CSS rule? (What’s the structure of CSS syntax)

A

id, class, element

29
Q

CSS syntax

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

A

Using dot(.)

30
Q

CSS syntax

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

A

elements name

31
Q

CSS Syntax

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

A

Using # (Hashtag)

32
Q

CSS colors

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

A

Hex
RGB
HSL

33
Q

CSS box model

What CSS properties make up the box model?

A
34
Q

CSS box model

Which CSS property pushes boxes away from each other?

A

margin

35
Q

CSS box model

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

A

padding

36
Q

CSS pseudo-classes

What is a pseudo-class?

A

add styles to selectors, but only when those selectors meet certain conditions.

pseudo class is expressed by adding colon

37
Q

CSS pseudo-classes

What are CSS pseudo-classes useful for?

A

keyword added to a selector that specifies a special state of the selected element(s).

ex) :hover, :focus, :active

order) :link, :visited(only for hyper links), :hover,
:focus, :active.

38
Q

CSS fonts

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

A

use rem more.

39
Q

CSS fonts

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

A

font-family;

why would you want to use more than one font?

backup font (built ins)

40
Q

difference between serif and san -serif

A

serif has a littl tiks

41
Q

CSS cascade

What are the four components of “the Cascade”.

A

inheritance, Source order, Specificity, importance?

Highest is importance

42
Q

CSS cascade

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

A
43
Q

CSS Cascade

How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?

A

children set to inherit

44
Q

CSS cascade

List the three selector types in order of increasing specificity.

A

type(element name), class, id

45
Q

CSS cascade

Why is using !important considered bad practice?

A

It breaks the natural cascading in stylesheet and makes debugging harder

46
Q

CSS flexbox

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

A

Row

47
Q

CSS flexbox

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

A

nowrap

48
Q

CSS layout classes

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

A

Because they are block elements?

49
Q

CSS layout classes

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

A

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

50
Q

CSS positioning

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

A

Static

51
Q

CSS Positioning

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

A

It does not

52
Q

CSS- positioning

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

A

It does not

53
Q

Css positioning

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

A

act as it doesn’t exist

54
Q

Css positioning

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

A

align itself to nonstatic positioned parent

55
Q

CSS positioning

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

A

assing non static position value

56
Q

Css transforms

A

changes the shape, position, and orientation of page elements.

57
Q

Give four examples of CSS transform functions.

A

rotate, translateX, translateY, scale

58
Q

The transition property is shorthand for which four CSS properties?

A

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

59
Q

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

A

max-width, min-width

60
Q

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

A

viewport tag

61
Q

What is a breakpoint in responsive Web design?

A

Points where the website content responds according to the device width

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

px will keep the number values even though the size of screen changes.,

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

CSS cascading