CSS Flashcards
Interviews questions about css
What is the difference between CSS and CSS3?
CSS (Cascading Style Sheets) is the fundamental language used for styling web pages. CSS3 refers to the latest version of CSS, introducing new features like rounded corners, gradients, animations, and more.
What are the selectors in CSS?
Selectors in CSS are patterns used to select and style HTML elements. Common selectors include element selectors (div, p), class selectors (.classname), ID selectors (#idname), attribute selectors ([attribute=value]), etc.
What is a media query in CSS?
A media query in CSS allows you to apply different styles based on specific device characteristics such as screen width, height, orientation, or resolution. It’s commonly used for responsive web design.
What are the different positions in CSS?
CSS offers various positioning properties like static (default), relative, absolute, fixed, and sticky. These properties control how an element is positioned within its parent container or the viewport.
What is BOM (Box Object Model) in CSS?
BOM in CSS refers to the Box Model, which describes how elements are displayed as boxes with content, padding, border, and margin areas. Understanding the Box Model is essential for layout and spacing in CSS.
What is the difference between PX, EM, and REM units in CSS?
px (pixels) is an absolute unit relative to the screen pixel density.
em is a relative unit based on the font-size of its parent element.
rem (root em) is a relative unit based on the font-size of the root (<html>) element.
What is Flexbox in CSS?
Flexbox is a layout model in CSS designed for creating flexible and efficient layouts. It allows you to align and distribute space among items within a container, handling complex alignment and sizing scenarios.
What is a pseudo-selector in CSS?
A pseudo-selector in CSS is used to select elements based on their state or position in the document. Examples include :hover, :first-child, :nth-child(), :not(), etc.
How to make a website responsive?
To make a website responsive, use media queries, fluid layouts, flexible grids (like Flexbox or CSS Grid), relative units (em, rem), and optimize images for different screen sizes.
What are breakpoints for viewport-responsive devices?
Breakpoints are specific screen widths where the layout of a website changes to adapt to different devices (e.g., mobile phones, tablets, desktops). Common breakpoints include @media (max-width: 768px), @media (min-width: 1024px), etc.
Why do we use box-sizing in CSS?
box-sizing is a CSS property that determines how the total width and height of an element are calculated, including padding and border. By default (box-sizing: content-box;), padding and border are added to the width/height. Using box-sizing: border-box; includes padding and border within the specified width/height, simplifying layout calculations.
