When you're just starting out, CSS can seem like magic. Sometimes even dark. Why are the indents wrong? Why doesn't the width match? Why is the text acting like a wild cat?
Relax. There is a proven way to start any project without pain. Experienced developers almost always start with a set CSS base lines — a kind of mini-shield from chaos.
Let's figure out what these magic 10 lines are and why you should add them to every project.
🎯 1. box-sizing: border-box;
*, *::before, *::after {
box-sizing: border-box;
}Why is it necessary?
By default, CSS calculates the width and height without paddings and borders. It's inconvenient and confusing. With this line, you're telling the browser, "Hey, let's count everything together, as in normal life. "
🧼 2. Remove default indents
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote {
margin: 0;
}Why is it necessary?
Browsers add their own indents. They are different. They are unpredictable. By resetting them, you decide where and how much space there will be.
💡 3. Beautiful default font
body {
font-family: system-ui, sans-serif;
}Why is it necessary?
So you get a neat, readable font, without any hassle. It works on all devices and looks modern.
🔢 4. Convenient line-height
body {
line-height: 1.5;
}Why is it necessary?
The text becomes easier to read. The space between the lines is not just aesthetics, it is eye care.
🧍♂️ 5. Page height = 100%
html, body {
height: 100%;
}Why is it necessary?
If you need something to occupy the entire height of the screen (for example, a background), this is a must. Without it, the "100% height" simply will not work.
📦 6. Improve image behavior
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}Why is it necessary?
Pictures do not go beyond the borders. No more "broken" layouts due to too large media.
🔁 7. Inherit fonts for forms
input, button, textarea, select {
font: inherit;
}Why is it necessary?
Without this line, buttons and form fields will use some font of their own. With this, they look organic in the design.
💨 8. Remove focus outlines in Safari
button {
-webkit-appearance: none;
}Why is it necessary?
Safari likes to make buttons... in its own way. This line helps to align the behavior with other browsers.
🧹 9. Cleaning up the lists
ul[role='list'], ol[role='list'] {
list-style: none;
}Why is it necessary?
When you want to make a list without bullets — for example, a menu or cards — this is a great starting point.
🚫 10. Remove the margin from the body
body {
margin: 0;
}Why is it necessary?
<body> has a built-in indent. It gets in the way, especially on mobile devices. We remove it and get a clean canvas for layout.
📦 Total
All this together — not magic, but just a competent start. If you are too lazy to write it manually every time, create your own basic template. Or just copy these lines to the beginning of each new project.
If you like this approach - simple, to the point and without complicated explanations - you will definitely like the Kodik application. It is created specifically for those who start their journey in programming from scratch. Inside, you'll find HTML, CSS, and JavaScript lessons that explain everything in human language, as if a kind mentor is sitting next to you.
Kodik website - https://itcodik.com/