Elevate Your Design with CSS Mastery
Sharpen Skills, Ace Interviews
CSS : Frontend Development Interview Questions
CSS refers to Cascading Style Sheets. It is used to style and beautify the document written in HTML or XML. It controls the layout, colors, fonts, and overall visual appearance of a webpage.
CSS can be applied using inline styles (within the HTML element), internal styles (within a <style> tag in the <head> section), and external styles (linked through a separate CSS file).
The CSS box model represents the structure of an HTML element as a rectangular box. It consists of margins, borders, padding, and the content itself, influencing the element's size and positioning.
A div can be centered horizontally by setting its width and applying margin: 0 auto;. Alternatively, Flexbox or Grid layout can be used for more advanced centering.
CSS selectors are patterns used to select and style HTML elements. Examples include element selectors (p), class selectors (.className), ID selectors (#idName), and attribute selectors ([attributeName]).
position: relative; positions an element relative to its normal position, while position: absolute; positions it relative to its nearest positioned ancestor or the initial containing block.
Flexbox is a layout model that provides a flexible way to align and distribute space among items within a container. It works by setting display: flex; on a container, allowing its children to align flexibly.
Responsive design can be achieved using media queries to apply different styles based on the screen size, Flexbox/Grid for flexible layouts, and relative units like percentages or em for scaling elements.
A CSS preprocessor (e.g., SASS, LESS) is a tool that extends CSS with variables, nested rules, and functions, making the stylesheet more maintainable and easier to work with.
em units are relative to the parent element's font size, while rem units are relative to the root element's font size. rem is often preferred for consistent scaling across the entire document.
The z-index property determines the stack order of positioned elements (elements with a position value other than static). Elements with a higher z-index value are displayed on top of those with a lower value.
A grid layout is created by setting the display: grid; on a container. You can define rows and columns using properties like grid-template-columns and grid-template-rows.
Example:
CSS Code:
.container {
display: grid;
grid-template-columns: 1fr 2fr;
}
Pseudo-classes are keywords added to selectors that specify a special state of the selected elements. Common pseudo-classes include : hover, :active, :focus, and :nth-child().
Pseudo-elements are used to style specific parts of an element. Common pseudo-elements include ::before, ::after, and ::first-letter.
display: none; removes an element from the document flow, meaning it won't occupy any space. visibility: hidden; hides the element but still takes up space in the layout.
Media queries allow you to apply different styles based on the device's characteristics, such as screen width.
Example:
Code in CSS:
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
The overflow property controls what happens when content overflows an element's box. It can be set to visible, hidden, scroll, or auto.
A background image is applied using the background-image property.
Example:
Code in CSS:
body {
background-image: url('background.jpg');
}
margin is the space outside the border of an element, while padding is the space inside the border, between the border and the content.
The float property positions an element to the left or right of its container, allowing other content to wrap around it.
CSS transitions allow you to change property values smoothly (over a given duration).
Example:
Code in CSS:
div {
transition: width 2s;
}
div:hover {
width: 300px;
}
CSS animations are created using @keyframes to define the animation and the animation property to apply it to an element.
Example:
Code in CSS:
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
div {
animation: example 5s infinite;
}
The box-shadow property adds a shadow to an element's frame. Example:
Code in CSS:
div {
box-shadow: 10px 10px 5px grey;
}
The transform property allows you to apply 2D or 3D transformations to an element, such as rotating, scaling, or translating it.
You can center items both vertically and horizontally using Flexbox by applying the following styles to the container:
Code in CSS:
.container {
display: flex;
justify-content: center;
align-items: center;
}
Inline elements do not start on a new line and only take up as much width as necessary. Inline-block elements are similar but can have width and height. Block elements start on a new line and take up the full width.
The opacity property sets the transparency level of an element. A value of 1 is fully opaque, while 0 is fully transparent.
A CSS dropdown menu is typically created using a combination of the hover pseudo-class and the display property.
Example:
Code in CSS:
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
}
.dropdown:hover .dropdown-content {
display: block;
}
The @import rule is used to import one CSS file into another. It must be placed at the top of the CSS file, before any other rules.
Example:
Code in CSS:
@import url('styles.css');
A responsive navigation bar can be created using Flexbox, media queries, and possibly JavaScript for toggling.
Example of a basic Flexbox layout:
Code in CSS:
.navbar {
display: flex;
justify-content: space-between;
}
@media (max-width: 600px) {
.navbar {
flex-direction: column;
}
}
visibility: hidden; hides the element but keeps it in the document flow, while display: none; removes it from the document flow entirely.
CSS variables (custom properties) are used to store values that can be reused throughout the CSS. They are defined with a -- prefix and accessed with the var() function.
Example:
Code in CSS:
:root {
--main-color: #3498db;
}
h1 {
color: var(--main-color);
}
A sticky element can be created using position: sticky;, which allows the element to stick to the top or bottom of the viewport as you scroll, based on the specified offset.
The background-size property specifies the size of the background image. It can be set to auto, cover, or contain, or defined using specific values.
The calc() function is used to perform calculations to determine CSS property values. It allows mixing units, such as pixels and percentages, within the calculation.
Rounded corners can be created using the border-radius property.
Example:
Code in CSS:
.box {
border-radius: 15px;
}
The clip-path property is used to define a clipping region for an element, which controls the visible area of the element.
Example:
Code in CSS:
.circle {
clip-path: circle(50%);
}
max-width sets the maximum width an element can have, while min-width sets the minimum width. These properties are useful for creating responsive designs.
Gradients can be created using the background-image property with linear or radial gradients.
Example:
Code in CSS:
.gradient {
background-image: linear-gradient(to right, red, yellow);
}
The text-shadow property in CSS is used to add shadow effects to text.
Example:
Code in CSS:
h1 {
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
} Get in touch
We are here to help you & your business
Timing
9:00 am - 5:00 pm