**CSS (**Cascading Style Sheets)
Q.1 What is Box Model in CSS & Which CSS Properties are part of it ? (2 Marks)
The box model in css represents how elements are structured and rendered.It defines the layout of the element by considering them as boxes.
It consists of the following css properties.
a. content/element (text, images, or other embedded media)
b. padding
c. border
d. Margin
Visualization of box model
+----------------------------------------------------+
| Margin |
| +----------------------------------------+ |
| | Border | |
| | +-------------------------------+ | |
| | | Padding | | |
| | | +-----------------------+ | | |
| | | | Content | | | |
| | | +-----------------------+ | | |
| | +-------------------------------+ | |
| +----------------------------------------+ |
| Margin |
+----------------------------------------------------+
Q.2 What are the Different Types of Selectors in CSS & what are the advantages of them? (2 Marks)
Different types of selectors.
Simple selector: It selects elements based on id , class and tag name.Combined Selector: It selects the element based on a combination of different selectors.Pseudo-class selectors: It is used to define a specific state of an element.Pseudo-element selectors: It is used to define specific parts of an element.
Q.3 What is VW/VH & How its different from PX? (2 Marks)
VW and VH are the relative units of measurement in css that are based on the size of the viewport or the browser window.
It is different from pixels as pixels are absolute value whereas VW/VH are relative values that vary with size of viewport.
Q.4 What's difference between Inline, Inline Block and block ? (3 Marks)
Inline: It does not allow to set height and width . Eg. <span>. It can have padding and margin in horizontal direction.
Inline block: It allows to set height and width. Eg. <button>, <input> <select>
Block: It starts with new line and it takes whole width and height according to need and that allow to set height and width. It can have padding and margin in all four directions. Eg. div ,p , h1, li ,etc.
Q.5 How is Border-box different from Content Box? (2 Marks)
Both Border and content box are the property of box sizing. The main difference is that
i.ContentBox are default property that elaborates the size when border is added which results the content becomes smaller.
Ii. where as border-box property makes an adjustment to fit the border to its actual width and height.
Q.6 What’s z-index and How does it Function ? (2 Marks)
Z-index is a property in css used to control vertical stacking order of element allowing you to specify which element appear in front or behind others on web pages.
It’s functions are .
It works with positioned element only.
Element with greater z-index comes on the top.
Q.6 What’s Grid & Flex and difference between them? (5 Marks)
Css grid is a two dimensional grid layouts for organizing and aligning elements on webpages.
It is suited for creating complex grid-like design such magazine styled layout with different cells.
It provides use of grid ,grid-axes, frid-template to give better structure.
Flexbox is a one dimensional layout for arranging elements within a container.
It is best suited for creating flexible and dynamic layout such as navigation , menu , card .
It provides powerful alignment properties like justify-content , align-item ,etc.
Q.7 Difference between absolute and relative and sticky and fixed position explain with example. (5 Marks)
Absolute: It is property that allows to position an element relative to its parent element or, if no parent present then relative to its body.
It uses property like top, left , right , bottom.
Relative: It is a property that allows to position an element relative to its normal position.
But the element stills occupies space in the document flow and other element are aware of it.
It does not affect the position of other element.
Fixed: It is a property that allows to position an element relative to its position of its browser window / parent element
Sticky: It is a hybrid of a relative and fixed . Here element behaves relatively until it reached a defined top/bottom/left/right after it becomes fixed . It becomes fixed to the container until it reaches the threshold again.
Q.12 What are Pseudo class in CSS & How its different From Pseudo Elements? (2 Marks)
Pseudo class selector selects and style element based on their state or position within the document .
It is denoted by single colon (:) Example :hover , element:first-child
Pseudo element select and style specific parts of element separately from actual content.
It is denoted by two colons (::) Example ::after ::before
7. How can you center an element horizontally and vertically using CSS?
You can center an element horizontally by using margin: 0 auto; and center it vertically by using a combination of display: flex; and align-items: center; on a parent container.
Practice
Certainly, creating a project can be an excellent way to strengthen your CSS skills and impress during an interview. Here's a detailed plan for the project: