List in CSS
Features to create lists in HTML and CSS
There are two main types of lists in HTML:
- Unorrdered (
- ) list the item with the first line characters
- Order (
- List items by number or letter
List properties in CSS allow you to:
- Select the bullet character in the list in order and not in order
- Use images to list items
- Add background color to list and listed characters
The characters list the list
The list-style-type
specifies the type of character listing list, below are some examples (including both in order and not in order).
ul.a {
list-style-type : circle ;
}
ul.b {
list-style-type : square ;
}
ol.c {
list-style-type : upper-roman ;
}
ol.d {
list-style-type : lower-alpha ;
}
Use images to list items
The list-style-image
will use images to list each item in the list.
ul {
list-style-image : url('sqpurple.gif') ;
}
Character placement listed
The list-style-position
determines the location of the listed characters.
'list-style-position:
outside;'means that the character will be outside the list.The beginning of the line of items will align with each other vertically.
'list-style-position:
inside;'means that the character will be in the list.So, it will be part of the text and push the headline text into.
ul.a {
list-style-position : outside ;
}
ul.b {
list-style-position : inside ;
}
An example of a list is by setting the internal or external bullet character
Delete the default setting
The list-style-type: none
is used to delete bulleted characters. Note that the list also has default margin and padding. To remove, insert margin:0
and padding:0
and
- .
ul {
list-style-type : none ;
margin : 0 ;
padding : 0 ;
}
The shortened feature of the list in CSS
The list-style
is used as a shortened feature, giving all the properties of the list in a declaration.
ul {
list-style : square inside url("sqpurple.gif") ;
}
When using the shortened feature, the order of values will be as follows:
list-style-type
(iflist-style-image
is specified, the property value will display if for some reason the image cannot be displayed)list-style-position
(specifying the first line of the list will be inside or outside the content)list-style-image
(define image as the first line of the list)
If one of the values is lost, the default value (if any) will replace it.
Style the list by color
You can add colors to make the list look more attractive.Anything added to the card good
all affect the entire list but additional features
ol {
background : #ff9999 ;
padding : 20px ;
}
ul {
background : #3399ff ;
padding : 20px ;
}
ol li {
background : #ffe5e5 ;
padding : 5px ;
margin-left : 35px ;
}
ul li {
background : #cce5ff ;
margin : 5px ;
}
Examples of adding colors to lists in CSS
Previous article: Path in CSS
The following article: Table in CSS
You should read it
- Instructions on how to create drop down lists or drop-down lists in Excel
- Steps to clear Jump Lists history on Windows 10
- How to Sort Alphabetically in Microsoft Word
- How to list conditional lists in Excel
- How to Alphabetize in Microsoft Word
- Microsoft Listas - Online 'Handbook' of Wiki format
- Top 5 most dangerous viruses in the last 5 years
- How to organize the list in the Reminders app on iPhone and iPad
May be interested
- No need to To-Do list you still work effectively thanks to the following alternative solutionswhen looking for effective ways to do, to-do list (to-do list) is one of the basic tools indispensable. however, there are a few interesting ideas about how to work effectively without having to make a to-do list.
- How to Quick Sort an Array in C++sorting is a very useful tool in programming. it is often necessary to arrange the members of a list in ascending or descending order. a sorted list allows a user to search and find information very quickly. sorting a list requires the...
- Korean movies that cause fever should not be missedattractive korean films that you should not ignore bring exciting and interesting entertainment moments.
- How to create a list of 'dream' App Store apps on iPhonefrom ios 11, the wish list feature on iphone will be deleted from the app store. however, if you still want to create a list of desired applications, you can choose the following alternatives.
- Create a list of tables in Word automaticallycreating a list of tables in microsoft word 2013 is extremely simple. using the list of data is easy to find specific illustrations, images or any data you add in the list.
- Data Link List structure (Circular Linked List)the linked list (circular linked list) is a variant of the linked list, in which the first element points to the last element and the last element points to the first element.
- Calculate the subtotal of the list on Excelif you don't want to calculate subtotals, the list is a new feature that is very useful in excel 2003; excel always disables the subtotal feature for the list. currently, to be able to manage the list and perform calculations on the total number of dependencies & igr
- How to create List Box in Excelyou want to create a list of options (list box) for your excel file but do not know how to do it. in this article, tipsmake.com would like to guide you how to create list box in excel most accurately. let's follow along!
- 24 Best To-Do List Apps to Keep You on Track in 2020want to stay organized and boost productivity of yourself and your team? you can't miss the best to do list app to help you keep on track.
- How to create a to-do list on Facebookfeatures list (list) on facebook helps you create the to-do list for convenient tracking.