Look & feel / DETAILED TASK GUIDE

Improve link styling

Links inside paragraphs should be recognizable before someone hovers over them. This task updates appearance while keeping the original destinations intact.

BY BUILDING APPS WITHOUT CODEUPDATED OCT 14, 2026DIRECT TOOL + AI PROMPT

Before you start

  • The content container selector, such as .article-body a.
  • A color that remains readable on the actual background.
  • For direct mode: Node.js and a global stylesheet.

How to do it

  1. Scope the edit to content links if navigation and button links should keep their current appearance.
  2. Choose a link color and review the underline treatment.
  3. Apply the rule and inspect links inside paragraphs, lists, and footnotes.
  4. Navigate with Tab and confirm a visible focus indicator remains.

Before & after

ILLUSTRATIVE EXAMPLE
.article-body a { color: #285D49; text-decoration: underline; }

Readers can identify article links without relying only on hover. Every destination stays the same.

MAKE IT YOURS

Use with an AI coding tool

1 Describe your change

Use your own words. You do not need a file name. The prompt asks the AI to preserve unrelated work.

We remember this choice on this device. Choosing a tool does not connect it to this website.

2 Copy your prompt

Read the complete prompt below, then copy it.

3 Paste into your AI coding tool

Open your website or app project in your AI coding tool. Paste this into its AI chat box and send it. The tool needs access to your project files to make changes.

A website address alone does not give an AI permission or access to edit it. This prompt goes into an AI chat, not a regular terminal window.

4 Check the result

Check visited, hover, focus, and contrast states where applicable.

Open your project preview and try the change. Review what changed before publishing. If it is wrong, use your tool’s undo or restore your saved project version.

If the result is not what you expected

Navigation looks cluttered

The rule targeted all links. Limit it to the article container.

Visited links are unreadable

Inspect the visited state on the page background instead of assuming the default works.

Undo the change

Remove the new scoped rule or restore the prior link styles. Do not remove the links themselves.

References & testing

The examples above explain the expected behavior; they are not a claim that this prompt has been tested in every framework or AI model. The direct tool uses our shared local-edit engine; native Windows execution remains unverified.

MDN: text-decoration ↗ · Our review approach