Every now and then, a front-end developer finally starts a new project with all new ideas and new things to learn, and every now and then, there is quite an innocuous problem standing before him: basic CSS styles. They are often obnoxious and unreal to work with without tweaking.Most of you have probably written some resets in the past or have used tools like normalize.css, but even after applying their fixtures to your project, you still are getting the same things, because they actually don’t reset much, but make it the same across different browsers. What I'm about to show you is a sample of some copy-paste code that you can insert to every one of your project’s root css and be much happier instead of rewriting the same styles over and over again in the hope that sometimes those basic ones will play out good and be finally useful.The problemAs we’re not in 2010, your website probably shouldn’t look like this:Instead, you probably have some Figma project in your pocket that you want to precisely copy from and be good with it. So, what is the problem here? Going with Default styles will make the CSS that same thing it is feared — an uncontrollable monster that will ruin your workday. But with that, there’s some solution to prevent random behavior of default styles that nobody on the planet can tell you about and understand what is happening when you need to debug your code.Default margins and paddingsBy default, almost all elements in html have their default margin and padding properties. Because of that, by default our website looks good, but when we try to change it a little, we get to know the fact that we should go to MDN and check the actual sizings, then calculate them and only then apply our styles. This is really cumbersome, that’s why almost all the people do this basic thing:* { margin: 0; padding: 0;}With that, every element will have their defaults removed so that we can use our own.CSS’s box-modelAs you probably already know, every element’s size in CSS is calculated through Box Model. It is a concept that combines element’s margin, padding and border sizes to calculate a total amount of space that the element will take in the DOM:And by default there is a small catch to this behavior: without any intrusions, a border width will be calculated with margin — outside of the element! So, say, we have a square like this:which is exactly 300x300px in size as we wanted, but then we slap some border on it: border: 10px solid red;And whoosh! it becomes 320x320px in size because of combined size of borders. And there, we would need to decrease actual size of the box for it to fit the parameters we are entrusted with.To escape that, there’s a simple solution:*,*::before,*::after { box-sizing: border-box;}Setting box-sizing property to border-box for every element will make sure that border is calculated with paddings, i.e. inside of element.List pointsWhile in some cases they can be of use, mostly those bullet points are obsolete, especially if you use your

for a different cases instead of just listing everything vertically in one line.So, we have prepared our dangerous weapon to strike down those circles:li { list-style-type: none;}But with that there’s a catch: accessibility. As it turns out, with this style applied, some of screen readers wont be able to understand our list as list properly and won’t notify the user about it. To fix this, we can from now on apply that to our lists:
ButtonsButtons have two issues: look and interactivity. Before I start, can you answer this simple question: what cursor is showing when you’re hovering on button by default? Right — DEFAULT, this thing:So how intuitively would you guess, when you’re hovering over something resembles a button on any website and your cursor doesn’t change? As for myself, I would probably think that button is unclickable and pass it through.Another problem is default button’s characteristics: a border and a background that changes on hover. As those stylings are probably not what you would want in your website, lets reset them too.So, in total:button { background: none; border: none; outline: none; cursor: pointer;}Now, our button is ready to be styled and have a nice cursor when you hover on it!LinksDo you know the best thing about typography in web development? It is inheritable, which means everything you apply to a parent container will be passed to its children like this:

some text

some more text

some even more text

and.parent { color: green; font-size: 1.4rem; font-weight: 600;}will result in:The most nice use case of this feature would be theming: when you apply some style to your body element, be it color or font-size, all other elements on your website that are not styled individually will have it. The magic of CSS!But lets say we are making some website with themes and we have a theme applied to our body like that to make every other text’s color red::root { --red-color: red;}body { color: var(--red-color);}As our project grows, we will probably have two or three themes and it would be really easy to switch them by just changing the value of body’s element color. So, what’s the issue? Look:That Link guy is really cool with its tricks — it completely avoided inheriting our default color of text, like we were expecting! And adding to that, it has its obnoxious underline with it that would probably scare people away. So, lets fix him up!a { text-decoration: none; color: inherit;}Now, visited or active or hovering or not, all links on our website will keep their own styling curbed:ImagesHave you noticed the awesome bigness of Ryan Gosling we have in our introduction? Id say he needs to be a bit smaller. So, as a proper man with proper intentions, I say that the image of him will be in the
with class of ryan-box that I would style like that:.ryan-box { width: 30rem;}What? That man wouldn’t shrink under such attacks:So, what are we missing?By default, images in HTML take the full size if not specified otherwise. So, I can cure this problem by saying:img { max-width: 100%;}And voila! Now he’s okay:And adding to that, lets specify that all images should be on new line by default, because by standard they are inline elements and will stay on the same line as text, which Ive rarely seen in my life:img { max-width: 100%; display: block;}TablesLets say that we have some table with a random message encoded in it by ChatGPT:Aside from awful styling of no css being applied, there is something you should know about: monsters dwell in the dark!If we apply some coloring to our table like that, making the table dark and cells light:table { background-color: black;}th, td { background-color: white;}We would see that there’s some things a normal eye wouldnt:What are those lines? Where do they come from? As it turns out, the basic html table has inbuilt borders, but they are white by default and hence invisible to us. What’s more important, these things take space and actually ruin your work like box-sizing mentioned previously. So, what can we do?By that simple line:border-collapse: collapse;We remove all borders from the table so they dont borther us anymore:There’s one more small thing: contrary to images, tables don’t span fully adjusting to their parent’s width. To fix it, we’ll apply that:table { width: 100%; border-collapse: collapse;}ConclusionIn the end we have not-so-small list of properties:* { margin: 0; padding: 0;}*,*::before,*::after { box-sizing: border-box;}button { background: none; border: none; outline: none; cursor: pointer;}a { text-decoration: none; color: inherit;}ul { list-style-type: none;}img { max-width: 100%; display: block;}table { width: 100%; border-collapse: collapse;}And a better-looking, much more controllable website:That’s all! Thanks for reading!Basic CSS resets to apply in every app was originally published in ITNEXT on Medium, where people are continuing the conversation by highlighting and responding to this story.