W3.CSS List

Stylish and attractive lists can be designed using W3.CSS classes.

w3-ul : The w3-ul class makes the stylish list. It removes the list marker and adds inner line in the list items.

Example:

<html>
<head>
<meta name="viewport" 
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="w3-container">
<h1> Types of Computer </h1>
<ul class="w3-ul w3-large">
<li> Analog Computer </li>
<li> Digital Computer </li>
<li> Hybrid Computer </li> 
</ul>
</div>
</body>
</html>
Other classes of W3CSS can also be used to give more stylish look to the list. Some of classes are:

w3-hoverable: To give grey background color when mouse is moved over the list.
w3-color: To give background color to the list.
w3-hover-color: To give background color when mouse is moved over the list.  
w3-border: To give border to the list. Other border classes also can be used.
w3-center: To centrally align the text of list.
w3-size: To set the size of text.
w3-card-number: To give shadow effects just like cards to the list. Number maybe 2 or 4.
w3-padding-number: To add padding to list items. Number may be 16, 24, 32, 48, and 64.
w3-hover-shadow: To give shadow effects on mouser hover.

Example:

<html>
<head><meta name="viewport" 
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="w3-container">
<h1> Types of Computer </h1>
<ul class="w3-ul w3-large w3-hoverable w3-center">
<li> Analog Computer </li>
<li> Digital Computer </li>
<li> Hybrid Computer </li> 
</ul> 
</div>
</body>
</html>
CCC Online Test 2021 CCC Practice Test Hindi Python Programming Tutorials Best Computer Training Institute in Prayagraj (Allahabad) O Level NIELIT Study material and Quiz Bank SSC Railway TET UPTET Question Bank career counselling in allahabad Website development Company in Allahabad Sarkari Exam Quiz