Quick Reach
CSS list
You can use the power of CSS to style HTML lists. You can assign colors, create borders, backgrounds etc. around lists to make it look according to other sections of website. Similarly you can apply CSS to li tag to apply css style inside the list items.
Following is a basic example of creating a CSS class and assigning it to ordered list.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<!DOCTYPE html>
<html>
<head>
<title>HTML Lists</title>
<style>
.liststyle{
color: green;
background-color: yellow;
border: 1px solid black;
}
</style>
</head>
<body>
<p>A few color names</p>
<ol start=“5”>
<li>Black</li>
<li>White</li>
<li>Yellow</li>
<li>Red</li>
<li>Orange</li>
</ol>
</body>
</html>
|
CSS ul ui example
Following example applies CSS to unordered list. The ul style is created in CSS with border, background CSS properties where ul li is used to assign CSS style to list item (<li>).
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
<!DOCTYPE html>
<html>
<head>
<title>HTML Lists</title>
<style>
ul{
color: green;
background-color: yellow;
border: 1px solid black;
}
ul li {
color:black;
border: 1px dotted red;
}
</style>
</head>
<body>
<p>A few color names</p>
<ul start=“5”>
<li>Black</li>
<li>White</li>
<li>Yellow</li>
<li>Red</li>
<li>Orange</li>
</ul>
</body>
</html>
|
Also see HTML div | HTML forms
Leave A Comment?