What is default list styling (CSS)?

Question

On my website I use reset.css. It adds exactly this to list styles:

ol, ul {
    list-style: none outside none;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    font-size: 100%;
    margin: 0;
    outline: 0 none;
    padding: 0;
    vertical-align: baseline;
}

The problem is that all list styles are set to NONE with this. I want to revert back original list styles (default) for all lists on website sub-pages only (all lists in .my_container).

When I try settings things like list-style-type to inherit is doesn't inherit the browser's default styles just for this CSS property.

Is there any way to inherit the original browser's styles for certain properties without modifying reset.css?

Present

reset.css is one of the worst anti-patterns in web design. – Companionate

@Péter Varga Huh? Why? It works perfect for my needs. I create highly modular websites and reset.css is something I have to use. – Present

Rather than a full-on reset stylesheet, consider something like github.com/necolas/normalize.css which sets sensible defaults for all elements. That way, you start with a baseline across all browsers and can build out from there. Also, you don't have to add extra code to get back to the default settings! – Crump

@OllyHodgson Yes, but I've got specific reasons why I want to use reset.css. I need to actually clear as much style as possible and I want to re-write it - not the other way around :) – Present

If you want erase them and rewrite them, what's the point of this question? As far as I can see you have two options: 1) specifically avoid resetting list styles so you keep the defaults 2) reset them, and come up with your own list styles. – Lindsy

@Lindsy - Just to clarify - I want to give users opportunity to build their own list from scratch (I added class for each possible style) - I was only wondering if there is something like "default" setting but since there isn't any default styling - I'll just create one. – Present

This questions title does not really match the question in the text. – Itin

Answer 1

I used to set this CSS to remove the reset :

ul { 
   list-style-type: disc; 
   list-style-position: inside; 
}
ol { 
   list-style-type: decimal; 
   list-style-position: inside; 
}
ul ul, ol ul { 
   list-style-type: circle; 
   list-style-position: inside; 
   margin-left: 15px; 
}
ol ol, ul ol { 
   list-style-type: lower-latin; 
   list-style-position: inside; 
   margin-left: 15px; 
}

EDIT : with a specific class of course...

Leatherwood

It does not “revert back original list styles (default)”. It just sets some styles. – Gyre

I agree, but whatever the way, the goal was just to set some style. This CSS give a pretty basic style to lists, no more. – Leatherwood

There is no "default" option for list-style-type and I found out that after getting answers. Browsers just add some styles which are often not consistent between browsers. – Present

I also had someone set display: inline-block; and it appears it needs to be list-item to make the bullets show again. – Preselector

This does not really answer the "What is default list styling" from the questions title. – Itin

Answer 2

I think this is actually what you're looking for:

.my_container ul
{
    list-style: initial;
    margin: initial;
    padding: 0 0 0 40px;
}

.my_container li
{
    display: list-item;
}

Impromptu

Yes, I think that this answer something important too. inherit inherits the styles from the parent containers and it doesn't set them to the default browser values. initial does this (I found out about its existence later on) but are you sure that ul { list-style: initial; } and ol { list-style: initial; } will produce a valid outcome? Doesn't it set list-style to its initial value regardless of the element it is applied to? Won't the initial value be disc outside none for both types of lists? – Present

Amazing, initial never occurred to me! – Justice

initial is not supported in any versions of IE msdn.microsoft.com/en-us/library/… – Efficacy

This does not really answer the "What is default list styling" from the questions title. – Itin

Answer 3

As per the documentation, most browsers will display the <ul>, <ol> and <li> elements with the following default values:

Default CSS settings for UL or OL tag:

ul, ol { 
    display: block;
    list-style: disc outside none;
    margin: 1em 0;
    padding: 0 0 0 40px;
}
ol { 
    list-style-type: decimal;
}

Default CSS settings for LI tag:

li { 
    display: list-item;
}

Style nested list items as well:

ul ul, ol ul {
    list-style-type: circle;
    margin-left: 15px; 
}
ol ol, ul ol { 
    list-style-type: lower-latin;
    margin-left: 15px; 
}

Note: The result will be perfect if we use the above styles with a class. Also see different List-Item markers.

Leaf

If this were the case, then nested list will have a top and bottom margin added with any new level. – Perennate

Answer 4

http://www.w3schools.com/tags/tag_ul.asp

ul { 
    display: block;
    list-style-type: disc;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px;
}

Iormina

thanks saved my life, was wondering why the hell was there padding in my submenu. – Foamflower

This will add vertical.margij on any nested list. – Perennate

Answer 5

You cannot. Whenever there is any style sheet being applied that assigns a property to an element, there is no way to get to the browser defaults, for any instance of the element.

The (disputable) idea of reset.css is to get rid of browser defaults, so that you can start your own styling from a clean desk. No version of reset.css does that completely, but to the extent they do, the author using reset.css is supposed to completely define the rendering.

Gyre

Answer 6

An answer for the future: CSS 4 will probably contain the revert keyword, which reverts a property to the initial value it had from the user-agent stylesheet or from user styles (or to the value inherited from a parent, if present) [source].

As of writing this, only Safari supports this – check here for updates on browser support.

In your case you would use:

.my_container ol, .my_container ul {
    list-style: revert;
}

See also this other answer with some more details.

Emad

Answer 7

You're resetting the margin on all elements in the second css block. Default margin is 40px - this should solve the problem:

.my_container ul {list-style:disc outside none; margin-left:40px;}

Suckling