What is default list styling (CSS)?

HtmlCssHtml Lists

Html Problem Overview


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?

Html Solutions


Solution 1 - Html

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

Solution 2 - Html

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

Solution 3 - Html

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.

Solution 4 - Html

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

Solution 5 - Html

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.

Solution 6 - Html

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.

Solution 7 - Html

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAtadjView Question on Stackoverflow
Solution 1 - HtmlzessxView Answer on Stackoverflow
Solution 2 - HtmlColdColdView Answer on Stackoverflow
Solution 3 - HtmlReza MamunView Answer on Stackoverflow
Solution 4 - HtmljerrygarciuhView Answer on Stackoverflow
Solution 5 - HtmlJukka K. KorpelaView Answer on Stackoverflow
Solution 6 - HtmltaniusView Answer on Stackoverflow
Solution 7 - HtmlOmidView Answer on Stackoverflow