CSS Interview Questions
1. CSS 1.0 and 2.0
A: CSS 1.0 introduced basic styling features such as fonts, colors, and text alignment. CSS 2.0 added more complex functionalities like positioning (absolute, relative, fixed), media types for different devices, and the concept of the box model.
A: The four media types are screen, print, speech, and all. These allow developers to specify styles for different devices or outputs.
A: The CSS box model consists of four elements: content, padding, border, and margin. It describes how elements are rendered on the screen, with content at the core, surrounded by padding, a border, and margin.
A: CSS 2.0 introduced positioning techniques such as absolute, relative, fixed, and static, allowing developers to control element placement on the page.
A: Yes, CSS 2.0 is backward-compatible with CSS 3.0, meaning styles from CSS 2.0 can be used alongside CSS 3.0 features.
2. CSS3 Backgrounds
A: Multiple background images can be applied using the background-image property by separating each URL with commas, like this: background-image: url(image1.jpg), url(image2.png);
A: The background-clip property defines how far the background image extends within an element. It can be set to border-box, padding-box, or content-box.
A: The background-size property specifies the size of background images. It can accept values such as cover, contain, or specific dimensions like 100px 200px.
A: The background-origin property specifies the positioning area of the background image. It can be set to border-box, padding-box, or content-box.
A: The background-attachment property is used to create parallax effects by setting the background to fixed, making the background image stay in place while scrolling.
3. CSS3 Text Effects
A: The text-shadow property allows you to add shadow effects to text, specifying the horizontal and vertical shadow offsets, blur radius, and color.
A: You can create 3D text effects using text-shadow with multiple layers of shadow to simulate depth, usually combined with transform properties for better visual effect.
A: The word-wrap property forces long words to break and wrap onto the next line, ensuring that content remains within its container.
A: The text-overflow property determines how overflowed text content is displayed. You can use values like ellipsis to show three dots (…) when the text overflows.
A: Text stroke can be applied using the -webkit-text-stroke property, primarily supported in WebKit-based browsers like Chrome and Safari.
4. CSS3 Fonts
A: The @font-face rule allows you to load custom fonts from a server or locally and use them in your website without relying on the user’s installed fonts.
A: You can specify fallback fonts by listing multiple font families in the font-family property, where the browser uses the next available font if the first one isn’t supported.
A: The font-style property controls the style of the text (e.g., normal, italic), while font-weight adjusts the thickness of the text (e.g., normal, bold).
A: The font-variant property controls the use of small caps. It can be set to normal or small-caps
A: The font-size-adjust property preserves the legibility of text when switching between fonts by adjusting the size relative to the font’s aspect value.
5. CSS3 2D Transforms
A: The transform property in CSS3 allows you to apply 2D transformations such as rotating, scaling, translating, or skewing elements.
A: To rotate an element by 45 degrees, use the transform property: transform: rotate(45deg);
A: The scale() function in the transform property resizes an element. For example, transform: scale(2); doubles the size of the element.
A: The translate() function moves an element along the X and Y axes without affecting the document flow. Example: transform: translate(50px, 100px);.
A: The skew() function distorts an element along the X and/or Y axes. For instance, transform: skew(20deg, 10deg); skews the element by 20 degrees on the X-axis and 10 degrees on the Y-axis.
6. CSS3 3D Transforms
A: 2D transforms manipulate elements on a flat plane (X and Y axes), while 3D transforms add depth by introducing the Z-axis for rotation and perspective.
A: You can rotate an element in 3D using the rotate3d() function, specifying values for the X, Y, and Z axes: transform: rotate3d(1, 1, 0, 45deg);
A: The perspective property defines how far the 3D elements are from the viewer, affecting the depth and appearance of the transformed elements.
A: You can use the translate3d() function to move an element along the X, Y, and Z axes: transform: translate3d(10px, 20px, 30px);.
A: The transform-style property specifies whether child elements should preserve their 3D position (preserve-3d) or be flattened (flat).
7. CSS3 Transitions
A: A CSS transition allows the gradual change of property values over a specified duration. For example, transition: all 0.5s ease; animates all property changes over 0.5 seconds.
A: You can specify properties by listing them in the transition-property. For example, transition-property: opacity, background-color;.
A: The transition-timing-function defines the speed curve of the transition. Common values include ease, linear, ease-in, and ease-out.
A: The transition-delay property defines how long to wait before the transition starts. Example: transition-delay: 2s;.
A: Yes, you can apply multiple transitions by separating each transition with commas, like this: transition: opacity 0.5s, transform 0.5s;.
8. CSS3 Animations
A: Transitions animate a property change between two states, while animations use keyframes to define multiple stages of a property’s change over time.
A: You define keyframes using the @keyframes rule, specifying the stages (like 0% and 100%) and the properties to animate at each stage.
A: The animation-iteration-count property specifies how many times an animation should repeat. Use infinite for continuous looping.
A: You can delay the start of an animation using the animation-delay property: animation-delay: 3s;.
A: The animation-direction: alternate property causes the animation to reverse direction every time it cycles, creating a back-and-forth effect.
9. CSS3 Borders
A: Rounded borders can be applied using the border-radius property. For example, border-radius: 10px; will create rounded corners with a radius of 10px.
A: The border-image property allows you to use an image as a border instead of the usual solid lines. You define the image and how it should be sliced and stretched around the element.
A: The box-shadow property creates a shadow around the entire element, while border defines the edge of the element itself. Shadows can add depth or float effects.
A: The border-collapse property is used in tables to control whether the borders of adjacent cells collapse into a single border or remain separated.
A: Yes, you can use CSS3 gradients in borders by combining the border-image property with a gradient background, like this: border-image: linear-gradient(red, blue) 30;.
10. CSS3 Multiple Columns
A: You use the column-count property to specify the number of columns. For example, column-count: 3; divides the content into three columns.
A: The column-gap property defines the space between columns in a multi-column layout. For example, column-gap: 20px; sets a 20px gap between columns.
A: You can control the width of columns using the column-width property, which sets the ideal width for columns. The number of columns will automatically adjust based on available space.
A: The column-rule property adds a line between columns, much like a border. You can specify its width, style, and color: column-rule: 2px solid black;.
A: The column-span property allows an element to span across multiple columns. For instance, column-span: all; makes the element stretch across all columns.
11. CSS3 User Interface
A: The resize property allows users to resize an element (typically a textarea) by dragging its corner or edge. You can set it to both, horizontal, vertical, or none.
A: You use the cursor property to change the cursor’s appearance. For example, cursor: pointer; changes the cursor to a hand icon when hovering over an element.
A: The outline-offset property specifies the distance between an element and its outline, creating space between the outline and the element.
A: The box-sizing property determines how the total width and height of an element are calculated. With box-sizing: border-box;, padding and borders are included in the element’s width and height.
A: The nav-index property controls the tabbing order for keyboard navigation in interactive elements. Elements with lower nav-index values are focused first.