What is CSS?
CSS stands for Cascading Style Sheets. It is used to style and layout web pages, including design elements such as color, font, and spacing.
What are the different types of CSS?
There are three types of CSS:
- Inline CSS
- Internal CSS
- External CSS
What is the difference between class and id selectors in CSS?
idis used to target a unique element, and it must be unique within a page.classcan be reused multiple times in different elements.
What is the CSS box model?
The CSS box model defines rectangular boxes generated for elements in the document tree. These are: content, padding, border, and margin
How do you include a CSS file in an HTML document?
You can include a CSS file using the <link> tag inside the <head> section
<link rel="stylesheet" type="text/css" href="styles.css">
What is the z-index in CSS?
The z-index property specifies the stack order of the elements. Elements with higher z-index are displayed in front of elements with a lower z-index.
What is the difference between absolute, relative, fixed, and sticky positioning?
absolute: Positioned relative to the nearest ancestor.relative: Positioned relative to its normal position.fixed: Positioned relative to the browser window.sticky: Acts likerelativeuntil a defined scroll point, then behaves likefixed.
What are pseudo-classes in CSS?
Pseudo-classes define a special state of an element. Examples include :hover, :focus, :active, :nth-child(), etc.
What are media queries in CSS?
Media queries are used to apply different styles based on conditions such as screen width, device type, or orientation. Example:
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
What is the difference between display: none and visibility: hidden?
display: none: The element is removed from the document flow, and it takes up no space.visibility: hidden: The element is still in the document flow, but it is invisible.
What is Flexbox in CSS?
Flexbox is a layout model in CSS that allows you to more easily create complex layouts by distributing space along rows or columns.
What is CSS Grid, and how is it different from Flexbox?
CSS Grid is a two-dimensional layout system that allows creating complex layouts using rows and columns. Unlike Flexbox, which is one-dimensional (either row or column), Grid can handle both dimensions at the same time.
How can you center a block element horizontally and vertically?
- For horizontal centering:
margin: 0 auto; - For vertical centering: Use Flexbox or Grid or apply
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
What are ::before and ::after pseudo-elements?
::before and ::after are used to insert content before or after an element’s content. They are commonly used to add icons, quotes, or other visual elements.
Explain the position: sticky; property.
position: sticky;allows an element to “stick” to a defined location as the user scrolls next to it. This is useful for creating sticky headers or navigation bars.
What are the differences between inline, inline-block, and block elements?
block: Elements that take up the entire width and start on a new line.inline: Elements that take up only as much width as necessary and do not start on a new line.inline-block: Elements that behave like inline elements but allow block-level styling.
What is the purpose of the !important declaration in CSS?
The !important rule is used to give a CSS rule higher priority than other conflicting rules. This is generally avoided as it may cause maintenance problems.
What is the difference between em, rem, px, and % in CSS?
em: Related to the font-size of its parent element.rem: Related to the font-size of the parent element (<html>).px: Absolute units, fixed in size.%: Relative to the parent element’s size.
Explain the calc() function in CSS.
The calc() function is used to perform calculations to set CSS property values, such as width: calc(100% - 20px).
What are CSS Animations and How Do You Create Them?
CSS animations allow smooth changes of styles over time. You create them using the @keyframes rule and apply the animation with the animation property.
