Home
blogging tips
html-project

Stylish Ordered (OL) & Unordered (UL) Lists for any Websites

Add animated, responsive ordered (OL) and unordered (UL) lists to enhance your website's tutorials and summaries with HTML and CSS.
Aaqib Amin
Stylish Ordered (OL) & Unordered (UL) Lists for any Websites

Adding a stylish ordered list (OL) or a responsive unordered list (UL) to your website can transform how readers interact with your content. As a web enthusiast who’s tweaked designs for years, I’ve seen how structured lists make tutorials, guides, or summaries more engaging and easier to follow.

The numbered steps list (OL) with animated circular counters and the key takeaways box (UL) with elegant Merriweather styling are perfect for bloggers, educators, or content creators. These lightweight HTML and CSS elements are responsive, boost user engagement, and improve SEO by enhancing readability and dwell time.

Below, I’ve broken down everything you need to know about implementing the ordered list (OL) and unordered list (UL) separately—how to install them, their features, customization options, and what you might want to add to make them even better. Follow these steps, tested on my own site, to create a professional, user-friendly experience.

Table of Contents

Always back up your website’s theme or files before editing to avoid losing your work.

If you want to use this code in Blogger and get a CSS error in your template, then add /*<![CDATA[*/ at the beginning (with a space before it) and /*]]>*/ at the end (with a space before it) — this will fix the error.

Stylish Ordered List (OL) - Numbered Steps List

The stylish ordered list (OL) is a visually appealing numbered list designed for step-by-step guides, tutorials, or instructions. With circular counters, hover effects, a connecting line between steps, and subtle animations, it makes your content look modern and guides readers effortlessly. The responsive design ensures it works on any device, while the structured format boosts SEO by improving content scannability.

Stylish Ordered List (OL) - Numbered Steps List

How to Install the Ordered List (OL)

Adding a numbered steps list to your website is straightforward with HTML and CSS. Follow these steps to implement it correctly.

  1. Copy the CSS Code for the Ordered List

    This CSS creates the numbered steps with circular counters, hover effects, and animations.

    <style> 
