2nd/10_Wiki/Topic_CSS/CSS_Styling_Links.md

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit

id	title	category	status	verification_status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	created_at	updated_at	review_reason	merge_history	tags	raw_sources	applied_in	github_commit
css-styling-links	CSS Styling Links	Frontend	draft	conceptual		styling links link states a:link a:visited a:hover a:active CSS links link pseudo-classes LVHA order		B	0.89	2026-06-23	2026-06-23			css web frontend w3schools links pseudo-classes	https://www.w3schools.com/css/css_link.asp

CSS Styling Links

🎯 한 줄 통찰 (One-line insight)

HTML links can be styled with many CSS properties depending on their state, and the four link-state pseudo-classes (:link, :visited, :hover, :active) must be declared in a specific order for the hover and active styles to take effect. [S1]

🧠 핵심 개념 (Core concepts)

• Links are styleable — links can be styled with many CSS properties, e.g. color, font-family, background, etc. [S1]
• Four link states — a:link (a normal, unvisited link), a:visited (a link the user has visited), a:hover (a link when the user mouses over it), a:active (a link the moment it is clicked). [S1]
• Common decoration — text-decoration is mostly used to remove underlines from links. [S1]

🧩 추출된 패턴 (Extracted patterns)

• State-ordering rule — when setting the style for several link states, there are some order rules: :hover MUST come after :link and :visited; :active MUST come after :hover. [S1]
• Per-state styling — apply distinct property values to each pseudo-class to give feedback on visit/hover/click. [S1]

📖 세부 내용 (Details)

Styling Links — links can be styled with any CSS property (e.g. color, font-family, background, etc.). In addition, links can be styled differently depending on what state they are in. [S1]

The four link states are: [S1]

• a:link — a normal, unvisited link
• a:visited — a link the user has visited
• a:hover — a link when the user mouses over it
• a:active — a link the moment it is clicked

Example — color per state: [S1]

/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}

Note (order rule): When setting the style for several link states, there are some order rules: a:hover MUST come after a:link and a:visited; a:active MUST come after a:hover. [S1]

Text Decoration — the text-decoration property is mostly used to remove underlines from links: [S1]

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}

Background Color — the background-color property can be used to specify a background color for links: [S1]

a:link {
  background-color: yellow;
}

a:visited {
  background-color: cyan;
}

a:hover {
  background-color: lightgreen;
}

a:active {
  background-color: hotpink;
}

The page also notes that links can be styled further with properties such as font-size, font-weight, font-family, and the cursor property (with various cursor types) — "Not found in source" for the exact code of those additional examples. [S1]

🛠️ 적용 사례 (Applied in summary)

The page's own examples apply color, text-decoration, and background-color across the four link states. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Correctly ordered link-state styling (language: CSS):

a:link    { color: red; }
a:visited { color: green; }
a:hover   { color: hotpink; }
a:active  { color: blue; }

Remove the underline:

a:link {
  text-decoration: none;
}

⚖️ 모순 및 업데이트 (Contradictions & updates)

No contradictions found in the source.

✅ 검증 상태 및 신뢰도

• 상태: draft
• 검증 단계: conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
• 출처 신뢰도: B (W3Schools — widely used educational reference, not a primary standards body)
• 신뢰 점수: 0.89
• 중복 검사 결과: 신규 생성 (New discovery)

🔗 지식 그래프 (Knowledge Graph)

• 상위/루트: CSS Tutorial
• 관련 개념: CSS Link Buttons, CSS Styling Lists, CSS Text
• 참조 맥락: Referenced when styling anchor elements and giving users visual feedback per link state.

📚 출처 (Sources)

• [S1] W3Schools — CSS Styling Links — https://www.w3schools.com/css/css_link.asp

📝 변경 이력 (Change history)

• 2026-06-23: Initial draft synthesized from the W3Schools "CSS Styling Links" page (Astra wiki-curation, P-Reinforce v3.1 format).