Ul marker color. Add bullets or numbering to text. Create your own markers

Questions and tasks on the topic

Before moving on to the next topic, complete the practical tasks:

If you have difficulty completing the practice task, you can always open the example in a separate window and inspect the page to understand what CSS code was used.

2016-2019 Denis Bolshakov, you can send comments and suggestions on the site to [email protected]

You can use bulleted or numbered lists to organize text or show a sequential process in a PowerPoint presentation.

Changing the color and style of markers and understanding the limitations

You can change the color, style, or size of the bullets or numbers in your PowerPoint presentation, and you can also change the number you want to start with.

Apply custom styles to multiple slides

The best way to apply custom list styles to all slides in a presentation is to change the slide master. Any list settings you make to the slide master will be saved and applied to all slides. You can also edit or create one or more slide layouts that include custom list styles and add them to places in your presentation where you want to use your list styles.

List Limitations in PowerPoint

You can't do things with lists in PowerPoint that you can use in other Office programs, such as Word. For example, PowerPoint does not support the following features:

Questions and answers

Click the section title below for detailed instructions.

Why do I only see one marker no matter how many lines I add?

Make sure you are using text the field is markers or numbers, not a field titles. IN text field each time you press a key, a number or ENTER marker appears. When you press CTRL+ENTER, you get additional lines without bullets (for details or notes on a bulleted or numbered line).

In the field titles the text is expected to be a heading or title as one line. You can use numbers or bullets, but will count all lines of text as one line, resulting in one bullet or number.

How to cancel the creation of markers every time a line is added?

To stop creating bullets and numbers and return to the text, click markers or numbering again to disable it.

You can also press ENTER and press the BACKSPACE key to delete a marker or number. You can then add text or press Enter to add extra blank lines.

How to use multiple levels of markers?

To create a sublist within a list, place your cursor at the beginning of the line you want to indent, and then on the tab Home in the group paragraph click the button increase list level .

1 . Decrease list level (indent)

2 . Increase list level (indent)

To move text back to a lower level in the list, place the cursor at the beginning of the line and then on the tab Home in the group paragraph click the button reduce list level.

How can I increase or decrease the space between a bullet or number and the text on a line?

To increase or decrease the space between a bullet or number and the text on a line, place the cursor at the beginning of the line of text. To view the ruler, on the tab view in the group Show check the box ruler. On the ruler, click the tab (as shown in the image below) and drag the pointer to change the distance between the bullet or number and the corresponding text.

The ruler displays three different markers to indicate the indentation defined for the text field.

1 . First line indent - indicates the location of the actual bullet character or number. If a paragraph is not bulleted, this indicates the position of the first line of text.

2 . Left Indent - Adjusts the values ​​of both the first line and indentation markers and maintains their relative spacing.

3 . protrusion - indicates the location of the actual lines of text. If a paragraph is not bulleted, it indicates the location of the second line (and subsequent lines) of text.

How can I change the default bullets to a different character?

To change the default bullets in PowerPoint on a Windows PC, follow these steps:

When you insert a slide or text box for bullets, new default bullet options will appear.

For more information about working with masters, see Change a slide master.

Use bullets or numbering to show a lot of text or sequential process in a Microsoft PowerPoint 2010 presentation.

CSS lists— a set of properties responsible for the design of lists. Using HTML lists is very common when creating website navigation bars. List items represent a collection of block elements.

Using standard CSS properties you can change the appearance of the list marker, add an image for the marker, and also change marker location. The height of the marker block can be set with the line-height property.

Designing lists using CSS styles

1. List marker type list-style-type

The property changes the marker type or removes the marker for bulleted and numbered lists. Inherited.

Syntax

Ul (list-style-type: none;) ul (list-style-type: square;) ol (list-style-type: none;) ol (list-style-type: lower-alpha;) Rice. 1. Example of designing bulleted and numbered lists

2. Images for list items list-style-image

You can use images and gradient fills as list item markers. Inherited.

Syntax

Ul (list-style-image: url("images/romb.png");) ul (list-style-image: linear-gradient(#FF7A2F 0, #FF7A2F 50%, #FFB214 50%);)
Rice. 2. Design a bulleted list using an image
Rice. 3. Design a bulleted list using a gradient

3. List-style-position

This property provides the ability to place the marker outside or inside the content of the list item. Inherited.

CSS makes it possible to create bulleted and numbered lists, design bullet lists with images, and, if necessary, remove any bulleted list markings altogether.

CSS bullet list styles.

list-style-type

list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none ;

Meaning :

disk – bulleted list in the form of a filled circle

circle – bulleted list in the form of an unfilled circle

square – a bulleted list in the form of a filled square

decimal – numbered list with Arabic numbers (1,2,3, etc.)

upper-roman – numbered list in large Roman numerals (I, II, III, IV, etc.)

lower-roman – numbered list using small Roman numerals (i,ii,iii,iv, etc.)

upper-alpha – numbered list in capital letters (A,B,C, etc.)

lower-alpha – numbered list in lowercase letters (a,b,c, etc.)

none – no marker.

Example:

• Believe in the best, expect the worst.
• Life is a disease, with a fatal outcome.
• Never say never.

Result :

There are cases when the display of a marker in the list needs to be removed. To do this, write in the CSS code

list-style-type: none;

Example:

• Believe in the best, expect the worst.
• Never say never.

Result :

You can replace the usual markers in the list with your own images. This can be done using the list-style-image property.

list-style-image

list-style-image: url(image.png);

Example:

• Believe in the best, expect the worst.
• Life is a disease with a fatal outcome.
• Never say never.

Result :

You can also set the distance of the bulleted list from the text. This can be done using the padding-left property on the li selector.

Example:

• Believe in the best, expect the worst.
• Life is a disease with a fatal outcome.
• Never say never.

Result :

The next task is to change the color of the marker without changing the color of the text. How is this possible? The marker color can be changed by adding a tag to the test .
It looks like this: