وقتی در وب‌سایت‌ها می‌خواهید اطلاعات را به صورت مرتب و سازمان‌یافته به نمایش بگذارید، لیست‌ها یکی از بهترین ابزارها هستند. این روزها تقریباً هیچ سایتی را نمی‌توانید پیدا کنید که از لیست‌ها استفاده نکند. لیست‌ها در HTML و CSS به خوبی پشتیبانی می‌شوند و به راحتی می‌توانید آن‌ها را دستکاری کنید تا به شکل و فرم دلخواه شما تغییر کنند. در HTML، دو نوع لیست اصلی داریم: لیست‌های شماره‌دار و لیست‌های غیرشماره‌دار. CSS به ما امکان می‌دهد که هر دوی این لیست‌ها را به روش‌های متنوعی تزئین کنیم تا مطابق با طراحی ما باشند.
لیست‌های شماره‌دار با تگ <ol> و لیست‌های غیرشماره‌دار با تگ <ul> در HTML ساخته می‌شوند. آیتم‌های درون این لیست‌ها با استفاده از تگ <li> نمایش داده می‌شوند. با CSS شما می‌توانید استایل و ظاهر این لیست‌ها را به دلخواه خود تغییر دهید؛ مانند تغییر رنگ، اندازه، نوع مارکر لیست و غیره. شما حتی می‌توانید مارکرهای متنی یا سفارشی را نیز به راحتی جایگزین کنید.
یکی از محبوب‌ترین موارد استفاده از CSS در طراحی لیست‌ها تغییر دادن نوع مارکر است. شما می‌توانید از دایره تو‌پر به دایره خالی، مربع و یا حتی حالت‌های دیگر تغییر دهید. برای این کار تنها کافیست از خاصیت list-style-type استفاده کنید و نوع مارکر دلخواه خود را انتخاب کنید.
درک ساده‌ای از لیست‌ها اهمیت زیادی دارد، چون هنوز بسیاری از مواقع به عنوان یک ابزار استاندارد در وب سایت‌ها و اپلیکیشن‌ها استفاده می‌شوند. این ابزارها نه تنها برای نمایش اطلاعات ترتیبی بلکه برای ناهاروم هم به کار می‌روند که حتی می‌توانند در منوهای وب‌سایت‌ها هم مشاهده شوند.
<ul>
<li>آیتم اول</li>
<li>آیتم دوم</li>
<li>آیتم سوم</li>
</ul>
<style>
ul {
list-style-type: square;
color: blue;
}
</style>توضیح خط به خط کد
<ul>لیستی از نوع غیرشماره‌دار آغاز می‌شود.
<li>آیتم اول</li>نمایش آیتم اول لیست.
<li>آیتم دوم</li>نمایش آیتم دوم لیست.
<li>آیتم سوم</li>نمایش آیتم سوم لیست.
<style>شروع شیوه‌نامه‌ی CSS.
ul { list-style-type: square; color: blue; }نوع مارکر را به مربع تغییر داده و رنگ متون لیست را آبی می‌کند.
</style>پایان شیوه‌نامه‌ی CSS.