Media Queries: Making Web Pages Responsive
A Media Query is a CSS technique used to apply specific styles only when certain conditions are met, such as a user's screen size, resolution, or orientation. It is the backbone of Responsive Web Design.
/* Default style for mobile screens */
body {
background-color: white;
font-size: 14px;
}
/* Style applied ONLY when the screen is 768px wide or larger (Tablets/Desktops) */
@media (min-width: 768px) {
body {
background-color: lightblue;
font-size: 18px;
}
}
Transitions
A Transition allows you to change property values smoothly over a specified duration, instead of having the change happen instantly. It makes user interactions (like hovering over a button) feel professional and polished.
The 4 Main Properties
- transition-property: The name of the CSS property you want to animate (e.g., background-color).
- transition-duration: How long the animation takes (e.g., 0.3s).
- transition-timing-function: The speed curve of the effect (e.g., ease-in-out).
- transition-delay: A pause before the animation starts.
.btn {
background-color: blue;
color: white;
padding: 10px 20px;
transition: background-color 0.3s ease;
}
.btn:hover {
background-color: darkblue;
}
Position
The position property defines how an element is positioned on the web page. There are five main positioning types:
The Five Positioning Types
1. Static: The default value. Elements follow the normal page flow. Top/bottom/left/right properties have no effect.
2. Relative: Positioned relative to its original, normal position. Moving it doesn't affect surrounding elements.
3. Absolute: Positioned relative to its nearest positioned ancestor (an ancestor with absolute, relative, or fixed position). It is completely removed from the normal page flow.
4. Fixed: Positioned relative to the browser viewport window. It stays in the exact same place even when you scroll (like a sticky chat widget).
5. Sticky: Toggles between relative and fixed depending on the user's scroll position (perfect for navigation bars).
.parent-box {
position: relative; /* Acts as an anchor for the absolute child */
width: 300px;
height: 300px;
}
.child-badge {
position: absolute;
top: 10px;
right: 10px; /* Sits perfectly in the top-right corner of the parent */
}
rem vs em
Both rem and em are relative units used for sizing fonts, padding, margins, and layouts. They are much better for accessibility than fixed px (pixels).
- rem (Root EM): Relative strictly to the root element's font size (the <html> tag). If the root font size is 16px, then 1rem = 16px, and 2rem = 32px. It remains consistent everywhere.
- em: Relative to the font size of its immediate parent element (or the element itself when used for margins/padding). It cascades and can compound.
html {
font-size: 16px; /* Root size */
}
.parent {
font-size: 20px;
}
.child-one {
font-size: 2rem; /* 2 x 16px = 32px (Ignores parent, looks at root) */
}
.child-two {
font-size: 2em; /* 2 x 20px = 40px (Looks at parent font size) */
}