DEV Community

loading...
Cover image for Universal CSS properties everyone must use.

Universal CSS properties everyone must use.

gautham495 profile image Gautham Vijayan Updated on ・3 min read

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 ;  

}

Enter fullscreen mode Exit fullscreen mode

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;
}

Enter fullscreen mode Exit fullscreen mode
  • 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 :

CSS-universal-selectors

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.

My Other Articles:

Discussion (9)

pic
Editor guide
Collapse
bugs_bunny profile image
Derek Oware

You shouldn't remove the default outline unless you have a custom style for :focus and :active for the elements

Collapse
felipperegazio profile image
Felippe Regazio

yeah, 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...

Collapse
gautham495 profile image
Gautham Vijayan Author

Thank you for sharing the link!

Collapse
gautham495 profile image
Gautham Vijayan Author

Thanks for addressing that issue, I will change that right away!

Collapse
dror profile image
Mr. D

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.

Collapse
gautham495 profile image
Gautham Vijayan Author

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.

Collapse
winstonpuckett profile image
Winston Puckett

I always forget about box-sizing and then have to re-look it up. Thank you!

Collapse
gautham495 profile image
Gautham Vijayan Author

Thank you for liking my work!