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.
Learn Box Model in CSS: Click Here
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.
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.
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
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.
Learn Flexbox in CSS: Click Here
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.
Question-25: What is CSS specificity and how does it affect style precedence?
Answer: CSS specificity determines which CSS rule takes precedence when multiple rules target the same element. Specificity is calculated based on the combination of selectors used, with higher specificity values taking precedence.
Question-26: What is the "Pseudo-elements" in CSS? Can you give examples?
Answer: Pseudo-elements are used to style specific parts of an element, such as the first letter or the first line of a block-level element. Some Pseudo Elements are ::before, ::after, ::first-letter, and ::first-line.
Question-27: Explain the concept of "Cascading" in CSS.
Answer: Cascading in CSS refers to the order of importance when applying conflicting styles to an element. It follows the cascade hierarchy, which includes the importance of the style rule, specificity, and source order.
Question-28: What is the CSS "opacity" property, and how does it differ from "visibility: hidden"?
Answer: The opacity property controls the transparency of an element, with values ranging from 0 to 1. Where 0 is fully transparent and 1 is fully opaque. visibility: And hidden hides an element, but it still takes up space in the layout.
Question-29: What is the CSS "pseudo-class" and give examples of commonly used pseudo-classes?
Answer: A pseudo-class is used to define a special state or condition of an element. Some Pseudo Classes are :hover (for mouse hover), :focus (for keyboard focus), :active (when clicked), and :nth-child(n) (for selecting elements based on their position in a parent).
Question-30: What is the purpose of the CSS "!important" rule, and when should it be used?
Answer: The !important rule is used to give a style declaration the highest specificity, making it override other conflicting styles. It should be used sparingly as a last resort, as it can make CSS harder to maintain.
Question-31: Explain the concept of "CSS vendor prefixes." Why are they used, and can you provide examples?
Answer: Vendor prefixes are used to apply experimental or browser-specific CSS features. They were historically used to ensure compatibility with different browsers. Here are the some example of CSS vendor prefixes including -webkit- (for WebKit-based browsers), -moz- (for Mozilla Firefox), and -ms- (for Microsoft Internet Explorer).
Question-32: What is the CSS "box-sizing" property, and why is it important for layout design?
Answer: The box-sizing property determines how the total width and height of an element are calculated. Understanding and using box-sizing: border-box; is crucial for creating consistent and predictable layouts, especially in responsive design.
Question-33: What is the difference between "margin:auto" and "text-align:center" for horizontally centering an element?
Answer: margin:auto; is used to horizontally center a block-level element within its parent container, while text-align:center; is used to horizontally center inline or inline-block content within the element itself. margin:auto; is the recommended approach to cetering a block-level element.
Question-34: How can you create a responsive design using CSS media queries, and what are some common breakpoints for responsive layouts?
Answer: Responsive design is achieved by using media queries to apply different styles based on screen size. Common breakpoints include @media (max-width: 768px) for tablets and @media (max-width: 480px) for mobile devices.
Question-35: What is the "CSS specificity" of the following selectors: ID selector, class selector, and element selector?
Answer: ID selector has the highest specificity, followed by class selector, and then element selector. For example, #myID has higher specificity than .myClass, which has higher specificity than div.
Question-36: Explain the difference between "position: relative;" and "position: absolute;" in CSS.
Answer: When you apply position: relative; to an element, it is positioned relative to its normal position. And when you apply position: absolute;, an element is positioned relative to its closest positioned parent or the viewport if none exist.
Question-37: What is the CSS "clip-path" property, and how can it be used to create shapes or masks?
Answer: The clip-path property is used to create shapes or masks by specifying a clipping path. You can use values like circle(), polygon(), or url() to define the shape or path.
Question-38: Explain the CSS concept of "inheritance." Which CSS properties are inherited by default, and which are not?
Answer: Inheritance in CSS means that certain properties of an element can be inherited from its parent. Common inherited properties include font properties (e.g., font-family, font-size), and non-inherited properties include layout properties (e.g., width, height).
Question-39: What is CSS specificity, and how does it affect the selection of styles in a web page?
Answer: CSS specificity is a way to determine which CSS rule applies to an element when multiple rules target the same element. Specificity is calculated based on the combination of selectors used, with higher specificity values taking precedence.
