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;
}
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.
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.
Top comments (0)