Css Course


By default, the HTML UL element displays a bullet (•) in front of each LI list, and the OL element displays list items marked with numbers. This list-item markers can be removed, or replaced with other symbol /character, or with an image, using CSS properties.

The examples contain the CSS and HTML code in the same place, but you should add the CSS code in the <head> section of your HTML document, or in external '.css' file.


• To remove the bullets from UL lists, or the numbering from OL lists, apply: list-style: none; to that UL /OL.
<style>
ul.nobull, ol.nobull {
 list-style: none;
}
</style>

<h4>Example removing bullets from lists</h4>

UL list.
<ul class='nobull'>
 <li>Free Courses and Tutorials</li>
 <li>CSS lessons</li>
</ul><br>

OL list.
<ol class='nobull'>
 <li>https://CoursesWeb.net/</li>
 <li>https://marplo.net/</li>
</ol>

Custom Markers / Bullets

To display a custom marker / bullet for UL / OL lists, apply list-style: none; to that UL /OL. And set the :before pseudo-class to the LI of that UL /OL, with the 'Hex code' for custom bullet to content property (the symbol must be specified in Code Hex notation).

To this page: HTML Symbol Entities there are tables with various HTML code hex entities.


- In the body of :before pseudo-class you can set the color, size, and other styles for the custom bullet.
<style>
ul.bull1, ol.bull2 {
 list-style: none;
}
ul.bull1 li:before {
 content: '\00BB'; /* code Hex notation */
 padding-right: 8px;
 color:#0000be;
}
ol.bull2 li:before {
 content: '\272C'; /* code Hex */
 padding-right: 8px;
 color:#00be00;
}
</style>

<h4>Example lists with custom bullets</h4>

UL list.
<ul class='bull1'>
 <li>Free Courses and Tutorials</li>
 <li>CSS course</li>
 <li>CSS lessons</li>
</ul><br>

OL list.
<ol class='bull2'>
 <li>https://CoursesWeb.net/</li>
 <li>https://marplo.net/</li>
</ol>
- Another way to display a custom bullet for UL / OL lists, is to replace the bullet with an image, using this syntax:
list-style-image: url('image.jpg');
- Example:
<style>
ul {
 list-style-image: url('image.jpg');
}
</style>

list-style-type

• By default, the OL element displays a numbered list, starting from 1 (1, 2, 3, ...). To set another type of numbering, like letters, roman, etc.; use the list-style-type property to that OL.
This property specifies the type of list-item marker.
- To start the numbering from other index, add start='index' attribute in the OL tag.
<style>
ol.numlatin {
 list-style-type: upper-latin;
}
ol.numdec {
 list-style-type: decimal-leading-zero;
}
</style>

<h4>Example list-style-type to OL</h4>

 - Lists with upper latin letters.
<ol class='numlatin'>
 <li>Free Courses and Tutorials</li>
 <li>Flash Games</li>
 <li>CSS lessons</li>
</ol><br>

 - Starts the numbering from the 3rd index, with decimal leading zero.
<ol class='numdec' start='3'>
 <li>MarPlo.net</li>
 <li>GamV.eu</li>
 <li>CoursesWeb.net</li>
</ol>
• Here is other types of list-item marker values for list-style-type property.

Click on each value (blue text) to see example.

list-style-position

By default, the list-item markers appear outside the content flow. To display the list-item markers /bullets inside the content flow, apply the: list-style-position: inside; property to UL /OL item.
This property specifies if the list-item markers should appear inside or outside the content flow. It can take one of these values: inside, outside, inherit.
<style>
ul.insbull, ol.insbull {
 list-style-position: inside;
}
ul li, ol li {
 border: 1px solid blue;
}
</style>

<h4>Example list-style-position: inside</h4>

 - Default.
<ul>
 <li>List 1</li>
 <li>List 2</li>
</ul><br>

 - List-item markers inside the content flow.
<ul class='insbull'>
 <li>Free Courses and Tutorials</li>
 <li>CSS course</li>
 <li>CSS lessons</li>
</ul><br>

<ol class='insbull'>
 <li>MarPlo.net</li>
 <li>CoursesWeb.net</li>
</ol>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag defines the clickable areas inside the image map?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Which CSS property defines what is done if the content in a box is too big for its defined space?
display overflow position
#id {
  overflow: auto;
}
Click on the event which is triggered when the mouse is positioned over an object.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
}
Indicate the PHP variable that contains data added in URL address after the "?" character.
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
Define Custom List-item Markers, Bullets for UL, OL Lists

Last accessed pages

  1. Redirects (4758)
  2. SSEP - Site Search Engine PHP-Ajax (11366)
  3. Remove / Get duplicate array values - Reset array keys in PHP (13020)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (137122)
  5. Integer and Float value in Select with PDO from string to numeric (8548)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (320)
  2. PHP Unzipper - Extract Zip, Rar Archives (110)
  3. Read Excel file data in PHP - PhpExcelReader (101)
  4. SHA1 Encrypt data in JavaScript (81)
  5. Get and Modify content of an Iframe (74)
Chat
Chat or leave a message for the other users
Full screenInchide