We can style lists in CSS using various properties. Here are some common CSS properties used to style lists:
list-style-type- sets the type of bullet point or numbering for list items.list-style-position- sets the position of the bullet points or numbering relative to the list item text.list-style-image- specifies an image to be used as the bullet point or numbering.padding- sets the space between the list item text and the bullet point or numbering.margin- sets the space between the list and surrounding elements.
We can also apply general styling to the list itself, such as changing the font or color of the text.
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<body>
<ul id="u_list">
<li>First Element</li>
<li>Second Element</li>
<li>Third Element</li>
</ul>
</body>
</html>
Simple list in html.
ul#u_list {
background: yellow;
color: black;
}
This CSS code styles an unordered list with an ID of "u_list". It sets the background color of the list to yellow and the text color to black.
This means that any unordered list element with an ID of "u_list" will have a yellow background color and black text color. The "#" symbol is used to target the element by its ID, and "ul" specifies that it is an unordered list.
ul#u_list {
background: yellow;
color: black;
list-style-type: circle;
}
Additionally, we set the list-style-type to "circle", which means that each list item will be preceded by a filled circle.
So any unordered list element with an ID of "u_list" will have a yellow background color and black text color, and each list item will have a filled circle as a bullet point.
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<body>
<ol id="o_list">
<li>First Element</li>
<li>Second Element</li>
<li>Third Element</li>
</ol>
</body>
</html>
The ordered list is given the id "o_list", which can be used to style the list using CSS. The list items are labeled as "First Element", "Second Element", and "Third Element".
ol#o_list {
background: yellow;
color: black;
list-style-type: decimal;
}
The CSS code ol#o_list targets an ordered list with the id attribute of o_list and sets the following properties:
background: yellow: sets the background color of the list to yellow.color: black: sets the text color of the list items to black.list-style-type: decimal: sets the list item marker to decimal numbers.
So, in the HTML code, the ordered list with id attribute of o_list will have a yellow background, black text color for the list items, and each item will have a decimal number as the marker.
list-style-type: decimal-leading-zero;
list-style-type: lower-alpha;
list-style-type: upper-alpha;
list-style-type: upper-roman;
list-style-type: lower-roman;
list-style-type is a CSS property used to specify the type of marker for a list item. The following are the different values for list-style-type:
-
decimal-leading-zero: This displays a numeric value with a leading zero for values less than 10. For example, "01.", "02.", "03.", and so on. -
lower-alpha: This displays lowercased alphabetical letters as markers. For example, "a.", "b.", "c.", and so on. -
upper-alpha: This displays uppercase alphabetical letters as markers. For example, "A.", "B.", "C.", and so on. -
lower-roman: This displays lowercase Roman numerals as markers. For example, "i.", "ii.", "iii.", and so on. -
upper-roman: This displays uppercase Roman numerals as markers. For example, "I.", "II.", "III.", and so on.
No comments:
Post a Comment