CSS

Question 1

How Many ways CSS can be applied to an HTML?

Answer 1

3 ways

Question 2

What are the different ways of applying CSS to HTML?

Answer 2

External , Internal and Inline

Question 3

Is there any precedence order in which the styles are applied between different ways?

Answer 3

There is no such precedence order applied. Instead , the styles are applied in the order which they are declared

Question 4

What are different types of selectors in CSS?

Answer 4

Class selector , Id selector , Element Selector

Question 5

How does CSS work?

Answer 5

CSS works much like Waterfall

Question 6

Does Class selector have more specificity than Element Selector?

Answer 6

Yes

Question 7

What properties are inherited ?

Answer 7

Font styles generally Typography is inherited

Question 8

rgb() vs rgba()

Answer 8

The difference is that rgba(alpha) provides an extra parameter for transparency that ranges between 0 and 1.

Question 9

What is rem?

Answer 9

rem implies one root element(default size of browser).It always sets the value relative to the root value

Question 10

What is em?

Answer 10

em implies element and it sets the value relative to parent value

Question 11

When to use em’s instead of rem’s?

Answer 11

When we set em on the element and the element does not look at the parent instead it looks after itself then we use em’s

Question 12

Is Body Element always 100% ?

Answer 12

Body element grows the size of the content . To make it occupy 100% by default and grow size based on the content , use min-height:100vh property

Question 13

what is css reset?

Answer 13

using wildcard *{} makes apply the properties inside *{} to be applied instead of default browser properties like margin , padding etc

Question 14

What is border-box box sizing?

Answer 14

It includes padding and border along with the content when content size(width=400px) is specified . For example when width is 400 px , it includes padding:48px, border:4px(2*2px) and width size: 348px . On the other hand, if we use content-box then overall size will be 400+48+4 pixels . Content-size(width-box):400px will remain as it is and other properties will work as specified

Question 15

Will margin be set for a div on left and right side by default?

Answer 15

No , we should use auto to see effect. Like , margin: 3rem auto

Question 16

How to make a div as circle in CSS ?

Answer 16

By using border radius and setting it to about Half of the div’s height or width , we can make a square div into circle .

Question 17

What does inherit keyword do?

Answer 17

Inherit keyword allows inheriting the value of the parent element.

Question 18

What does text-transform do?

Answer 18

Using this , we can set text to capitalize , uppercase , lowercase etc

Question 19

What does text-align do?

Answer 19

It aligns the text to specified setting . like left makes the text align to left . like justify aligns the text to be uniform

Question 20

What does text-indent do?

Answer 20

It gives some indentation(space) at the start of the text

Question 21

What does line-height do?

Answer 21

Sets the height of line

Question 22

What does letter-spacing do ?

Answer 22

Sets the spacing between letters

Question 23

Are paragraph elements <p></p> block level?

Answer 23

Yes , they are block level

Question 24

How are block level elements arranged?

Answer 24

Block level elements are stacked one above the other.we can apply margin,padding etc to all the sides. Also they take up the complete width of the container where as inline elements take the wisth of the content it holds

Question 25

What does “display:inline-block” would do?

Answer 25

The element stays inline and supports block properties

Question 26

What does “clear” property do?

Answer 26

Empty Div with class=”clear” simply clears the floating content to the left side or right side or both depending on clear:left or clear: right or clear:both and makes the content start in the new line.

Question 27

Will the size of the container having both float and some other element depend on What element(float/other element )

Answer 27

It depends on the size of the other element. To keep the container on par with the Float element use “display:flow-root”.This fixes the resizing issue.

Question 28

What “break-inside:avoid” inside columns will do?

Answer 28

It will avoid the element from splitting while expanding or reducing the screen size

Question 29

What does “column-span:all” do?

Answer 29

It allows the element to be spanned across all columns

Question 30

What does “whitespace:nowrap” do?

Answer 30

It will wrap the whole element as one

Question 31

What are the possible values for position property?

Answer 31

Absolute , Fixed , Relative and Sticky

Question 32

How does absolute works?

Answer 32

It picks the ancestor with “relative” property closest to it.