When I came across youtube tutorials, I stumbled upon a CSS concept called universal css properties. Lets learn about them in this tutorial.
*,*:before, *:after {
box-sizing: border-box ;
padding: 0 ;
margin: 0 ;
}
First lets talk about CSS's universal selector property.
This * selector applies to each and every element in the html file.
So thats why these properties are called Universal CSS properties.
:before , :after are pseudo selectors.
Now coming to box-sizing: border-box,
Border-box tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements.
- developer.mozilla
In my words I would say that border-box will make sure that if your width and height of the element is 100px and 100px respectively, it stays that way no matter what padding, margin or border you add.
Before using this property in my CSS files, I faced a lot of issues when I had a div within div and when I added a border it would exceed the outer div width.
It was very annoying and this property fixed all of that. Just include this in your workflow, And you will see the magic.
Then coming to padding:0 and margin:0,
Every element in html file has some default padding and margin, so inorder to remove that, we use these two properties.
Then these were the universal CSS properties given by youtubers and Udemy instructors.
I would like to give mine on top of these properties.
*,*:before,*:after{
padding:0;
margin:0;
box-sizing:border-box;
}
input,textarea{
outline:none
}
button,input[type="submit"]{
outline:none;
border:none;
}
button:hover,input[type="submit"]{
cursor:pointer;
transform: translateY(-0.25em);
}
li,a{
text-decoration:none;
}
When you click on a button or an input of submit button we get an ugly outline in it, So I removed it. You can also remove this property when you want to have border and outline which suits your design purposes.
When button is hovered I have added cursor:pointer and given a small animation.
Then lists(li) and anchor links(a) have text-decoration and I have removed it.
You can get the complete source code here :
You can also play along with my CSS properties also!
So thats all for universal selectors.
My Personal Experience:
Always include the above mentioned CSS properties whenever you start a new project. Remember to include them, It will save a lot of time and actual headache for you in both long run and short run.
Thank you for reading!
If you like this article, Unicorn it! Heart/Like this one and save it for read later.
Top comments (8)
You shouldn't remove the default outline unless you have a custom style for
:focusand:activefor the elementsyeah, here is a great article about how to keep outlines only when navigating with the keyboard (using only css)
css-tricks.com/the-focus-visible-t...
Thank you for sharing the link!
Thanks for addressing that issue, I will change that right away!
as far as I know, this is actually bad practice since it forces 1000's of un-needed CSS values into the DOM
so -
a quick & dirty fix for your personal project ? OK.
a default for production sites ? NO way.
Thats a very good point and insight given by you. I wrote this article mainly for beginners who struggle with understanding the fundamental CSS concepts. And yes, frameworks take care of all of the issues as you mentioned, But knowing how basic CSS properties work before hoping on to CSS frameworks is a very important thing for beginners. Thank you for your valuable comment.
I always forget about box-sizing and then have to re-look it up. Thank you!
Thank you for liking my work!