CSS Links and Lists

Styling Anchor Tags

You can style anchor tags (<a>) to make them visually appealing and interactive using pseudo-classes like :hover, :visited, and :active.

<style>
  a {
    color: blue;
    text-decoration: none;
    font-weight: bold;
  }

  a:hover {
    color: red;
    text-decoration: underline;
  }
</style>

<p>
  Visit <a href="https://example.com">Example Website</a> for more information.
</p>

Visit Example Website for more information.

Styling Lists

HTML provides two types of lists: ordered (<ol>) and unordered (<ul>). These can be styled with list-style, margin, padding, and custom markers.

Unordered List Example

<style>
  ul.custom-ul {
    list-style-type: square;
    padding-left: 20px;
    color: green;
  }
</style>

<ul class="custom-ul">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

HTML
CSS
JavaScript

Ordered List Example

<style>
  ol.custom-ol {
    list-style-type: upper-roman;
    padding-left: 20px;
    color: navy;
  }
</style>

<ol class="custom-ol">
  <li>Step One</li>
  <li>Step Two</li>
  <li>Step Three</li>
</ol>

Step One
Step Two
Step Three

Nested Lists Example

<style>
  ul.nested {
    list-style-type: disc;
    padding-left: 20px;
  }

  ul.nested ul {
    list-style-type: circle;
    padding-left: 20px;
  }
</style>

<ul class="nested">
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
  <li>Backend</li>
</ul>

Frontend
- HTML
- CSS
Backend

If you have any questions, feel free to ask. Thank you for reading!

Previous Next

If you have any query or question, please contact through below form. Our team will be in touch with you soon.

Please provide your valueable feedback or suggession as well.