The CSS Box Model describes how elements are structured and how space is calculated around them. Each element is composed of content, padding, border, and margin. Understanding the box model is essential for controlling layout, spacing, and element sizes.
/* Box Model Example */
div {
width: 300px; /* content width */
padding: 10px; /* space inside border */
border: 5px solid black; /* border thickness and style */
margin: 20px; /* space outside border */
}
Semantic HTML elements clearly describe their meaning and purpose to both the browser and the developer. They improve accessibility, SEO, and make your code easier to read and maintain.
<!-- Examples of semantic elements -->
<header>Site header</header>
<nav>Main navigation</nav>
<article>Blog post</article>
<footer>Site footer</footer>
The position property in CSS determines how an element is positioned in the document. Here’s a breakdown of all five position values:
top, right, bottom, or left with static.top, left, etc. It's moved relative to its original position.position set to relative, absolute, or fixed). If none exists, it’s positioned relative to the <html> element.relative until it reaches a certain scroll position, then it sticks in place like fixed.
/* Examples */
.static {
position: static;
/* Default behavior; no top/left will apply */
}
.relative {
position: relative;
top: 10px; /* Moves down 10px from its original position */
}
.absolute {
position: absolute;
top: 0;
left: 0;
/* Positioned relative to the nearest positioned ancestor */
}
.fixed {
position: fixed;
top: 0;
left: 0;
/* Always stays in the same position on screen */
}
.sticky {
position: sticky;
top: 0;
/* Scrolls until it reaches the top, then stays fixed */
}
There are multiple ways to center a <div> both horizontally and vertically in CSS. Here are the most common and effective methods:
/* Flexbox centering */
.container {
display: flex;
justify-content: center; /* horizontal centering */
align-items: center; /* vertical centering */
height: 100vh; /* full viewport height */
}
/* CSS Grid centering */
.container {
display: grid;
place-items: center; /* shorthand for justify-items and align-items */
height: 100vh;
}
/* Absolute positioning with transform */
.container {
position: relative;
}
.centered-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Horizontal centering only */
.centered-box {
width: 200px;
margin: 0 auto;
}
Among all these, Flexbox and Grid are the most modern, responsive, and widely used techniques today.
Pseudo-classes in CSS are keywords added to selectors that define a special state of the selected elements — such as when a user hovers over an element, when a form input is focused, or when an element is the first child in a parent.
They allow styling elements dynamically without needing to add or remove classes manually in HTML or JavaScript.
/* Common pseudo-class examples */
a:hover {
color: red; /* Applies when the user hovers over a link */
}
input:focus {
border-color: blue; /* Applies when the input is focused */
}
li:first-child {
font-weight: bold; /* Targets the first <li> in a list */
}
p:nth-child(2) {
color: green; /* Targets the second child paragraph */
}
button:disabled {
opacity: 0.5; /* Styles a disabled button */
}
Some common pseudo-classes include: :hover, :focus, :active, :visited, :first-child, :last-child, :nth-child(), and :disabled.
Class selectors target multiple elements and are reusable, whereas ID selectors target unique elements and should be used once per page.
/* Class selector */
.my-class {
color: green;
}
/* ID selector */
#my-id {
color: blue;
}
Responsive web design ensures your website looks and works well across all screen sizes — from desktops to tablets and mobile devices. This is achieved using:
Below is a media query example that adjusts layout for smaller screens:
/* Responsive layout using a media query */
.container {
display: flex;
flex-direction: row;
}
@media only screen and (max-width: 600px) {
.container {
flex-direction: column; /* Stack items vertically on small screens */
}
}
Frameworks like Bootstrap or Tailwind CSS also help in building responsive websites quickly with prebuilt responsive utilities.
These values define how elements behave in the document flow and how they occupy space:
<span>, <a>, <strong><div>, <p>, <section><button> or a <span> with display: inline-blockThe z-index property in CSS controls the vertical stacking order of elements — determining which elements appear in front of others when they overlap.
It only works on elements that have a position value other than static (e.g., relative, absolute, fixed, or sticky).
A stacking context is formed when an element is positioned and has a z-index value or certain properties (like opacity < 1, transform, filter, etc.). Each stacking context is isolated — z-index values only work within the same context.
/* Example */
.box1 {
position: relative;
z-index: 5;
}
.box2 {
position: relative;
z-index: 10; /* Will appear above box1 */
}
Note: Elements with higher z-index will appear on top — but only within the same stacking context. Creating a new stacking context can isolate an element from overlapping with others.
Optimizing CSS improves page load time, rendering speed, and overall user experience. Here are best practices to optimize CSS performance:
PurgeCSS, UnCSS, or built-in bundler features to eliminate dead styles.Tools like Chrome DevTools, Google Lighthouse, and CSS Auditing tools can help identify performance issues.