Huy Phan• 1,360
@huyphan2210
Posted
Hi, @HoaCTa
- Instead of applying styles directly to the
htmltag, I recommend applying them to thebodytag. Styling the<body>is generally preferred because it directly impacts the visible content, whereas the<html>tag wraps both the<head>and<body>. Since the<body>manages layout and content, it's better suited for styles like padding, margins, and backgrounds. Additionally, many frameworks expect styles on the<body>, offering more flexibility when working with or switching between them. - After doing that, you can center your card by adding
justify-content: centerandalign-items: centerto the body. - Regarding your question about
calc(): The decision to usecalc()depends on your project requirements and personal experience. You can use it for mobile, desktop, or both. I'd suggest observing what others do and experimenting with it (as I have done and continue to do). - For media queries, here’s an example:
/* Default styles - your mobile styles since you're using mobile first approach */
body {
background-color: white;
color: black;
font-size: 16px;
}
/* Media query for screens wider than 1024px */
@media screen and (min-width: 1024px) {
body {
background-color: lightblue;
font-size: 18px;
}
}
When the viewport is 1024px or wider, the background-color changes from white to lightblue, and the font-size changes from 16px to 18px. Since the color: black isn't overridden in the media query, it remains the same. You don’t need to re-write everything nor reset the page or HTML tag to see the CSS changes—just resize your viewport/browser and observe the adjustments.
Hope this helps!
0
