gitadmin/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-28 18:26:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(curriculum): Add interactive examples to list-style property lesson (#62804)

Browse Source
This commit is contained in:
Giftea ☕
2025-10-14 23:19:48 +01:00
committed by GitHub
parent 594ebd066b
commit 895fe01107
1 changed files with 20 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
curriculum/challenges/english/blocks/lecture-styling-lists-and-links/672b951b1bf78038b1a2a0e7.md
+20 -4
View File
@@ -5,7 +5,7 @@ challengeType: 19
dashedName: how-do-the-different-list-style-properties-work
---
# --description--
# --interactive--
In CSS, the `list-style` property is used to control the appearance of lists on a webpage.
@@ -27,6 +27,8 @@ For ordered lists, you can use different numbering systems, like decimal, Roman
Here’s an example of using `list-style-type`:
:::interactive_editor
```html
<ul style="list-style-type: square;">
<li>Item 1</li>
@@ -35,6 +37,8 @@ Here’s an example of using `list-style-type`:
</ul>
```
:::
In this example, the bullet points of the unordered list are changed to squares.
The `list-style-type` property is the most commonly used of the three, as it directly affects the appearance of the bullet or numbering style in your lists.
@@ -47,6 +51,8 @@ And, when you use the value `inside`, the bullet or number appears inside the co
Here’s an example of using `list-style-position`:
:::interactive_editor
```html
<ul style="list-style-position: inside;">
<li>Item 1</li>
@@ -60,19 +66,23 @@ Here’s an example of using `list-style-position`:
</ul>
```
:::
In this example, both `inside` and `outside` values are provided for two different unordered list tags.
The `list-style-position` property can be useful when you want to control the alignment of the list content, especially in situations where you have multiple lines of text in a single list item.
The `list-style-image` property allows you to use an image as the bullet point for your list items. This can be useful for adding a unique visual style to your lists.
Here’s an example of using `list-style-image`:
Here's an example of using `list-style-image`:
:::interactive_editor
```html
<head>
<style>
ul {
list-style-image: url('freeCodeCamp-logo.svg');
list-style-image: url('https://cdn.freecodecamp.org/platform/universal/freecodecamp-org-gravatar.jpeg');
list-style-position: inside;
}
</style>
@@ -86,6 +96,8 @@ Here’s an example of using `list-style-image`:
</body>
```
:::
In this example, the bullet points are replaced by a custom freeCodeCamp logo, adding a personalized touch to the list.
When using `list-style-image`, make sure the image you choose is small and appropriate for the design of your webpage. If the image is too large or complex, it can make the list harder to read.
@@ -94,7 +106,9 @@ You can combine the three properties – `list-style-type`, `list-style-position
The order of the values in the shorthand doesn’t matter, but all three can be specified together.
Here’s an example using the shorthand property:
Here's an example using the shorthand property:
:::interactive_editor
```html
<ul style="list-style: square inside url('https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg');">
@@ -104,6 +118,8 @@ Here’s an example using the shorthand property:
</ul>
```
:::
In this example, the list items use square bullets, positioned inside the content, with a custom image as the bullet.
However, if the image is unavailable or not rendered, the square bullets will be used as a fallback.