Learn CSS

"If you want to learn how to style and design web pages, you need to master CSS. CSS stands for Cascading Style Sheets, and it is the language that defines the appearance and layout of HTML elements. In this course, you will learn the basics of CSS, such as selectors, properties, values, units, and colors. You will also learn how to use CSS to create responsive web design, animations, transitions, and more. By the end of this course, you will be able to create beautiful and functional web pages using CSS."

CSS Chapters Menu

CSS Styling Lists 

CSS can be used to style lists on a webpage, including changing the bullet points or numbering style, adjusting the spacing, and adding background colors or borders. Here are some common CSS properties that can be used to style lists:

 

list-style-type: 

This property is used to change the style of the bullet point or numbering for each list item.


ul {
 list-style-type: disc; /* disc, circle, square, decimal, lower-roman, upper-roman, etc. */
}
ol {
 list-style-type: decimal;
}

 

list-style-position: 

This property is used to set the position of the bullet points or numbering inside or outside the list item.


ul {
 list-style-position: inside; /* inside or outside */
}

 

padding: 

This property is used to add spacing between the list items and the border of the list.


ul {
 padding: 10px;
}

 

margin: 

This property is used to add spacing between the list and other elements on the webpage.


ul {
 margin-top: 20px;
 margin-bottom: 20px;
}

 

background-color and border: 

These properties can be used to add background colors or borders to the list.


ul {
 background-color: #f2f2f2;
 border: 1px solid #ddd;
}


Here is an example of using CSS to style an unordered list on a webpage:


<head>
 <style>
   /* List styles */
   ul {
     list-style-type: circle;
     list-style-position: inside;
     padding: 10px;
     margin-top: 20px;
     margin-bottom: 20px;
     background-color: #f2f2f2;
     border: 1px solid #ddd;
   }
   
   li {
     font-size: 18px;
     line-height: 1.5;
     padding: 5px 0;
   }
 </style>
</head>
<body>
 <h1>My Favorite Things</h1>
 
 <ul>
   <li>Cats</li>
   <li>Coffee</li>
   <li>Books</li>
   <li>Beaches</li>
 </ul>
 
 <p>What are your favorite things? Let me know in the comments below.</p>
</body>


In this example, the unordered list is styled with circle bullet points that are positioned inside the list item. The list has padding of 10 pixels, a top and bottom margin of 20 pixels, and a light gray background color with a 1-pixel solid border. The list items have a font size of 18 pixels, line height of 1.5, and padding of 5 pixels on the top and bottom.