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>

Programs

CCC Online Test 2021 CCC Practice Test Hindi Python Programming Tutorials Best Computer Training Institute in Prayagraj (Allahabad) Best Java Training Institute in Prayagraj (Allahabad) Best Python Training Institute in Prayagraj (Allahabad) O Level NIELIT Study material and Quiz Bank SSC Railway TET UPTET Question Bank career counselling in allahabad Sarkari Naukari Notification Best Website and Software Company in Allahabad Website development Company in Allahabad