HTML & CSS Concepts

Question 1

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

Answer 1

They are put inside the < head > tag

Question 2

Where do you put visible content about the HTML document?

Answer 2

You put them in the < body > tag

Question 3

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

Answer 3

Inside the < html > tag

Question 4

What is the purpose of a < !Doctype > declaration?

Answer 4

This declaration tells the browser to use the latest version of HTML

Question 5

Give five examples of HTML element tags.

Answer 5

head, body, span, div, html

Question 6

What is the purpose of HTML attributes?

Answer 6

all HTML elements can have attributes added, which modifies the way the element functions.

Question 7

How do block-level elements affect the document flow?

Answer 7

these block-level elements will always start on a new line. What ever content follows these elements will also start on a new line

Question 8

How do inline elements affect the document flow?

Answer 8

Inline elements will continue on the same line as long as there is space to do so

Question 9

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

Answer 9

The default width is 100% but the default height depends on the content inside the block element

Question 10

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

Answer 10

the width and height depends on the content of the element

Question 11

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

Answer 11

An ordered list will create a numerically ordered list of your items (starting with 1) while an unordered list will use bullet points instead.

Question 12

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

Answer 12

block element

Question 13

What HTML tag is used to link to another website?

Answer 13

< a href=”http://www.SampleWebPage.com” > HTML text content here < /a >

Question 14

What is an absolute URL?

Answer 14

an absolute URL gives all information about a page’s location. For example, www.MyStore.com/products/sales/videogames

Question 15

What is a relative URL?

Answer 15

A relative URL is a link on your own personal computer domain. Examples would be links to other files or folders that are parents/children/grandparents/etc. of one another

Question 16

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

Answer 16

use < a href = ‘’.. / samplePicture.jpg’’ > < / a >

Question 17

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

Answer 17

use < a href = ‘‘NameOfChildFolder/samplePic.jpg’’ > < / a >

Question 18

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

Answer 18

use < a href = ‘’.. /.. /samplePicture.jpg’’ > < / a >

Question 19

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

Answer 19

use < a href = ‘‘samplePicture.jpg’’ > < / a >

Question 20

What is the purpose of an HTML form element?

Answer 20

it is used to wrap around user input types. Not technically required but we should use it for better engine recognition as well as screen readers

Question 21

Give five examples of form control elements.

Answer 21

< form > < fieldset > < textarea > < button > < label >

Question 22

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

Answer 22

input types include: text, email, password, checkbox, radio and many more

Question 23

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

Answer 23

inline element

Question 24

What are the six primary HTML elements for creating tables?

Answer 24

< table >, < tr > , < td > , < thead > , < tbody >

Question 25

What purpose do the thead and tbody elements serve?

Answer 25

The table head and table foot should contain information about the table’s columns (mainly name) . The table body should contain rows of table data (mainly name if horizontal name labels are needed.)

Question 26

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

Answer 26

by using .classNameHere

Question 27

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

Answer 27

by typing the direct name

Question 28

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

Answer 28

a CSS rule consists of a selector and a declaration block. inside the block can have properties and values too

Question 29

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

Answer 29

By using #IdNameHere

Question 30

What CSS properties make up the box model?

Answer 30

content, padding, border, and margin

Question 31

Which CSS property pushes boxes away from each other?

Answer 31

The margin

Question 32

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

Answer 32

Padding

Question 33

What is a pseudo-class?

Answer 33

it is a CSS specific class that helps you select nested elements or special elements (such as odd/even) examples include nth-child or hover

Question 34

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

Answer 34

ROW

Question 35

What is the default flex-wrap of a flex container

Answer 35

no wrap, they will remain on a single line

Question 36

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

Answer 36

static (normal)

Question 37

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

Answer 37

it does not affect it

Question 38

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

Answer 38

actually it does nothing, unless top, left, bottom, or right properties are also included

Question 39

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

Answer 39

it takes the element OUT of the normal document flow, so that it can be repositioned as you please

Question 40

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

Answer 40

it will appear inside the next closest non static parent ( parents usally set to position relative)

Question 41

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

Answer 41

by setting its parent container’s position to relative

Question 42

What are the four box offset properties?

Answer 42

top, right, bottom ,left