Remove all styling with one line of CSS

Happy Friday! To celebrate the coming weekend, let's learn how we can remove all styling from an element with a single line of CSS.

We do this with the 'all' property, which does as it sounds, and controls all (or everything). It's as if you selected every single property for your selector.

Then, we can reset everything with the 'unset' value, which unsets the values, changing them either to inherit or initial, whichever their default is. This effectively strips all formatting away from your selector and gives you a fresh start to style with.

BROWSER SUPPORT

#fiveminutefriday

---

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

[ga]

Kevin, Thank you again and again, this is the first time I know about "ALL: Unset, and place-items property", you always bring new stuff, Thanks a million.

[busyrand]

This is COMPLETELY different than what I was expecting. I learned a lot from this. Very helpful CSS rule!

[phoenixempire]

aka King of CSS, Love and admiration from Nepal, love you i have been working as a frontend developer since 3 years and i say your video after a long time and i owe your videos a lot, you have our respect sir Thank you

[oroogheneigbide]

i only needed 90 seconds of this video ... thanks again Kevs!

[Hubson]

Oh man! Thanks! It also cancels out <h1> formating! Very helpful!

[andrenonso]

Hey Kev, a big follower of your channel. Learning fast a lot of things I really would have taken more time to know in Web dev. Continue the good work.

[davi_singh]

Oh wow... have been writing CSS for over 3 years and had no idea about the `all` property... have used unset a couple of times but its usually for backgrounds... Thanks @Kevin Powell

[inayathkhan]

Very useful tutorial, Thank you Kevin

[Owenoooo]

This is amazing for Wordpress! This doesn’t have always a great style. This is a way to reset all and get rid of shitty styles. So I can restyle it!!

[tomlemanh]

THAT'S SOME HIGH LEVEL WIZARD STUFF!

[iggstr]

4 years on and this vid is still imparting knowlege to noobs like me - thanks for taking the time and making the effort to help us all 👏

[fabnricioorellana]

Thank you so much, defenitely unexpected!!

[milosleng]

this came in very handy. I wrote 3000 lines of CSS code on a zommed screen thinking I was giving good values for all my text elements (no, I did not use any variables but I took my lesson). Now I am going to reset all my text tags, so hopefully it works!!!:D I hope I can use it on a single property like font-size!

[jfabianluevanorodriguez]

Hi there... I´ve a question... as far as I understand .. you can put that property in html and everything is unset and ready togo???

[lifealliancegroup]

WOW, that was fun, I just used it the first time I watched this lecture, that was amazing, and yes, this <button> was really getting to me how it would remove it's default styling, this worked perfectly !

[G-TS]

Hey Main..I would love your help it will take me from a big trouble..

So I do have a website in a theme and the pages are build with elementor so
I tried to transfere the pages with the elementor but when ever i do that also some stylish setting from the previous theme are inserted so my new theme changes appearance...is any way to reset the stillish setting of my new theme to default ?.

[parasarora]

I have to say sir...now your videos are much cool looking...specially that fast forward coding in between made it look cool and awesome. as always content is great👌👌👌

[LorenHelgeson]

I typically use the following. Very simple, a bit rough, but it hasn't failed me once for the past six or so years.

* {
box-sizing: border-box;
margin: 0;
outline: 0;
padding: 0;
}

It doesn't cover everything, though, so I may want to look into this unset property as well.

[seeit]

role=button? do you think this is good practice on a button element when guides say specifically not to add roles to items that already have a role assigned unless you want to CHANGE the role. If you want to avoid issues for a button on a form and be properly accessible using roles, use type=button.

[julienbongars]

Very interesting but without support for IE11 or edge, it's going to be very difficult to use this... Thanks for the info though! Will keep my eyes on it.