Want to make the number on a ordered list a different color and size
Question
So I was wondering how I can change the color, size and font of the ordered list numbers. I am aware of how to make the color different but I am wondering how to make the color different. Here is the code I have so far
/* Color scheme: #6FC2F0 (Blue) #74E2AE(Green) and #ff00ff (Fuchsia or purple) #FC913A (Orange)*/ /* Fonts: Alegreya Sans, Kalam and Actor */ .topnav { background-color: #6FC2F0; overflow: hidden; font-size: 20px; font: 'Alegreya Sans', sans-serif; } .topnav a { float: left; color: #ffffff; text-decoration: none; padding: 20px; } .topnav a:hover { background-color: #74E2AE; color: #ffffff; } .topnav input[type=text] { float: right; padding: 6px; border: none; margin-top: 10px; margin-right: 16px; font-size: 20px; border-radius: 25px; } .rectitle { font-size: 50px; font: 'Actor', cursive; margin-left: 5px; margin-top: 15px; } .byx { font-size: 20px; float: left; display: block; color: #8C8C8C; margin-left: 5px; } .byx a { color: #FC913A; } .ingred { float: left; font-size: 18px; color: #000000; display: block; margin-left: 5px; margin-top: 20px; font: 'Actor', sans-serif; } .ingredients { font-size: 18px; display: block; margin-left: 5px; margin-top: 20px; } .serv { font-size: 20px; font: 'Alegreya Sans', sans-serif; margin-left: 5px; margin-top: -20px; } .instructions { display: inline-block; font-size: 18px; } .ol li { color: #ff00ff; }
<!DOCTYPE html> <html> <head> <link href="https://fonts.googleapis.com/css?family=Actor|Alegreya+Sans|Kalam" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="recipe.css"> </head> <body> <div class="topnav"> <a href="#home">Home</a> <a href="#contact">Contact Us</a> <a href="#about">About Us</a> <a href="#wheel">Wheel</a> <input type="text" placeholder="Search.."> </div> <div class="rectitle"> Easy 3 Step Honey-Sriracha Salmon </div> <div class="byx"> By: Varun J -- Read more <a href="#aboutus">Here</a> </div> <div class="ingredients"> <h1>Ingredients:</h1> </div> <div class="serv"> Serves 1 person </div> <div style="clear:both"></div> <div class="ingred"> <p>Salmon:</p> <p>1 Medium sized Salmon</p> <p>Salt and Pepper (to taste)</p> <p>Sauce:</p> <p>1 tablespoon Sriracha</p> <p>1 tablespoon Honey</p> <p>1/2 tablespoon Lime Juice</p> </div> <div style="clear:both"></div> <div class="instructions"> <h1>Preperation:</h1> </div> <div class="prep"> <ol> <li class="listi"><span style="color: black">test</span></li> </ol> </div> </body> </html>
JSFiddle: https://jsfiddle.net/JSSSSS/y3mcp2t8/1/
Please bear with me as I am not exactly the best HTML/CSS coder.
2 answers
solution1
0 2018-11-28 23:00:36
This is what you can do.
In the css file:
ol li {
list-style: none;
}
.number {
color: red;
}
In html:
<ol>
<li><span class="number">1. </span>item</li>
</ol>
As you can see, you'll have to write the numbers. That is, they won't be autogenerated any longer. But there may be more complicated solutions to that problem. See here: How to colour the list-style-type auto-generated numbers?
[Code above also here: https://jsfiddle.net/asifmeh/5dmr8zfL/3/]
solution2
0 ACCPTED 2018-11-28 23:09:13
Same technique, using nested spans to keep auto numbering, and allow to style numbers and text:
.preplist { color: blue; font-size: 16px; } .preplist2 { color: red; font-size: 24px; } .listobject { color: green; font-size: 10px; }
<div> <ol> <span class="preplist"><li><span class="listobject">test</span></li></span> <span class="preplist2"><li><span class="listobject">test2</span></li></span> </ol> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.