CSS Links & Media

Introduction to CSS Links & Media

Theory: Links should be visually clear in every state (default, hover, focus, visited). Consistent link styling improves navigation confidence.

Links and media are key interaction points in UI. Good CSS styling improves clarity, accessibility, and engagement.

Styling Link States

Theory: This topic explains practical CSS concepts used in real interfaces. Understanding the theory helps you choose the right properties and patterns.

Use pseudo-classes to style links consistently across states: default, visited, hover, focus, and active.

a {
    color: #2563eb;
    text-decoration: none;
}
a:visited { color: #7c3aed; }
a:hover,
a:focus { text-decoration: underline; }
a:active { color: #1d4ed8; }

Button-Style Links

Theory: Links should be visually clear in every state (default, hover, focus, visited). Consistent link styling improves navigation confidence.

For call-to-action links, use button-like styling while keeping semantic anchor tags.

.cta-link {
    display: inline-block;
    background: #0d6efd;
    color: #fff;
    padding: 0.6rem 1rem;
    border-radius: 999px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cta-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(13, 110, 253, 0.25);
}

Responsive Media Styling

Theory: Responsive media styling keeps embedded content stable across devices. Aspect ratio and overflow handling prevent layout shifts.

Icon and Social Link Styling

Theory: This topic explains practical CSS concepts used in real interfaces. Understanding the theory helps you choose the right properties and patterns.

.social-link {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e2e8f0;
    color: #0f172a;
}
.social-link:hover {
    background: #0d6efd;
    color: #fff;
}

CSS Links & Media Best Practices

Theory: Links should be visually clear in every state (default, hover, focus, visited). Consistent link styling improves navigation confidence.

• Always provide visible :focus styles for keyboard users.
• Maintain sufficient color contrast for links and icons.
• Use max-width: 100% for responsive media.
• Keep hover effects subtle and consistent.
• Use descriptive link text instead of generic “Click here”.

Extended Tutorial: Links & Media Queries

Theory: Links have states: :link, :visited, :hover, :active, :focus-visible. Style visited state carefully—avoid relying on color alone for critical info.

a {
    color: #1d4ed8;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

a:visited { color: #6d28d9; }

a:hover { color: #1e3a8a; }

a:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
}

Responsive images & print

Use max-width: 100%; height: auto; on images. For print stylesheets, hide navigation and expand link URLs if needed.

img, video { max-width: 100%; height: auto; }

@media print {
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}