CSS stands for Cascading Style Sheets. It is used to style and design HTML elements on a webpage.

CSS is used to control colors, fonts, spacing, layout, alignment, and overall look of a webpage.

• Inline CSS
• Internal CSS
• External CSS

Inline CSS is written inside the HTML element. Internal CSS is written inside the style tag in the head section. External CSS is written in a separate .css file.

A CSS selector is used to target HTML elements so styles can be applied to them.

• Element selector
• Class selector
• ID selector
• Universal selector
• Group selector

Class can be used for multiple elements, while id should be unique for one element.

CSS syntax includes a selector, property, and value. Example: p { color: red; }

The color property is used to change the text color of an element.

The background-color property is used to set the background color of an element.

The CSS box model includes content, padding, border, and margin. It defines how space is handled around elements.

Margin creates space outside the border. Padding creates space inside the border around the content.

In content-box, width and height apply only to content. In border-box, width and height include padding and border.

The display property defines how an element is shown, such as block, inline, inline-block, flex, or grid.

Block elements start on a new line and take full width. Inline elements stay in the same line and take only required width. Inline-block allows width and height while staying inline.

The position property controls how an element is positioned, such as static, relative, absolute, fixed, and sticky.

Relative positioning moves an element from its normal position. Absolute positioning places an element relative to its nearest positioned parent.

z-index controls the stack order of elements. Higher z-index appears in front of lower z-index.

The overflow property controls what happens when content is too large for its container, such as visible, hidden, scroll, or auto.

Pseudo-classes define a special state of an element, like :hover, :focus, and :first-child.

Pseudo-class targets the state of an element, while pseudo-element targets a specific part of an element, like ::before or ::after.

Specificity decides which CSS rule is applied when multiple rules target the same element. Inline styles have higher priority, then id, class, and element selectors.

!important gives a CSS rule higher priority than normal rules, but it should be used carefully.

Flexbox is a one-dimensional layout system used to align and distribute items in a row or column.

CSS Grid is a two-dimensional layout system used to design rows and columns together.

Flexbox is best for one-dimensional layouts, while Grid is best for two-dimensional layouts.

Media queries are used to apply different styles based on screen size, resolution, or device type.

Responsive web design means creating webpages that adjust properly across mobile, tablet, and desktop screens.

px is fixed size, % is relative to parent, em is relative to parent font size, and rem is relative to root font size.

Transition is used to create smooth changes between property values, like hover effects.

An element can be centered using flexbox, grid, margin auto, or text-align depending on the element type and layout requirement.

I use flexible layouts, relative units, media queries, responsive images, and modern layout systems like flexbox and grid.

High specificity makes CSS harder to override, maintain, and debug, especially in large projects.

I keep selectors simple, avoid unnecessary nesting, reduce duplicate styles, reuse classes, and organize CSS properly.

visibility: hidden hides the element but keeps its space. display: none removes the element from layout completely.

The transform property is used to move, rotate, scale, or skew elements.

Opacity affects the whole element including its content. RGBA affects only the color transparency.

I use proper naming conventions, reusable classes, component-based structure, variables, and separate files for better maintainability.

CSS variables are custom properties that store reusable values, like colors or spacing, using --name syntax.

Mobile-first design means writing CSS for small screens first, then adding styles for larger screens using media queries.

No. CSS is a style sheet language used to describe the presentation of HTML documents.

Usually, z-index works on positioned elements, meaning elements with position other than static.

Yes. Margin can be negative and is sometimes used for special layout adjustments.

Inline CSS is not preferred for large projects because it reduces reusability and maintainability.

No. Flexbox and Grid serve different purposes. Flexbox is better for one-dimensional layouts and Grid is better for two-dimensional layouts.