Chapter 4

Question 1

What is block elements? Examples?

Answer 1

It takes up the full width of the space available to them and force the next element down to the new ling on the page.

<div> <h1> </h1><p> tags</p></div>

Question 2

What is inline elements? Examples?

Answer 2

Elements only take up space needed to display their content.

<img></img> <span> <a> </a></span>

Question 3

What are the four different positioning properties?

Answer 3

Top, bottom, left and right properties

Question 4

What are the three values for overflow property?

Answer 4

overflow: scroll;
overflow: hidden;
overflow: visible;

Question 5

What is visible overflow?

Answer 5

It is the default value for all elements. And it allows the content to flow outside of its container element.

Question 6

What is hidden overflow?

Answer 6

Content inside of an element that takes up more space than the dimensions of the element will not be visible in the browser window.

Question 7

What is CSS?

Answer 7

CSS stands for Cascading Style Sheets because styles are usually defined in a separate file or sheet and are read from top to bottom. The latest standard for CSS is CSS3, which also contains all of the older CSS styles and is therefore considered backwards compatible

Question 8

CSS internal, external and inline?

Answer 8

Internal= CSS styles can be inserted directly inside the start and end tags of an HTML document using tags

Inline styles are applied directly inside an elements start tag by using the style attribute. Inline styles affect only the element containing the style attribute. Inline styles use a different syntax than internal and external styles. Since the styles are applied directly within an elements start tag, it is not necessary to specify what tag should be selected.

Question 9

What are CSS rules?

Answer 9

A rule consists of two parts: a selector (what is to be styled), and a declaration block.

The declaration block contains one or more declarations used to style the selector. Each declaration consists of a CSS property, the selector attribute to be changed and a value, the desired value of the attribute.

Question 10

How to type comments in css?

Answer 10

Anything between forward slash and asterisk /* and forward slash */ will not be rendered by the browser.

/This is a CSS comment/

Question 11

What are the common types of CSS selectors>

Answer 11

Classes and IDs.

Question 12

What is an ID selector?

Answer 12

IDs uniquely identify one element in a document, such as id=”firstName” for the First Name form field. IDs can only be applied one time in a document and elements can only have one ID assigned to it.

ID value is prefixed with the # sign

Question 13

What is a class selector?

Answer 13

You use a class to identify one or more elements to be styled in the same manner, such as a group of elements that needs to be in small print or a specific color. Classes can be applied to multiple elements in a document and multiple classes may be applied to an element.

Class value is prefixed with . sign.

Question 14

What is not allowed when using class and ID selector?

Answer 14

Class and ID selector names cannot start with a number and cannot include spaces or special characters.

Question 15

What are CSS text properties?

Answer 15

text-align:center;
text-decoration:underline;
text-indent:50 px;

Question 16

What are CSS font properties?

Answer 16

font-family
font-size
font-style
font-weight

Question 17

What are the four states of Hyperlinks?

Answer 17

Unvisited
Visited
Hover
Active

Question 18

What is a pseudo-classes?

Answer 18

Pseudo-classes assign a style only when the selector is in a certain state. In this case, the pseudo-class is added to the <a> anchor selector.</a>

Question 19

What are CSS text properties?

Answer 19

text-align:center;
text-decoration:underline;
text-indent:50 px;

Question 20

What are CSS font properties?

Answer 20

font-family
font-size
font-style
font-weight

Question 21

What are the four states of Hyperlinks?

Answer 21

Unvisited (link)
Visited
Hover
Active

Question 22

What is a pseudo-classes?

Answer 22

Pseudo-classes assign a style only when the selector is in a certain state. In this case, the pseudo-class is added to the <a> anchor selector.</a>

a: link
a: visited
a: hover
a: active</a>

Question 23

What is inline elements?

Answer 23

Inline elements only take up as much space as required to hold the data in them and will be placed on the screen horizontally. The <img></img>, <span> and <a> elements are considered inline-elements because they only take up the space needed to display their content. For example, placing two <img></img> tags next to each other will appear on the same line as long as there is available space.</a></span>

Question 24

What is block elements?

Answer 24

Block elements take up the full width of the space available to them and force the next element down to a new line on the page. The <div>, <h1> and </h1><p> tags are block elements because they will force any element or content following them down to the next line on the page.</p></div>

Question 25

what is margin CSS property?

Answer 25

It is used to define space on all sides surrounding an element.

you can use the margin-top, margin-bottom, margin-left, and margin-right properties

Question 26

What is float property?

Answer 26

Floating is used mainly for images and layouts to float an element to the left or right boundaries of its containing element

float: left;
float: right;

Question 27

What are four positioning properties?

Answer 27

The top, bottom, left, and right properties can be used to position elements, but there are also four different types of positioning that will alter how the properties behave.

Static positioning
Relative Positioning
Fixed positioning
Absolute positioning

Question 28

What is Static positioning?

Answer 28

Positioning is set by default to static positioning which positions elements according to the normal flow of the page. Static positioning is not affected by the top, bottom, left, and right properties.

Question 29

What are three types of content overflow?

Answer 29

overflow: scroll; (more contents will be placed in a scroll box)
overflow: hidden;content inside of an element that takes up more space than the dimensions of the element will not be visible in the browser window
overflow: visible; (default value for all elements; allows the content to flow outside of its container element)

Question 30

What is relative positioning?

Answer 30

Relative positioning is used to set the position of an element relative to where it is in the normal flow of the document and is not positioned according to the browser window. For example, if position is set to relative and the top property is set to 100px, as in the example below, then the element will be displayed 100px from the top of the element that it is next to. When relative positioning is used, values for top, bottom, left, and right can also be set to negative values. In addition, relative positioned elements will keep the space that is allotted to the element in the regular flow of the document but will be positioned according to the top, bottom, left, and right properties that are set for the element.
Relative Positioning: position:relative;
top:100px;

Question 31

What is absolute positioning?

Answer 31

Absolute positioning places an element relative to the HTML document. Recall that fixed positioning places an element relative to the browser window and not the HTML document. For example, when using absolute positioning you are instructing the element to stay in that position in the document regardless of the other content.
Absolute Positioning: position:absolute;

Question 32

What is z-index?

Answer 32

If it is set to z-index:-1;

The content will appear behind another content.

Question 33

What are three types of content overflow?

Answer 33

overflow: scroll;
overflow: hidden;
overflow: visible;

Question 34

What is a content overflow?

Answer 34

Content overflow defines what happens when there is more content than the element can contain