I can get it wrong, but; I use <ol>and <li>to create the chart. For some reason, the CSS that I applied to the tag <ol>applies to the tag <li>, but not all, some of the <li>CSS attributes apply as well as its takings attributes from both. Can someone explain why and fix it?
https://jsfiddle.net/fdo47tjv/
div.alb1 {
background-color: rgba(255, 255, 255, 0.6);
width: 20%;
margin-left: 5%;
margin-top: 15%;
margin-bottom: 0px;
margin-right: 0px;
border-right: 40px solid black;
}
div.alb1 ol {
text-decoration: underline;
font-weight: bold;
font-size: 25px;
font-family: 'Roboto', sans-serif;
margin: 10px;
}
div.alb1 ol li {
margin: 5px;
text-decoration: none;
font-family: 'Roboto', sans-serif;
font-size: 15px;
}
<body background="./resources/DSC_0146.jpg">
<div class="alb1">
<ol>Take Care
<li>Over My Dead Body</li>
</ol>
</div>
</body>
After several attempts,
I mixed up and changed the css and html so that “Take Care” would be moved to the paragraph tag outside of OL, and I changed it so that the paragraph tag had OL attributes above and it works fine, but it seems unsatisfactory, I cut the corner?