Styling Links, Lists, and Images

Links, lists and images have their own semantic meaning. CSS improves presentation without replacing those HTML structures.

For lists, list-style-type chooses a marker, and list-style-position influences where it sits. Links use color, underline and state selectors such as :hover and :focus-visible. Images are commonly made fluid with max-width: 100% and height: auto.

object-fit: cover fills a sized image box by cropping, whereas contain fits the whole image with possible empty space. Use descriptive alt text for meaningful images.

CSS styling does not alter an anchor’s href, the list element’s semantic grouping, or an image’s alternative text.

Style ordinary list items and actual navigation links.

HTML

<ul class="resource-list"><li><a href="#docs">Documentation</a></li><li><a href="#examples">Example gallery</a></li><li><a href="#guide">Getting started guide</a></li></ul>

CSS

.resource-list { list-style: square; padding-left: 22px; line-height: 1.9; }
.resource-list li::marker { color: #0f766e; }
.resource-list a { color: #1d4ed8; text-underline-offset: 3px; }
.resource-list a:hover { color: #0f766e; }

Rendered output

Observe: The bullets turn teal and the links remain identifiable with underlines.

Preserve an image’s aspect ratio and keep it inside a small card.

HTML

<figure class="photo-card"><img alt="Stylized mountain landscape" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 180'%3E%3Crect width='400' height='180' fill='%23dbeafe'/%3E%3Cpath d='M0 160L140 35L240 140L300 70L400 165V180H0Z' fill='%230f766e'/%3E%3Ccircle cx='333' cy='43' r='23' fill='%23f59e0b'/%3E%3C/svg%3E"><figcaption>Lake and mountains</figcaption></figure>

CSS

.photo-card { max-width: 280px; margin: 0; padding: 10px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; }
.photo-card img { display: block; max-width: 100%; height: auto; border-radius: 6px; }
.photo-card figcaption { margin-top: 8px; color: #475569; font-size: 13px; }

Rendered output

Observe: The inline SVG image stays fully contained in the card at its natural ratio.

CSS styling does not alter an anchor’s href, the list element’s semantic grouping, or an image’s alternative text.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• Do not replace an interactive anchor with a styled span when navigation is intended.
• Setting both fixed width and height on an image without object-fit may distort it.

Change the list marker to decimal, and set the image width to 100% while retaining height:auto.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Preserve semantic HTML; use CSS to make links, lists and images useful and attractive.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.