How to Install Operating System ??Complete Guide Installing The Operating System

How To Set List With CSS

If in the tutorial in HTML then we have understood how to create a list/list, this time we will discuss how to set up a list with CSS between an unordered list and an ordered list. For those who don’t know how to make a list or list, you can switch to the previous HTML article.

Before going forward, there are a number of articles that you might be looking for.

Read Too :

The following is a list of properties that we will discuss in the tutorial on how to set up lists with this CSS.

  • list-style-type is used to specify the bookmark form list
  • list-style-positions are used to determine the position of the bookmark list
  • list-style-image is used to change the bookmark form of a list to an image
  • list-style short property to specify or arrange lists with CSS in a declaration

From the properties above we will discuss in detail so that it is easier to understand …

How to Manage a List with CSS

In this tutorial, the author assumes that the reader already understands how to create a list/list with HTML because we will discuss creating an additional style with CSS which is how to set the list with CSS.

Property list-style-type in CSS

The use of property list-type is used to determine the shape or style of markers or markers on each list later because we already know that there are two types of lists that can be used, namely unordered list and ordered list. The following are each of the values ​​that can be used to determine the marker shape in the list so that you can set the list with CSS.

Unordered list

The following are a list of marker types that can be used to specify an unordered list form with CSS.

ValueInformation
NoneUsed to uncheck the list
Disc (default)Used to display solid circle marks
CircleUsed to display a circle sign
SquareUsed to display solid square marks

Ordered list

Then the following is a list of sign shapes that can be used to specify an ordered list form with CSS.

ValueInformationExample
DecimalNumber1, 2, 3, 4, 5
Decimal-leading-zeroSort numbers with 0 in front01, 02, 03, 04, 05
Lower-alphaAlphabetical order in lowercase lettersa, b, c, d, e
Upper-alphaAlphabetical order with uppercase lettersA, B, C, D, E
Lower-romanRoman order with lowercase lettersi, ii, iii, iv, v
Upper-romanRoman order with uppercase lettersI, II, III, IV, V
Lower-greekOrdering using Greek lowercase lettersalpha, beta, gamma, etc.
Lower-latinSorting using Latin lowercase lettersa, b, c, d, e
Upper-latinSorting using Latin uppercase lettersA, B, C, D, E

Actually, for ordered list markers, there are many forms, but not all of them are used for standardization, only what is needed, otherwise they can be developed independently. The following is an example of using a list-style-type to set the marker shape in a list or list of HTML.

<ul style = "list-style-type: circle">
    <li> PHP </ li>
    <li> HTML </ li>
    <li> JAVASCRIPT </ li>
    <li> CSS </ li>
 </ ul>
 <ul style = "list-style-type: square;">
    <li> PHP </ li>
    <li> HTML </ li>
    <li> JAVASCRIPT </ li>
    <li> CSS </ li>
 </ ul>
 <ol style = "list-style-type: decimal">
    <li> PHP </ li>
    <li> HTML </ li>
    <li> JAVASCRIPT </ li>
    <li> CSS </ li>
 </ ol>
 <ol style = "list-style-type: lower-alpha">
    <li> PHP </ li>
    <li> HTML </ li>
    <li> JAVASCRIPT </ li>
    <li> CSS </ li>
 </ ol>
 <ol style = "list-style-type: upper-roman">
    <li> PHP </ li>
    <li> HTML </ li>
    <li> JAVASCRIPT </ li>
    <li> CSS </ li>
 </ ol>

The code above will display the form of a list or HTML list as shown below.

How To Setting List With CSS
How To Setting List With CSS

For its own use, it can be done by inline style or by using other methods, not necessarily in accordance with the tutorial above, it depends on how the case will be faced.

Property list-style-position in CSS

The property list-position position in CSS is used to determine the position of the list or list order, whether it is inside or outside the order of the list, the following are values ​​that can be used to determine the position of the marker.

ValueInformation
Outside (default)Markers will be outside the list or list order
InsideMarkers will be in the list or list order

Then below is an example of the source code how to use the list-style-position property …

<ul style = "list-style-type: circle; list-style-position: outside;">
    <li> PHP </ li>
    <li> HTML </ li>
    <li> JAVASCRIPT </ li>
    <li> CSS </ li>
 </ ul>
 <ol style = "list-style-type: decimal; list-style-position: inside;">
    <li> PHP </ li>
    <li> HTML </ li>
    <li> JAVASCRIPT </ li>
    <li> CSS </ li>
 </ ol>

The results of the code above …

How To Setting List With CSS
How To Setting List With CSS

When viewed at a glance only the position of the inside shifts a little more indented in compared to the outside position, but actually if you add a border it will show a difference from the two positions, here is the code after adding the left border.

<ul style = "list-style-type: circle; list-style-position: outside;">
    <li style = "border-left: 1px solid # 000"> PHP </ li>
    <li style = "border-left: 1px solid # 000"> HTML </ li>
    <li style = "border-left: 1px solid # 000"> JAVASCRIPT </ li>
    <li style = "border-left: 1px solid # 000"> CSS </ li>
 </ ul>
 <ol style = "list-style-type: decimal; list-style-position: inside;">
    <li style = "border-left: 1px solid # 000"> PHP </ li>
    <li style = "border-left: 1px solid # 000"> HTML </ li>
    <li style = "border-left: 1px solid # 000"> JAVASCRIPT </ li>
    <li style = "border-left: 1px solid # 000"> CSS </ li>
 </ ol>

The following is the display after adding the left border …

How To Setting List With CSS
How To Setting List With CSS

The difference between the two uses of list position with CSS shows that outside is outside the list content while the inside marker is inside the content list boundary.

List-style-image property in CSS

The list-style-image property function is to replace the default CSS marker with a bookmark image that can be taken directly from the website server directory, here is an example of source-code list-style-image.

<ul>
    <li style = "list-style-image: url ('image / marker.jpg')"> PHP </ li>
    <li style = "list-style-image: url ('image / marker.jpg')"> HTML </ li>
    <li style = "list-style-image: url ('image / marker.jpg')"> JAVASCRIPT </ li>
    <li style = "list-style-image: url ('image / marker.jpg')"> CSS </ li>
 </ ul>

The use of list-style-image is placed in a sequence or list points, where an image has been placed correctly by declaring using the url function according to the location of the image. Here are the results.

How To Setting List With CSS
How To Setting List With CSS

List-style property in css

The list-style property can actually represent the first two properties above, so the user can be shorter and can speed up the writing of the CSS syntax to set the list with this CSS. Here’s an example.

<ul style = "list-style: outside circle;">
    <li> PHP </ li>
    <li> HTML </ li>
    <li> JAVASCRIPT </ li>
    <li> CSS </ li>
 </ ul>
 <ol style = "list-style: inside decimal;">
    <li> PHP </ li>
    <li> HTML </ li>
    <li> JAVASCRIPT </ li>
    <li> CSS </ li>
 </ ol>

The results of the code for using the list-style property are the same as the previous usage, except that the user is shorter than the previous code.

How To Setting List With CSS
How To Setting List With CSS

In addition, the use of list-style does not have to be or is not mandatory by giving a value in the form of two declarations of the property value, it can use one of the property values, for example.

list-style: outside;

The code above results are the same as using list-style-positions, the authors themselves do not know the effect of what happened to these uses. So the tutorial is how to set a list or HTML list with CSS.

Before going forward, there are a number of articles that you might be looking for.

Read too :

Sending
User Review
0 (0 votes)

Add a Comment

Your email address will not be published. Required fields are marked *