HTML & CSS

Question 1

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

Answer 1

head tag

Question 2

Where do you put visible content about the HTML document?

Answer 2

body tag

Question 3

Where do the «a>head</a>> and «a>body</a>> tags go in a valid HTML document?

Answer 3

html tag

Question 4

What is the purpose of a «a>!DOCTYPE</a>> declaration?

Answer 4

To let the browser know which version of HTML we’re using

Question 5

Give five examples of HTML element tags.

Answer 5

a, p, div, body, img

Question 6

What is the purpose of HTML attributes?

Answer 6

provides the element with additional information

Question 7

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

Answer 7

& amp; (without the space)

Question 8

How do block-level elements affect the document flow?

Answer 8

takes up the entire width and moves to a new line

Question 9

How do inline elements affect the document flow?

Answer 9

doesn’t affect document flow. span elements will stay on the same line

Question 10

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

Answer 10

width is 100% of the available space and height is auto

Question 11

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

Answer 11

width and height are both auto

Question 12

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

Answer 12

ordered - structured and numbered

unordered - no structure and no numbers. bullet points

Question 13

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

Answer 13

block

Question 14

What HTML tag is used to link to another website?

Answer 14

«a>a</a>>

Question 15

What is an absolute URL?

Answer 15

url to external page

Question 16

What is a relative URL?

Answer 16

url to something on the same page

Question 17

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

Answer 17

../

Question 18

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

Answer 18

name of the child folder, followed by a forward slash, then the file name

Question 19

How do you indicate the relative link to a grand parent directory?

Answer 19

../../

Question 20

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

Answer 20

just use the file name

Question 21

What is the purpose of an HTML form element?

Answer 21

To receive input from a user and make a webpage interactive. also the form element itself hold and contains all the form control elements

Question 22

Give five examples of form control elements.

Answer 22

input, textarea, select, option, button

Question 23

Give three examples of type attributes for HTML «a>input</a>> elements.

Answer 23

radio, checkbox, submit

Question 24

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

Answer 24

inline

Question 25

What are the six primary HTML elements for creating tables?

Answer 25

table, tr, td, thead, tbody, tfoot

Question 26

What purpose do the thead and tbody elements serve?

Answer 26

thead - the heading for the tables | tbody - the main content and meat of the table

Question 27

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

Answer 27

sports graphs, anything that should be in an excel document

Question 28

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

Answer 28

declaration block, selectors, property, and value

Question 29

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

Answer 29

with a .

Question 30

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

Answer 30

just write out the element

Question 31

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

Answer 31

with a #

Question 32

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

Answer 32

hex codes, RGB values, and a color name

Question 33

What CSS properties make up the box model?

Answer 33

margin, padding, border

Question 34

Which CSS property pushes boxes away from each other?

Answer 34

margin

Question 35

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

Answer 35

padding

Question 36

What is a pseudo-class?

Answer 36

classes that are applied based on a certain state

Question 37

What are CSS pseudo-classes useful for?

Answer 37

It can be combined with a CSS selector to add an effect to existing elements based on their states

Question 38

Name at least two units of type size in CSS.

Answer 38

pixel and em

Question 39

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

Answer 39

font-family

Question 40

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

Answer 40

row

Question 41

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

Answer 41

no wrap

Question 42

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

Answer 42

divs are by default block elements

Question 43

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

Answer 43

row

Question 44

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

Answer 44

static

Question 45

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

Answer 45

no document flow

Question 46

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

Answer 46

does not change document flow

Question 47

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

Answer 47

completely takes it out of document flow

Question 48

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

Answer 48

within the nearest non-static element

Question 49

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

Answer 49

set it to something other than static

Question 50

What are the four box offset properties?

Answer 50

top, right, bottom, left

Question 51

What are the four components of "the Cascade"?

Answer 51

source order, specificity, inheritance, and !important (important rule)

Question 52

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

Answer 52

styling that is lower in the style sheet takes precedence over what's higher in the style sheet

Question 53

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

Answer 53

condition where child elements can use styling elements from parents elements

Question 54

List the three selector types in order of increasing specificity.

Answer 54

type < class < ID

Question 55

Why is using !important considered bad practice?

Answer 55

!important always wins

Question 56

What does the transform property do?

Answer 56

rotate, skew, scale, etc on the coordinate space

Question 57

Give four examples of CSS transform functions.

Answer 57

rotate, translate, scale, skew

Question 58

The transition property is shorthand for which four CSS properties?

Answer 58

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

Question 59

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

Answer 59

min-width & max-width

Question 60

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

Answer 60

<meta name="viewport" content="width=device-width, initial-scale=1">

Question 61

What is a breakpoint in responsive Web design?

Answer 61

point where our styling would break

Question 62

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?

Answer 62

with percentages the layout adapts to the exact dimensions of the viewport's width.

Question 63

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?

Answer 63

bottom one wins due to source order.