CSS LIST PROPERTIES

QUARTER 3 WEEK 6

CSS LIST PROPERTIES

Index

1. Prayer

7. list-style-type

2. Greetings

8. list-style-position

3. Objectives

9. list-style-image

4. SELS Activity

10. list-style

5. Review

11. Activity

6. Introduction

PRAYER

GREETINGS

OBJECTIVES

• Identify the different types of list-style-type values available in CSS.
• Express a desire to experiment with different types of list styles to create unique and engaging user experiences.
• Combine different list properties to achieve a desired visual effect on a web page.

SOCIO-EMOTIONAL ACTIVITY

Shout Out Board Directions:With the given template, type out any word that you want to express loudly or that will make you feel calm once you have written it.

Directions: : Choose a border and justify why you picked it for your design. Then, use either colored paper or a colored pen to apply the border on a piece of short bond paper, envisioning it as your webpage. Note:Dont forget to take a picture of your work and upload it in the google classroom.

REVIEW

Border Design

Creating and Customizing Lists

Considering the flexibility of CSS in terms of webpage styling, it is undoubtedly feasible to use CSS to design and personalize lists. It is possible to replace the pre-existing squares, circles, and discs in lists with images, and the amount of indentation can also be specified or personalized according to the preference.

CSS provides several properties to customize the appearance and behavior of lists. Here are some of the most commonly used ones:

list-style-type is a CSS property that is used to define the appearance of the list item marker or bullet point. The list-style-type property accepts several values that can be used to set the style of the marker for ordered and unordered lists. The most commonly used values for list-style-type include:

• none: Removes the marker from the list item.

• disc: Sets the marker to a filled circle (default for unordered lists).

• circle: Sets the marker to an open circle.

• square: Sets the marker to a square.

• decimal: Sets the marker to a number.

• decimal-leading-zero: Sets the marker to a number with leading zeros (e.g., 01, 02, 03).

• lower-roman: Sets the marker to a lowercase Roman numeral (i, ii, iii, iv, v, etc.).

• Using the code below, try this remaining list style on your phone or computer.

• upper-roman: Sets the marker to an uppercase Roman numeral (I, II, III, IV, V, etc.).

• lower-alpha: Sets the marker to a lowercase letter (a, b, c, d, e, etc.).

• upper-alpha: Sets the marker to an uppercase letter (A, B, C, D, E, etc.).

• lower-greek: Sets the marker to a lowercase Greek letter.

• armenian: Sets the marker to an Armenian numbering style.

list-style-position is a CSS property that is used to control the position of the list item marker or bullet point relative to the content of the list item. By default, the marker appears inside the content box of the list item, which means that the text of the list item is indented to make space for the marker. However, by setting the list-style-position property to outside, you can move the marker outside of the content box and align it with the left edge of the list.

• The list-style-position property accepts two values: inside and outside.
• Note that this property only applies to unordered lists (ul) and not ordered lists (ol).

In the example, there are two unordered lists, one with the class .a and the other with the class .b. The first unordered list has the default value of list-style-position: outside, while the second unordered list has the value of list-style-position: inside.

When list-style-position is set to outside, the marker of each list item is positioned outside the content box of the list item. This is the default value for the property and is the behavior shown in the first unordered list in the example code. When list-style-position is set to inside, the marker of each list item is positioned inside the content box of the list item, aligned with the text. This is the behavior shown in the second unordered list in the example code.

• Note that if the image fails to load or is unavailable, the default marker specified by the list-style-type property will be used instead.
• You can also use other values for list-style-image, such as none (to remove the marker) or inherit (to inherit the marker from the parent element).

list-style-image is a CSS property that allows you to specify a custom image to use as the marker or bullet point for list items, instead of the default marker specified by the list-style-type property.

In the HTML section, we have an unordered list with three list items. Since we have applied the list-style-image property to all unordered lists using the CSS rule, these list items will be marked with the smiley face image. Note that the file path in the url() function should be relative to the location of the CSS file or the HTML file, depending on where the image file is located.

• By using these properties, you can customize the appearance of HTML lists to match the design of your website or application. You can also use them to create unique and creative lists that stand out from the standard bullet point or numbering system.

list-style: This property is a shorthand for list-style-type, list-style-position, and list-style-image.

Directions:

Due to March being Women's Month, create an HTML document that contains a list of women who you have admiration for, along with the reasons why you hold them in high regard. Additionally, include CSS list properties like list-style-type, list-style-position, and list-style-image in your code.

Activity

ASPIRING WOMEN

“No one can make you feel inferior without your consent.”

Thank you for listening

“Breathe In,Breathe Out,Let It Be”