:root{--linkC:#0078ff;--white:#ffffff;--textC:#333333;--bgC:#fdfcff}
.noList,.steps,.pros,.cons{list-style:none;margin:0 0 25px;padding:0}
.steps{--sz:30px;counter-reset:num;line-height:1.7;color:var(--textC)}
.steps > li{position:relative;padding-inline-start:calc(var(--sz) * 1.6);counter-increment:num;margin-bottom:1.2em}
.steps > li::before{content:counter(num) '.';display:flex;align-items:center;justify-content:center;position:absolute;top:0;inset-inline-start:0;width:var(--sz);height:var(--sz);border:1px solid var(--linkC);border-radius:50%;color:var(--linkC);font-size:small;line-height:1;background-color:var(--bgC);transition:0.3s;z-index:2}
.steps > li:hover::before{background-color:var(--linkC);color:var(--white)}
.steps > li::after{content:'';position:absolute;top:calc(var(--sz));inset-inline-start:calc(var(--sz) / 2);bottom:0;width:1px;background-color:var(--linkC);opacity:0.4;z-index:1}
.steps > li:last-child::after{display:none}
.steps li p{margin:0.3em 0 0 0}
</style>
  2. Add CSS to Your Website

    Paste the CSS into your site’s stylesheet or inside a <style> tag in the <head> section. For Blogger, go to Blogger Dashboard → Theme → Edit HTML, search for </head> using Ctrl+F, and paste the code above it.

  3. Copy the HTML for the Ordered List

    Use this HTML to add a numbered steps list. You can start numbering from any value with counter-reset:num X;.

    <ol class="steps">
  <li>Step 1</li>
  <li>Step 2</li>
</ol>

<!-- Start numbering from 3 -->
<ol class="steps" style="counter-reset:num 2;">
  <li>Step 3</li>
  <li>Step 4</li>
</ol>
  4. Insert HTML in Your Content

    Paste the HTML where you want the steps list to appear. For Blogger, switch to HTML view in the post editor and insert the code. For other platforms, add it to your page’s HTML.

  5. Save and Preview

    Save your changes and check the page to see the animated numbered list in action.

Features of the Ordered List (OL)

  • Dynamic Numbering: Automatically increments numbers and supports custom starting points (e.g., start at 3 with counter-reset:num 2;).
  • Animated Slide-In: Each step slides in with a staggered animation, creating a smooth, engaging effect.
  • Hover Effects: Circular counters change color on hover, adding interactivity.
  • Responsive Design: Adapts to all screen sizes, perfect for mobile and desktop users.
  • SEO-Friendly: Structured lists improve readability, encouraging longer dwell time and better search engine rankings.

What You Might Want to Add

To enhance the ordered list further, consider these additions (all CSS-based):

  • Pulse Animation on Counters: Add a pulsing effect to the circular counters: 
    .steps > li::before {
  animation: pulse 1s ease-in-out infinite alternate;
}
@keyframes pulse {
  from { transform: scale(1); }
  to { transform: scale(1.1); }
}
  • Custom Border Styles: Change the connecting line to dashed or dotted: 
    .steps > li::after {
  background-color: var(--linkC);
  border: 1px dashed var(--linkC);
  width: 0;
}
  • Shadow Effects: Add a subtle shadow to counters on hover: 
    .steps > li:hover::before {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

How to Customize

Tweak the following in the CSS:

  • Colors: Change --linkC or --bgC in :root for different border or background colors.
  • Animation Timing: Adjust --anim-duration or animation-delay for faster/slower effects.
  • Circle Size: Modify --sz to resize the circular counters.

Who Can Use

Ideal for tutorial bloggers, recipe creators, educators, or anyone writing step-by-step guides. Perfect for long-form content or instructional posts needing clear navigation.

Stylish Unordered List (UL) - Key Takeaways Box

The unordered list (UL) takeaways box is a sleek, modern way to highlight key points, summaries, or takeaways. With a green accent border, Merriweather font, and a subtle fade-in animation, it draws attention to critical information. Its responsive design and structured format make it ideal for boosting user engagement and SEO by improving content readability.

Stylish Unordered List (UL) - Key Takeaways Box

How to Install the Unordered List (UL)

Here’s how to add a key takeaways box to your website using HTML and CSS.

Note! Ensure your site loads the Merriweather font by including the Google Fonts import.
  1. Copy the CSS Code for the Unordered List

    This CSS styles the takeaways box with a green border and fade-in animation.

    <style>
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap');
.listul{border-radius:7px;max-width:600px;margin:20px auto;padding:10px;border-left:4px solid #4a704a;background-color:#f9f9f9}
.listul h1,.listul h2,.listul h3,.listul h4,.listul h5{padding:10px;color:#4a704a;margin-bottom:10px}
.listul ul{margin-bottom:10px;list-style-type:disc;padding-left:35}
.listul li{font-family:Merriweather;margin-bottom:1.2em;color:#08102b}
</style>
  2. Add CSS to Your Website

    Paste the CSS into your stylesheet or <style> tag in the <head> section. For Blogger, go to Blogger Dashboard → Theme → Edit HTML, find </head> with Ctrl+F, and paste above it.

  3. Copy the HTML for the Unordered List

    Use this HTML to add a key takeaways box.

    <div class="listul">
  <h2>Key Takeaways</h2>
  <ul>
    <li>Point 1</li>
    <li>Point 2</li>
  </ul>
</div>
  4. Insert HTML in Your Content

    Paste the HTML where you want the takeaways box. For Blogger, use HTML view in the post editor. For other platforms, add it to your page’s HTML.

  5. Save and Preview

    Save and check your page to see the animated takeaways box.

Features of the Unordered List (UL)

  • Fade-In Animation: The box and list items fade in smoothly for a polished effect.
  • Elegant Styling: Uses Merriweather font and a green border for a premium look.
  • Responsive Layout: Fits perfectly on any screen size, from mobiles to desktops.
  • SEO Benefits: Structured summaries improve readability, boosting user dwell time and search rankings.
  • Customizable Bullets: Disc bullets can be swapped for other styles (e.g., square, circle).

What You Might Want to Add

Enhance the unordered list with these additions (all CSS-based):

  • Collapsible Box: Wrap the .listul div in a <details> tag for a collapsible effect: 
    <details class="listul" open>
  <summary>Key Takeaways</summary>
  <ul>
    <li>Point 1</li>
    <li>Point 2</li>
  </ul>
</details>
<style>
.listul summary {cursor: pointer;font-weight: 600;color: #4a704a;padding: 10px;}
.listul summary::-webkit-details-marker {display: none;}
</style>
  • Hover Effects on Bullets: Add a hover animation to list items: 
    .listul li:hover {
  transform: scale(1.05);
  transition: transform 0.3s;
}
  • Custom Bullet Styles: Change disc bullets to squares or circles: 
    .listul ul {
  list-style-type: square; /* or 'circle' */
}

How to Customize

Modify the CSS for your needs:

  • Colors: Change the border color (#4a704a) or background (#f9f9f9).
  • Font: Swap Merriweather for another Google Font by updating the @import URL.
  • Animation: Adjust --anim-duration or animation-delay for different timing.

Who Can Use

Perfect for bloggers, content marketers, or educators creating summaries, key points, or highlight sections in articles, tutorials, or reviews.

Ordered List (OL) and Unordered List (UL) FAQ

What is a Stylish Ordered List (OL)?

A stylish ordered list (OL) is a numbered list with animated circular counters and a connecting line, ideal for step-by-step guides or tutorials. It enhances user engagement and SEO by improving content structure and readability.

What is an Unordered List (UL) Takeaways Box?

An unordered list (UL) takeaways box is a styled section with disc-bulleted points for summarizing key information. With animations and Merriweather font, it boosts content engagement and search rankings.

Can I use both lists on the same page?

Yes, you can combine the steps (OL) and listul (UL) classes on the same page. Add both CSS snippets to your stylesheet and use their respective HTML wherever needed for tutorials or summaries.

Are these lists mobile-friendly?

Absolutely, both lists are fully responsive, adapting to all screen sizes. The max-width: 600px on the UL box ensures a clean fit, while the OL’s flexible design works for mobile blogging.

Final Thoughts

The Stylish Ordered List (OL) and Unordered List (UL) Takeaways Box are powerful tools to make your content stand out. With animated, responsive designs and easy-to-use HTML and CSS, they turn complex guides or summaries into engaging, scannable sections. Perfect for blog tutorials, recipe posts, or educational content, these lists drive user engagement and SEO performance. Customize them to match your brand, and watch your readers stay longer and explore more!

Post a Comment