CSS ESSENTIAL 1

Question 1

an element is ____ if the total height of an element is equal to its content and width is equal to the full width of the document (e.g. div,p,)

Answer 1

Block element

Question 2

Can Block element contain either inline or block element(s)?

Answer 2

Yes!

Question 3

an element is _____ if the total height of an element is equal to its content and width is <b>equal to the width of the content</b>, and only contain inline

Answer 3

inline element

Question 4

is there an extra space between block element and another element?

Answer 4

yes! there is extra space after an inline element

Question 5

How could you define a margin/padding of an HTML element? What are different ways to define margin/padding?

Answer 5

https: //i.imgur.com/kmketX6.png
1. to define a margin: of an element start at the top, right, bottom, left(clockwise)
2. Other ways are:
2. 1. margin: Top, [left and right], bottom;
2. 2 margin: [top and bottom], [left and right]

Question 6

div{
width:950px;
margin:0 auto;
}
So what is this snippet code does and its purpose?

Answer 6

set the width to 950px, and top and bottom margin to 0 and left and right to auto;

Question 7

What is max-width? how to use it?

Answer 7

It is a CSS property that sets the max-width of an object. if the contained element is larger that containing the element, then the height of the containing element is adjusted to fit the contained element.

Question 8

<a>dfdf</a>

a{
  padding:20px;
  border:solid black;
}
what is the purpose of padding for this scenario?

Answer 8

<a> is more clickable</a>

Question 9

https://1drv.ms/u/s!Ant-SckYa-42g8s3bDYngWihVKeDAg

Why this happen after float:left is applied?

Answer 9

If you float an element, the precending elements will wrap on it and the natural flow of elements are changed?

Question 10

what clear:both does

Answer 10

to not wrap the precending elements to the floated element

Question 11

use of overflow:auto; and overflow:hidden;

Answer 11

to clear float for the parent of floated element. floated element overflows to the containing element. clearfix also clear the floated element(search it)

Question 12

what #container does here

https://jsfiddle.net/testoftheyearend/opk24agb/10/

Answer 12

to not wrap preceding element use container (#container)

width should be defined

Question 13

https://jsfiddle.net/testoftheyearend/smta9L2r/1/

Answer 13

CLEARFIX

Question 14

The ________ property specifies the display behavior (the type of rendering box) of an element.

Answer 14

display

Question 15

What is the total width and height, content box width and content height?

div.content-box {
width: 160px;
height: 80px;
padding: 20px;
border: 8px solid red;
background: yellow;
}

.content-box {
box-sizing: content-box;
}

Answer 15

/* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
Content box width: 160px
Content box height: 80px */
content is the defualt box-sizing property value which means the borser, margin, padding are not included to the overall size of content box(width and height).

Question 16

What is box-sizing:border-box; ? what is the total height and width? what is content box width and box height?

div.border-box {
width: 160px;
height: 80px;
padding: 20px;
border: 8px solid red;
background: yellow;
}

.border-box {
box-sizing: border-box;
}

Answer 16

/* Total width: 160px
Total height: 80px
Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
The content, border, and padding are already included to total width and height

Question 17

What this css rules does
@font-face{
font-family:'Museo Sans';
src:url(museo-sans.ttf);
}
body{
font-family: 'Museo San', Arial, Sans-serif;
}

Answer 17

used to set the font name and link to the font files

Question 18

The ___ can be specified by <b>relative values</b> which are calculated based on the nearest ancestor element. <b>Absolute values</b> are not affected by an ancestor elements

Answer 18

font-size

Question 19

What is the default font size of an html element

Answer 19

16px

Question 20

Relative to the ancestor element font-size

Answer 20

em

Question 21

Relative to the root element font size which is the html tag

Answer 21

rem

Question 22

https://jsfiddle.net/testoftheyearend/v59ypofs/

what does it do?

Answer 22

important a font file to an HTML element

Question 23

CSS PROPERTY USES TO DEFINE SPACE BETWEEN LINES

Answer 23

LINE-HEIGHT

Question 24

ADD AND REMOVE UNDERLINE?

Answer 24

TEXT-DECORATION

Question 25

CHANGES THE CASING OF A TEXT

Answer 25

TEXT-TRANSFORM

Question 26

What are block and inline elements

Answer 26

Block means the elements aligns vertically, and inline means align horizontally. thre are also block-inline and none property value . Inline does not allow changing the height and width.

Question 27

explain this shit of code

https://jsfiddle.net/testoftheyearend/wbt5snfe/9/

Answer 27

You can add space to the left and right on an inline element(and bottom and top margin), but you cannot add height to the top or bottom margin of an inline element.

Question 28

inline-block vs inline

Answer 28

in inline-block you can set the width and height, and respect the top and bottom margin/padding but inline does not.

Question 29

inline-block vs block

Answer 29

the fucking bastard does no add line break for every element