Nội dung text CSS Interview Questions and Answers for Freshers.pdf
Visit: www.geekshelp.in for content related to Computer Science and Programming CSS Interview Questions and Answers for Freshers Question-1: What is CSS? Answer: CSS stands for Cascading Style Sheets. CSS is a stylesheet language which is used to describe the presentation, layout and formatting of a HTML document. Question-2: What is the purpose of CSS? Answer: The main purpose of CSS is to style the webpage which is created using a markup language. It makes easier to control the layout, design, and visual aspects of a website. Question-3: How do you include CSS in an HTML document? Answer: CSS can be included in an HTML document using three methods: i) inline, ii) internal (embedded), and iii) external. External CSS is the most common and recommended method to include CSS in an HTML document. Question-4: What is the difference between class and ID selectors in CSS? Answer: Class selectors are used to apply styles to multiple HTML elements, and ID selectors are used to apply styles to a single, or a unique HTML element on the page. IDs are supposed to be unique and classes can be used multiple times. Question-5: What is the "box model" in CSS? Answer: The box model in CSS describes how elements are rendered in terms of content, padding, borders, and margins. It mainly consists of content-box, padding- box, and border-box models. Question-6: Explain the concept of CSS specificity. Answer: CSS specificity determines which style rules are applied when multiple conflicting rules target the same element. Specificity is calculated based on the type of selector (ID, class, tag), and the more specific selector takes precedence.
Visit: www.geekshelp.in for content related to Computer Science and Programming Question-7: What is a pseudo-class in CSS? Can you give an example? Answer: A pseudo-class is used to define a special state of an HTML element. For example, :hover is a pseudo-class that applies styles when the mouse pointer is over an element, such as changing its color. Question-8: What is the "float" property in CSS, and how does it work? Answer: The float property is used to make an element float to the left or right within its container. This is often used for creating layouts with multiple columns. Learn CSS Layout-Float & Clear: Click Here Question-9: What is the "box-sizing" property in CSS? Answer: The box-sizing property determines how the total width and height of an element are calculated. The two common values are content-box (default) and border-box. border-box includes padding and border in the element's total size. Question-10: What is a CSS preprocessor? Give an example of one. Answer: A CSS preprocessor is a scripting language which extends the capabilities of CSS. It allows for variables, nesting, and functions. An example of a CSS preprocessor is SASS (Syntactically Awesome Style Sheets). Question-11: What is responsive web design, and how is it achieved with CSS? Answer: Responsive web design is an approach that makes web pages render well on different devices and screen sizes. Responsive Web Design is achieved using media queries in CSS to apply different styles based on the device's characteristics, such as screen width. Learn Media Query in CSS: Click Here Question-12: What is the importance of the "z-index" property in CSS? Answer: The z-index property controls the stacking order of elements with respect to the z-axis. Elements with higher z-index values appear above those element who have lower values. It is essential for controlling the layout of overlapping elements.
Visit: www.geekshelp.in for content related to Computer Science and Programming Question-13: What is the difference between "em" and "rem" units in CSS? Answer: In CSS both em and rem are relative units. However, em is relative to the font size of its parent element, and rem is relative to the font size of the root (HTML) element. rem is often preferred for more predictable and manageable scaling. Question-14: What is the "clearfix" hack, and why is it used in CSS? Answer: The "clearfix" hack is used to clear floated elements inside a container to ensure proper layout. It's often applied to a parent container to prevent it from collapsing when containing floated child elements. Question-15: What is the "box-shadow" property in CSS? Answer: The box-shadow property is used to add shadow effects to elements. It takes parameters for the horizontal and vertical offsets, blur radius, spread radius, and color of the shadow. Question-16: What is the "display" property in CSS, and what are some of its common values? Answer: The display property controls how an element is rendered on the web page. Common values of display property in CSS are: block, inline, inline-block, none, flex, and grid, among others. Question-17: Explain the difference between "margin" and "padding" in CSS. Answer: Margin is used to create space outside an element. And padding is used to create the space inside an element, and it creates space between the element's content and its border. While the margin is used to create space outside the border and element. Question-18: What is the CSS "position" property, and what are its values? Answer: The position property determines how an element is positioned within its containing element. And the common values of position are static, relative, absolute, and fixed. Learn Positions in CSS: Click Here
Visit: www.geekshelp.in for content related to Computer Science and Programming Question-19: What is the use of "media queries" in CSS, and how are they used? Answer: Media queries are used to apply different CSS styles based on user's device characteristics , such as screen width, height, or orientation. Media Queries are commonly used for creating responsive web designs. Question-20: Explain the concept of "flexbox" in CSS. Answer: Flexbox is a layout model in CSS that allows for the easy alignment and distribution of elements within a container, even when the container's size is unknown or dynamic. Question-21: What is the CSS "transition" property, and how is it used for animations? Answer: The CSS transition property is used to create smooth transitions or animations when a CSS property changes. It specifies the property to transition, duration, timing function, and delay. Question-22: What is the difference between "inline" and "inline- block" elements in CSS? Answer: Inline elements flow within the text content and do not create line breaks, and inline-block elements behave like inline elements but allow to set a width, height, margins, and padding. Question-23: What is the "box-decoration-break" property in CSS, and what is its use? Answer: The box-decoration-break property controls how box decorations (like borders and padding) are applied to fragmented elements, such as multi-column layouts. It can be set to slice or clone. Question-24: What is the purpose of the "transform" property in CSS, and can you give examples of transformations? Answer: The transform property is used for applying 2D and 3D transformations to elements, such as scaling, rotating, skewing, and translating (moving) them.