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

User · Accepted Answer

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

User · Answer

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

User · Answer

As per the documentation  most browsers will display the  lt ul gt    lt ol gt  and  lt li gt  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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

An answer for the future  CSS 4 will probably contain the revert keyword  which reverts a property to its value from the user or user-agent stylesheet  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

[html] What is default list styling (CSS)?

Examples related to html

Examples related to css

Examples related to html-lists