How to create a bulleted list? Bulleted and numbered lists. Designing lists in CSS How to change the list marker in CSS

To somehow distinguish the lines of a bulleted list from the main text, you can make the color of the bullets in the list different from the color of the text.

The default is a black dot. If you simply set the color to the li element, then nothing will work - the color will be set to the entire line, and you only need to change the color of the marker (ul li color of the dots).

How to Change Bullet Color Using CSS

1. Hiding the original list markers using the property list-style-type
2. Adding Your Own Markers Using a Pseudo-Element :before and properties content. This will allow you to insert any text or symbol before the element li.
3. The appearance of the marker can be controlled through CSS styles, changing the color, font, background, and more. I used bold Montserrat font.

li ( list-style-type: none; /* Hide default markers */ ) li:before ( font-family: "Montserrat", sans-serif; font-weight: 400; color: #d7002e; /* Marker color */ content: " "; /* Marker */ padding-right: 7px; /* Indent from marker to text */ )

If you have a situation where markers appear in in unnecessary places, for example in the main menu or in a duplicate menu in the footer, then this can be easily fixed. Just add a parent element that contains lists whose marker colors we need to change. I added the word article and now these changes apply only to the content area of ​​the site.

article li ( list-style-type: none; /* Hide default markers */ ) article li:before ( font-family: "Montserrat", sans-serif; font-weight: 400; color: #d7002e; /* Marker color */ content: " "; /* Marker */ padding-right: 7px; / * Indent from marker to text */ )

Today we’ll figure out how lists are created on a web page, what markers are used and test them different styles to change appearance.

Let me remind you how styles are connected to an HTML page:

There are marked or unnumbered css list and numbered.

List markers are images of different shapes: circles, squares, jackdaws and the like. They are also called bullets. You can also use your own drawings as markers for the list.

Numbered list represents the output of information numbered 1, 2, 3, etc.

Typically, markers are simple black circles, which is familiar to the user, but on the other hand, they do not attract much attention to the text.

If you decide to replace these mugs with designer ones, then you need to master making a list with using css . That's what we'll do today.

The basis of any list consists of the following web page code:

• First element of the list
• Second element of the list
• Last element of the list

This block looks like this:

• First element of the list
• Second element of the list
• Last element of the list

Css styling of list markers

We will write the external output in the styles file style.css. It may be called differently, but have a .css extension.

Standard CSS markers: circle (circle) - unfilled circle, point (disk) - filled circle, square (square) - filled square.

Generates a list in css code ul- with its help we set which of the standard markers will be displayed on the page.

For example, let's display lists using a circle. The entry in the css file will be like this:

Ul (list-style-type: circle)

But often it is necessary to replace markers not in all displayed lists, but only in certain blocks. For example, change in posts, but not in comments. In this case, the ul code should not have any meaning, and the circle style should be specified only for lists in posts. This is what the code looks like without the value:

Ul (list-style-type: none)

If you cannot find the code in the css file that is responsible for displaying the list in the block you need, then use the plugin for Firefox - Firebug or in Google Chrom, right-click on the blog web page. Then “view element code”.

For example, one of the options for changing the appearance of the list in posts to a standard circle if there is no content for the block ul:

Post-content ul (list-style-type: circle)

Or another example:

#content-blok ul(list-style-type:square)

Complete course “Css practice”

]]> ]]>

Knowledge of CSS is necessary for every webmaster, because it is a universal way to make high-quality design without overloading the page code.

For those who want learn css styling tricks very quickly, ]]> recommend ]]> advanced course "CSS practice" by Evgeniy Popov.

Next articles:

Graphic markers for the list.

List indent css.

How to change the css color of a list marker so that its color is different from the text color.

Nested lists. How to make a horizontal list in css. Change the style of numbered lists.

Download beautiful markers for site lists.

I want to change the type of marker to another symbol. How to do this?

WITH using HTML or CSS it is allowed to set one of three types of markers: disc (dot), circle (circle), square (square). You need to add these values ​​to the list-style-type style parameter, which is specified for the UL or LI selector.

• Cheburashka


• Crocodile Gena


• Shapoklyak

Selecting and setting your own marker symbol occurs in a very unique way, through the before pseudo-element. First, you should remove bullets from the list altogether by setting the list-style-type style attribute to none , and then add the before pseudo-element to the LI selector, separated by a colon. The symbol output itself is carried out using the content parameter, the value of which is the desired text or character code in Unicode.

• Cheburashka


• Crocodile Gena


• Shapoklyak

