| Introduction to CSS |
|---|
| Text and Font Styling |
|---|
| Box Model and Layout |
|---|
| Advanced Layout with Flexbox and Grid |
|---|
| Responsive Design |
|---|
| CSS Transitions and Animations |
|---|
Breakpoints
Breakpoints in CSS are specific points defined in the code where the layout of a website changes to better suit the screen size of the device being used. They are used in responsive design to ensure that the website looks good on all devices, from small mobile screens to large desktop monitors.
Example:
/* Default styles for all screen sizes */
body {
font-family: Arial, sans-serif;
background-color: lightblue;
}
/* Styles for screens larger than 600px */
@media (min-width: 600px) {
body {
background-color: lightgreen;
}
}
/* Styles for screens larger than 768px */
@media (min-width: 768px) {
body {
background-color: lightcoral;
}
}
/* Styles for screens larger than 1024px */
@media (min-width: 1024px) {
body {
background-color: lightgoldenrodyellow;
}
}
- The default background color is light blue.
- For screens wider than 600px, the background changes to light green.
- For screens wider than 768px, the background changes to light coral.
- For screens wider than 1024px, the background changes to light goldenrod yellow.
Responsive Units
Responsive units in CSS allow for flexible, fluid layouts that adapt to different screen sizes and resolutions. The most common responsive units are ‘em‘, ‘rem‘, ‘vw‘, ‘vh‘, and ‘%‘
1. 'em'
The ‘em‘ unit is relative to the font size of its closest parent element. If the font size of the parent element is 16px, 1em is equal to 16px.
Example:
/* If the font size of the parent is 16px, this will be 32px */
.parent {
font-size: 16px;
}
.child {
font-size: 2em; /* 2 * 16px = 32px */
}
2. 'rem'
The ‘rem‘ unit is relative to the root element’s font size (‘<html>‘). If the root element’s font size is 16px, 1rem is equal to 16px.
Example:
html {
font-size: 16px;
}
.container {
font-size: 2rem; /* 2 * 16px = 32px */
}
3. 'vw'
The ‘vw‘ unit is relative to the viewport’s width. 1vw is equal to 1% of the viewport’s width.
Example:
.container {
width: 50vw; /* 50% of the viewport's width */
}
4. 'vh'
The ‘vh‘ unit is relative to the viewport’s height. 1vh is equal to 1% of the viewport’s height.
Example:
.container {
height: 50vh; /* 50% of the viewport's height */
}
5. '%'
The ‘%‘ unit is relative to the parent element’s dimensions.
Example:
.parent {
width: 400px;
height: 400px;
}
.child {
width: 50%; /* 50% of the parent width (200px) */
height: 50%; /* 50% of the parent height (200px) */
}
Combining Breakpoints and Responsive Units
Combining breakpoints with responsive units allows for highly adaptable and responsive web designs.
Example:
/* Default styles */
.container {
width: 100%;
padding: 1rem;
}
/* Styles for screens larger than 600px */
@media (min-width: 600px) {
.container {
width: 80%;
padding: 2rem;
}
}
/* Styles for screens larger than 768px */
@media (min-width: 768px) {
.container {
width: 70%;
padding: 3rem;
}
}
/* Styles for screens larger than 1024px */
@media (min-width: 1024px) {
.container {
width: 60%;
padding: 4rem;
}
}
- The container takes up 100% width and has 1rem padding by default.
- For screens larger than 600px, the container width reduces to 80% and padding increases to 2rem.
- For screens larger than 768px, the container width reduces to 70% and padding increases to 3rem.
- For screens larger than 1024px, the container width reduces to 60% and padding increases to 4rem.
Using breakpoints and responsive units together ensures that the layout and design elements adjust fluidly to different screen sizes, enhancing the user experience across all devices.
