DEV Community

Raja B
Raja B

Posted on

Mysite Border learn

list-style-type: none; is a CSS property that removes bullets (for unordered lists) or numbers (for ordered lists) from HTML lists.

What it does:

  • Removes the marker (bullet/number) from list items

Where to use:

  • Apply to <ul>, <ol>, or <li>elements

Common use:

  • Creating navigation menus, custom-styled lists without bullets

Example:

ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
}
Enter fullscreen mode Exit fullscreen mode

The none value means no marker is shown at all.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<style>
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
</style>

This removes the default bullets from the list.
Enter fullscreen mode Exit fullscreen mode

transition: color 0.3s; is a CSS shorthand property that creates a smooth animation when an element's color changes, taking 0.3 seconds to complete.

transition: CSS shorthand for animating property changes smoothly.

color:The CSS property being animated (text color).

0.3s: Duration: transition takes 0.3 seconds (300 milliseconds).

What it does: When the color changes (e.g., on :hover), instead of instant change, it gradually fades from old color to new color over 0.3 seconds.

Default timing: Uses ease (starts slow, speeds up, then slows down) if not specified.

.button {
  color: black;
  transition: color 0.3s; /* color change 0.3sec */
}

.button:hover {
  color: red; /* color change 0.3sec slow move */
}

When you hover over .button, 
the text color smoothly 
changes from black to red over 0.3 seconds.
Enter fullscreen mode Exit fullscreen mode

Top comments (0)