Remove ALL styling/formatting from hyperlinks

html

css-inheritance

best-practices

responsive-design

byNikita Barsukov·Sep 23, 2024

Here's the quick magic trick to strip hyperlink styling:

a {
    all: unset; /* Abracadabra! All styles: gone. */
}

This CSS line exorcises every trace of style from the spooky <a> tags, giving them a fresh slate.

Preserving inherent link colors and attributes

To keep text properties intact while eliminating hyperlink decorations:

a {
    color: inherit;        /* Paints with the same color as dad and mom */
    text-decoration: none; /* Skipped school the day they taught about underlines */
    background-color: transparent; /* Hides magic invisibility cloak */
    cursor: pointer;       /* Not rude, still points when you hover */
}

Styling uniformity across link states

Consistency is key. Maintain the same styling across different hyperlink states:

a, a:hover, a:visited {
    color: inherit;
    text-decoration: none;
}

This prevents sudden mutations in your link's appearance.

Keep the looks, not issues across different browsers

Check the browser runway before flying with all: unset;. To dress up your links in supported styles:

a {
    color: inherit;
    text-decoration: none;
    background-color: transparent;
    cursor: auto; /* Defaults to a pointer due to being a link */
}

Ensure your links grace every browser's screen flawlessly.

User-friendly hyperlinks despite stripped styles

While on your style-stripping spree, remember to keep some essential attributes:

Cursor: Maintains pointer to indicate clickable links.
Color: Inherits parent text color for seamless readability.
Underline: Consider keeping it for users who rely on underlines to spot links.

Maintaining code sanity with best practices

Avoid !important like a vampire avoids` garlic—it could lead to style conflicts and maintenance nightmare. Leverage classes or IDs for styling specific sections for a healthier codebase.