HTML and CSS Flashcards

1
Q

where do you put non-visible content about the html document?

A

in the head tags

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

in the body tags

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 !DOCTYPE declaration

A

to notify the browser that its an html document and the version its using.

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

Give 5 examples of the HTML element tags

A

title, heading meta, link img. body p

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

The attribute name indicates what kind of extra information you are supplying about the elements content.

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

Give an example of an HTML entity

A

copyright ©

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 start a new line in the browser

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

inline elements continue on the same line as their neighboring elements

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

A block-level element occupies the entire horizontal space of its parent element and the vertical space equal to the height of its contents, thereby creating a “block” Width is 100% height is auto

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

an inline element only takes up as much width as necessary auto width and auto height

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

What is the difference between an order and unordered list in HTML

A

Ordered lists are number and unordered lists are bullet points

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

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

absolute URL

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

What is an absolute URL`

A

When you link a URL to a different website it shows the full websites URL in the href value aka the domain name

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

What is a relative URL

A

When you link to other pages in the same website.

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

How do you indicate the relative url to a parent directory?

A

../

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

A

Use the child name directory followed by a foward slash the the child name file

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 a grandparent directory?

A

../../file name

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

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

A

Just use the file name.

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

What is the purpose of an HTML form element?

A

Forms allow you to collect information from different visitors to your site

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

Give five examples of form control elements.

A

textarea, input, select, option, button

23
Q

give three examples of type atributes for html input elements

A

text password checkbox

24
Q

is an html input element a block or an inline element?

A

inline element

25
Q

what are the six primary HTML elements for creating tables?

A

tbody, tr, table, thead, th, tfoot

26
Q

What purpose do the thead and tbody elements serve?

A

thead is the head of the table and tbody is the body of the table

27
Q

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

A

grades and sports statistics

28
Q

what are the individual names of pieces of a css rule?

A

selectors property value declaration block

29
Q

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

A

with a period followed by the value of the class

30
Q

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

A

put them as selectors in a rule set

31
Q

in css how do you select an element by its ID attribute?

A

with the #

32
Q

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

A

Hexcode, rgb values, colornames

33
Q

What is a pseudo-class?

A

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

34
Q

What are css pseudo-classes useful for?

A

They can change the appearance of elements when a user interacts with them.

35
Q

Name at least two units of type size in CSS.

A

Pixels percentages, and ems

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

row

38
Q

what is the default flex-wrap of a flex-container

A

no-wrap

39
Q

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

A

they are block elements

40
Q

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

A

row

41
Q

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

A

static

42
Q

How doe setting position relative on an element affect document flow?

A

It flows like a normal page would

43
Q

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

A

It moves it in relation to where it would have been in normal flow

44
Q

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

A

It is taken out of normal flow and the other elements act like its not there

45
Q

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

A

put a position thats not static on it.

46
Q

what are the four box offset properties?

A

top bottom left right

47
Q

how does setting position: absolute on an element afffect where it appears on the page?

A

within the first non static parent element

48
Q

What are the four main components of “the cascade”

A

source order, inheritance, specificity, and important

49
Q

What does the term source order mean with respect to CSS

A

Source order is, simply put, the order that your css rules are written in your stylesheet

50
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

it gets the inherited proeprty from the parent

51
Q

list three selector types in order of increasing specificity

A

type selectors, class selectors, ID selectors

52
Q

why is using !important considered bad practice?

A

its makes debugging more difficult by breaking the natural cascading in your stylesheets

53
Q

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

A

min width and max width

54
Q

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

A

viewport meta tag