CSS

Question 1

What is the Box model in CSS? Which CSS properties are a part of it?

Answer 1

A rectangle box is wrapped around every HTML element. The box model is used to determine the height and width of the rectangular box. The CSS Box consists of Width and height (or in the absence of that, default values and the content inside), padding, borders, margin.

Question 2

Actual Content of the box where the text or image is placed.

Answer 2

Content

Question 3

Area surrounding the content (Space between the border and content).

Answer 3

Padding

Question 4

Area surrounding the padding.

Answer 4

Border

Question 5

Area surrounding the border.

Answer 5

Margin

Question 6

How to include CSS in the webpage?

Answer 6

1. External Style Sheet
2. Embed CSS with a style tag
3. Add inline styles to HTML elements
4. Import a stylesheet file

Question 7

The _______ works like a wildcard character, selecting all elements on a page. In the given example, the provided styles will get applied to all the elements on the page

Answer 7

Universal Selector

Question 8

This selector matches one or more HTML elements of the same name. In the given example, the provided styles will get applied to all the ul elements on the page

Answer 8

Element Type Selector

Question 9

This selector matches any HTML element that has an ID attribute with the same value as that of the selector. In the given example, the provided styles will get applied to all the elements having ID as a container on the page

Answer 9

ID Selector

Question 10

The ____ selector also matches all elements on the page that have their class attribute set to the same value as the class. In the given example, the provided styles will get applied to all the elements having ID as the box on the page

Answer 10

Class Selector

Question 11

The _____ selector or, more accurately, the descendant combinator lets you combine two or more selectors so you can be more specific in your selection method

Answer 11

Descendant Combinator

Question 12

A selector that uses the child combinator is similar to a selector that uses a descendant combinator, except it only targets immediate child elements

Answer 12

Child Combinator

Question 13

A selector that uses a ______ to match elements based on sibling relationships. The selected elements are beside each other in the HTML

Answer 13

General Sibling Combinator

Question 14

A selector that uses the ____ uses the plus symbol (+), and is almost the same as the general sibling selector. The difference is that the targeted element must be an immediate sibling, not just a general sibling

Answer 14

adjacent sibling combinator

Question 15

The ____ selector targets elements based on the presence and/or value of HTML attributes, and is declared using square brackets

Answer 15

Attribute

Question 16

What is the difference between inline, inline-block, and block?

Answer 16

Block Element: The block elements always start on a new line. They will also take space for an entire row or width. List of block elements are <div>, <p>.

Inline Elements: Inline elements don’t start on a new line, they appear on the same line as the content and tags beside them. Some examples of inline elements are <a>, <span> , <strong>, and <img></img> tags.</strong></span></a>

Inline Block Elements: Inline-block elements are similar to inline elements, except they can have padding and margins and set height and width values.</strong></span></a></p></div>

Question 17

What are the CSS Units?

Answer 17

px, em, pt, percentage (%)

Question 18

What are the differences between adaptive design and responsive design?

Answer 18

Adaptive design focuses on developing websites based on multiple fixed layout sizes.

Responsive design focuses on showing content on the basis of available browser space.

Question 19

What is a z-index, how does it function?

Answer 19

z-index is used for specifying the vertical stacking of the overlapping elements that occur at the time of its positioning. It specifies the vertical stack order of the elements positioned that helps to define how the display of elements should happen in cases of overlapping.

Question 20

To place an element exactly where you want to place it. absolute position is actually set relative to the element’s parent. if no parent is available then the relative place to the page itself (it will default all the way back up to the element).

Answer 20

Absolute

Question 21

“Relative to itself”. Setting position: relative; on an element and no other positioning attributes, it will no effect on its positioning. It allows the use of z-index on the element and it limits the scope of absolutely positioned child elements. Any child element will be absolutely positioned within that block

Answer 21

Relative

Question 22

The element is positioned relative to the viewport or the browser window itself. viewport doesn’t change if you scroll and hence the fixed element will stay right in the same position.

Answer 22

Fixed

Question 23

Static default for every single page element. The only reason you would ever set an element to position: static is to forcefully remove some positioning that got applied to an element outside of your control

Answer 23

Static

Question 24

Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned

Answer 24

Sticky

Question 25

What are the CSS position properties?

Answer 25

Absolute
Relative
Fixed
Static
Sticky