HTML & CSS Misc.

Question 1

What is an element?

Answer 1

An element is what HTML is composed of. Elements structure a web page and define its content. A tag and the content between two tags is called an HTML element.

Question 2

What is the body tag?

Answer 2

The body tag is an HTML element, and the content inside this element is what displays on the screen.

Question 3

What is a child element?

Answer 3

A child element is an element contained inside another element, which is the parent element.

Question 4

How many types of headings are there in HTML?

Answer 4

6 total (h1 through h6)

Question 5

What is the div element?

Answer 5

The div element is a container that divides the page into sections. This helps group elements in the HTML together. Also, div stands for division.

Question 6

What is an attribute?

Answer 6

Attributes are content added to the opening tag of an element. They can be used in different ways like providing information or changing styling.

Question 7

What are attributes made out of?

Answer 7

The name of the attribute and the value of the attribute.

Question 8

Which tags do you use to display text in HTML?

Answer 8

Paragraph tag or span tag

Question 9

When is it best to use a span element vs. div element?

Answer 9

Use span when you want to target a specific piece of content that is inline.

Use div when you want to divide your content into blocks.

Question 10

Do the image (img) and break (br) tags require end tags?

Answer 10

No

Question 11

What attribute is required in an image tag?

Answer 11

source (src) attribute

Question 12

What should you always include in image tags to help with assistive technologies?

Answer 12

An alt attribute that provides a description of the image.

Question 13

Does the video tag require an end tag?

Answer 13

Yes

Question 14

How do you link to other web pages in HTML?

Answer 14

By using an anchor element <a> which requires an href attribute. The element requires an end tag and content between the tags.</a>

Question 15

What attribute can you use to open a link in a new window?

Answer 15

target attribute

Question 16

How do you add comments to HTML?

Answer 16

Less than sign, exclamation point, dash, dash, your comment, dash, dash, and then greater than sign.

Question 17

What are some ways you can help with accessibility on the web?

Answer 17

• Ensure semantic HTML.
• Set the language attribute on the open html tag. This help with screen readers.
• Style with high-contrast and accessible fonts.

Question 18

What does the display property determine?

Answer 18

How an element’s box is rendered in the browser. Every HTML element is a box by default.

Question 19

What are the three display properties?

Answer 19

Inline, block, and inline-block

Question 20

How do you remove white-space between inline-block elements that are displaying side-by-side?

Answer 20

Add font-size: 0 to the parent element.

Question 21

What properties should you use when you want to horizontally center block-level content relative to a parent element?

Answer 21

display: block;
margin-left: auto;
margin-right: auto;

Question 22

What properties should you use when you want to horizontally center inline elements within a block element?

Answer 22

display: inline-block;

text-align: center;

Question 23

What does “a11y” stand for?

Answer 23

Web accessibility

Question 24

What is the position property?

Answer 24

The position property is about the flow of elements on HTML.

Question 25

What are the four most common values for the position property?

Answer 25

Static
Fixed
Relative
Absolute

Question 26

What is the static position?

Answer 26

It’s the normal flow or default flow. Block-level elements get rendered in the same order that they appear in the HTML markup. (Top to bottom and left to right)

Question 27

What is the fixed position?

Answer 27

An element will stay in place even when a user scrolls. However, you can’t have offset properties. (Left, right, top, or bottom) This a good choice for navigation bars and footers.

Question 28

What is the relative position?

Answer 28

An element is still in the normal flow, but we can use offset properties. (Left, right, top, and bottom)

Question 29

What is the absolute position?

Answer 29

They are elements that are outside of the normal flow and fixed, but they are offset in relation to the first parent container with a non-static position.

Question 30

What does the float property do in CSS?

Answer 30

The element is taken out of normal flow and pushed to where you set it. All other element next to it then wrap around it. This is good for wrapping text around an element.

Question 31

What attributes must the form element include and what do they mean?

Answer 31

Action: Determines where the form’s information goes. This is the URL of the server endpoint where the submitted form data should be sent to.

Method: Determines how the information is sent and processed. Usually, you’ll want method=”get” or method=”go”.

Question 32

What does the fieldset element do?

Answer 32

This element groups together related inputs and labels. These help web crawlers and screen readers to understand how inputs are grouped together. Only use it when grouping more than one input and not just one.

Question 33

what is the legend element?

Answer 33

It is like the title for the fieldset. This can add extra context for screen readers.

Question 34

What is the label element and what attribute must it have?

Answer 34

The label element explains what an input is for. It must have the “for” attribute that equals to the id of the input.

Question 35

Do labels and inputs require opening and closing tags?

Answer 35

Labels do but inputs don’t

Question 36

When would you use clear: right or clear: left in CSS?

Answer 36

When there is an element that does not recognize that the next element is an float element. Apply one of these to the element in CSS in order to have it move to the next line. Otherwise, it’ll stay on the same line as the float elements.

Question 37

How do you use the flexbox tools?

Answer 37

Use this property on the container in the CSS:

display: flex;

Question 38

What three properties control a flex container?

Answer 38

flex-direction
justify-content
align-items

Question 39

What is flex-direction and its values?

Answer 39

Flex-direction describes the main axis of the container, that is, whether items are laid out horizontally in a row or vertically in a column.

flex-direction accepts 4 possible values:

row - this is the default, items are laid out from left to right

row-reverse - items are laid out from right to left

column - items are laid out from top to bottom

column-reverse - items are laid out from bottom to top

Question 40

What is justify-content and its values?

Answer 40

The justify-content property controls how items are arranged on the main axis. It has these values and more:

center
flex-start
flex-end
space-between
space-around
space-evenly

Question 41

What is align-items and its values?

Answer 41

The align-items property is used to adjust how items are laid out on the cross axis. It has these values:

flex-start
flex-end
center

Question 42

What is the align-self property and its values?

Answer 42

The align-self property is applied to the individual item inside the container rather than the container itself. It takes similar values to the align-items property:

flex-start
flex-end
center