Introduction
This chapter demonstrates about the W3CSS Lists is used to create list of multiple types according to style demands following are the concepts covered in this chapter.
- Basic List
- Different types of Lists
Description
Lists are used to demonstrates the items which are broadly classified into two types which are shown below.
- Ordered-list In which list of items begins with numbers or characters.
- Unordered list In which list items begin with bullet points.
Description
W3.CSS have the several types of lists by using these user can present the list of content in which some lists are shown below.
List header
In W3.CSS user can add heading element inside the list by using the w3-container. The code below demonstrates to adding list header element as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>List Header</h2>
<p>Example of adding the html element inside the list item.</p>
<ul class="w3-ul w3-border">
<li><h2>Names</h2></li>
<li>Sofia</li>
<li>Daniel</li>
<li>Henry</li>
</ul>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Border List
User can insert the Bordered list by using the w3-border class which can add the around the list. Te code below demonstrates the Border List as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Bordered List</h2>
<p>The w3-border class adds a border around the list:</p>
<ul class="w3-ul w3-border">
<li>Sofia</li>
<li>Daniel</li>
<li>Henry</li>
</ul>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Centered List
User can arrange the list of items at the center by using the w3-center class The code below demonstrates to display list of items at center as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Centered List</h2>
<p>The w3-center class centers the list items:</p>
<ul class="w3-ul w3-center">
<li>Sofia</li>
<li>Daniel</li>
<li>Henry</li>
</ul>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Colored List
User can add the colors to the by using the w3-color class The code below demonstrates to display the colored list as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Colored List</h2>
<p>w3-color class used to add color to the list:</p>
<ul class="w3-ul w3-aqua">
<li>Sofia</li>
<li>Daniel</li>
<li>Henry</li>
</ul>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Hoverable List
User will also add the hoverable background color to list by using the w3-hoverable on mouse over the code below demonstrates the Hoverable List as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Hoverable List</h2>
<ul class="w3-ul w3-hoverable">
<li>Sofia</li>
<li>Daniel</li>
<li>Henry</li>
</ul>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Closable List
User can also create the closable list by adding the w3-closebtn. The code below demonstrates to adding the close button to the list as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Closable List Items</h2>
<p>To close/hide the list items, click on the "x":</p>
<ul class="w3-ul w3-card-4">
<li>Sofia <span onclick="this.parentElement.style.display='none'" class="w3-closebtn w3-margin-right w3-medium">×</span></li>
<li>Daniel <span onclick="this.parentElement.style.display='none'" class="w3-closebtn w3-margin-right w3-medium">×</span></li>
<li>Henry <span onclick="this.parentElement.style.display='none'" class="w3-closebtn w3-margin-right w3-medium">×</span></li>
</ul>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
- List header
- Border List
- Centered List
- Colored List
- Hoverable List
- Closable List
Key Points
- In W3.CSS User can create the closable lists.
- List of items can be arranged at the center.
- User will get the bordered list by using border class.