Remove browser default styling

Question

Is there a way or <!DOCTYPE> declaration such as XHTML or HTML4 that would remove the default CSS styling on elements?

score 7 · Accepted Answer · edited May 23 '17 at 11:51

7

Doctype is not used for styling. There are two prominent ways of removing all the styles and uniforming the default look.

normalize.css https://necolas.github.io/normalize.css/
reset.css http://meyerweb.com/eric/tools/css/reset/

add these styles to your css before your stylesheet to uniform you layout to a certain degree, across different browsers. What is the difference between Normalize.css and Reset CSS?

edited May 23 '17 at 11:51

Community

1
1

answered Jul 13 '16 at 20:57

Yasin Yaqoobi

1,888
3
27
38

"add these styles to your css before your stylesheet and it removes all the styling" — No, they don't. They set different values for the styles. They can't remove them. – Quentin Jul 13 '16 at 20:58
@YasinYaqoobi I loaded both in, but still default browser styles are being applied. – Jordan Davis Jul 13 '16 at 21:02
@JordanDavis post your code / screenshot so we can see exactly what's going on. You can always use general selects like p,div,button, etc to override the styles manually, or you can just do * like quentin suggested. – Yasin Yaqoobi Jul 13 '16 at 21:08
You don't need to see the code its generalize to any and every element, can the browser render it with no properties, or at least override the defaults. The `DOCTYPE` would control the rendering of the properties depending on the version just let you know by the way – Jordan Davis Jul 13 '16 at 21:13

score 3 · Answer 2 · answered Oct 27 '21 at 17:56

3

I personally have been using the code below for all of my projects till date.

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

Also here an article if you are looking for a complete reset of some kind http://meyerweb.com/eric/tools/css/reset/

answered Oct 27 '21 at 17:56

Pratik Thorat

403
3
7

1

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/late-answers/30194443) – Joeri Oct 27 '21 at 21:31
@Joeri I agree. But I have no idea which styles does he want to be eliminated so I just posted a solution which is used by most developers. Thanks for your suggestions though. I will keep this in mind. – Pratik Thorat Oct 28 '21 at 14:38
forgot colours outlines and all the other random junk the browser does by default too. – Brad Jul 24 '22 at 07:20

score -1 · Answer 3 · answered Jul 13 '16 at 20:55

-1

No.

Elements have to have a default styling. It doesn't make sense for most properties to lack any value at all.

Take display for instance. If display wasn't set, how would the element render? The same way as if it was display: none? Then none would just be the default value.

If you don't like a default value for a property for a given element, then use a stylesheet to set a value you do like.

answered Jul 13 '16 at 20:55

Quentin

914,110
126
1,211
1,335

I understand that, but element namespaces like `table` are semantic but the default styling applied I don't like, instead of using `grid` or some other made up tag I'm wondering if there is a way to keep the namespaces the same. – Jordan Davis Jul 13 '16 at 20:57
@JordanDavis — "If you don't like a default value for a property for a given element, then use a stylesheet to set a value you do like." So set `table { something something something }` – Quentin Jul 13 '16 at 20:58
There aren't *that* many elements, it's unlikely that you'd need to change every element (heck, it is unlikely that you'd need to change every element you actually use), and the universal selector (`*`) exists. – Quentin Jul 13 '16 at 21:02
There are quite a few that need to be changed (table elements, form elements, progress, etc...) and yes I think the world knows about the `*` universal selector. Simply what I'm asking is an easy way to override/remove the default styling, and clearly you don't know a way, other than manually doing every one, am I right? – Jordan Davis Jul 13 '16 at 21:06
1

That's because the whole idea of someone being able to suggest a way to change the default values of every property on every element from "something you don't like" to "something you do like" requires that someone to have a huge amount of insight into your personal tastes. As I said in the answer, you can't have *no* styling at all, it has to look like something (or look like nothing, and even "nothing" is a style). – Quentin Jul 13 '16 at 21:09
I'm not even talking about styling the elements to some personal taste, obviously that is the end goal, but reseting them to nothing with no properties is what I want, so I have a blank slate to be styled into my own personal taste, yes. – Jordan Davis Jul 13 '16 at 21:12
And as I have said, repeatedly, "a blank slate" doesn't really exist. Various people have their own ideas about what a blank slate is (and they tend not to agree with each other), Yasin linked to a couple in their answer, but when those ideas are implemented, it just comes down to writing a stylesheet that sets different values for the properties they want to change (which is what I said you have to do when I wrote the answer in the first place). – Quentin Jul 13 '16 at 21:15
using a custom HTML tag is what I would call a blank slate like ``,``,``, where nothing is applied to it. But yes I think there is no way to do that, thats why I'm asking the question, if anyone knows a way. – Jordan Davis Jul 13 '16 at 21:17
You may be right, but lets see if anyone else answers and knows a way. – Jordan Davis Jul 13 '16 at 21:18
@JordanDavis — Making up invalid HTML doesn't give you a blank slate. Default styles are applied to the element. https://www.evernote.com/l/AAMOY2ksRLpGyI7xT-L7isLHZz4-cy2cmxE If you want to apply those styles to an element in a real HTML document, then you can … and you can use the universal selector if you want to apply them to every element at once. – Quentin Jul 13 '16 at 21:21
Invalid HTML doesn't matter when you developing web application, there is no web-crawler that needs to index your page, and or can't even get past the login page. – Jordan Davis Jul 13 '16 at 21:22
No, just real people with real browsers, and real screen readers, and obscure browser plugins. That's not my point though. – Quentin Jul 13 '16 at 21:24

score -3 · Answer 4 · answered Jul 13 '16 at 21:08

-3

There are several ways to do that, depending on what you want to do.

You can override a style in case using !important, for example:

div{ display: inline !important }

On buttons and inputs:
Input{
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none /not sure if it works on IE/
}

answered Jul 13 '16 at 21:08

edvilme

570
7
16

This doesn't override all the properties, even if you used the universal selector with `-webkit-appearance` there are defaults like `height:, margin:, etc..` – Jordan Davis Jul 13 '16 at 21:14
Sure, but you need to specify them, for example input{-webkit-appearance: none; height 20px !important; margin: 0px !important;} – edvilme Jul 13 '16 at 21:15

Remove browser default styling

4 Answers4

Linked