This example hides the default marker and adds a + symbol instead.

Comment

The before pseudo-element does not work in the browser Internet Explorer, so your own markers will not be displayed in it.

To set some tricky symbol as a marker, you can use Microsoft program Word by selecting menu Insert > Symbol... After which a window will open, as shown in Fig. 1.

Rice. 1. Selecting a symbol in the program Microsoft Word

The character code, highlighted in color in the figure, should be entered as the content parameter, adding a slash in front of it. For example, for the given symbol you should specify content: "\25aa" .

Task

Change the appearance of markers in the list and replace them with another symbol.

Solution

Using HTML or CSS, you can set one of three types of markers: disc (dot), circle (circle), square (square). You need to add these values ​​to the list-style-type style property, which is specified for the UL or LI selector (example 1).

Example 1: Standard markers

HTML5 CSS 2.1 IE Cr Op Sa Fx

• Cheburashka
• Crocodile Gena
• Shapoklyak

In this example, a square is used as markers (Fig. 1).

Rice. 1. Type of markers

Selecting and setting your own marker symbol occurs in a very unique way, through the :before pseudo-element. The first step is to remove bullets from the list altogether by setting the list-style-type property to none, and then add the :before pseudo-element to the LI selector. The symbol output itself is carried out using the content property, the value of which is the desired text or symbol (example 2).

Example 2: Using:before and content

HTML5 CSS 2.1 IE Cr Op Sa Fx

• Cheburashka
• Crocodile Gena
• Shapoklyak

In this example, the default marker is hidden and a symbol is added in its place (Figure 2).

Rice. 2. Markers in the form of a symbol

To set some tricky symbol as a marker, you can use Microsoft Word or a symbol table, this standard program included with Windows. The code encoding must be UTF-8.

Using the dialog box List You can change the following bulleted list options:

Marker symbol to any symbol from the fonts installed on the computer.

The size of the protrusion.

The distance between the bullet symbol and the text.

Alignment.

For these purposes you need to enter the menu Format – List and press the button Change, after which a dialog box will open Edit bulleted list, presented in Fig. 4.25.

Rice. 4.25. Dialog window Edit bulleted list

Below is the list of its options:

Options	Purpose
Marker symbol
	Offers options for different fonts for the selected character
	Allows you to select a marker symbol option
Marker position
	Determines the alignment and position of the marker relative to the left border of the text
Position from text
	Sets the amount of indentation from the right edge of the marker to the beginning of the text
	Allows you to visually evaluate how the list will look after making changes to it

Change the format of a numbered list

Numbered lists are created on the tab Numbered(Fig. 4.24). If the suggested numbered list formats are not suitable for the design of a particular document, you can create your own list format by clicking the button Change in the dialog box List on the tab Numbered. This will open a dialogue window Changenumberedlist(Fig. 4.26).

Rice. 4.26. Dialog window Edit numbered list

Below are the options in this dialog box that allow you to change the format of the numbered list.

Option		Purpose
Number format
Numbering	Selects the number style for the list
	Specifies the number from which numbering in the list should begin
	Allows you to select a font for numbers in the list and for any text before and after the numbers Opens the Font tab
Number position
Alignment	Sets the list alignment
	Defines the alignment and position of the number
Text position
	Sets the distance from the right edge of the number to the beginning of the text
	Makes it possible to see all the changes being made before they are added to the document

Creating multi-level lists

More complex types of lists are found in many types of documents. These are the so-called multi-level lists. They also use either markings or numbering, and sometimes a combination of both. But their main difference from previous types of lists is the presence of several levels. Depending on the level, a symbol or number is assigned to each paragraph.

Rice. 4.27. Tab Multi-level dialog boxes List.

Multi-level lists differ from regular lists in the presence of indentations. A certain indentation is taken as the level of such a list.

Creating a multi-level list is only possible using a dialog box List. Moreover, the levels are set by the performer himself, setting certain indents. Word analyzes the indentations and, depending on their size, numbers them, creating levels.

You can create modified numbering formats for different levels of a multi-level list, but only one multi-level list format is allowed per document.

To create a multi-level list, you must perform the following steps:

1. Determine a fragment of the document that is supposed to be formatted as a list.

2. Create indents for each paragraph using the button Increase indent on the toolbar Formatting(you cannot use tabs when creating indents).

3. Select the selected text fragment.

4. Select a team Format–List. In the dialog window List go to tab Multi-level(Fig. 4.27).

5. Select desired type multi-level list of proposed options. Click OK.