CSS that works on a phone

CSS tells the browser how the HTML should look. Start with the boring things that make a page usable: type size, line length, contrast, space.

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  padding: 1.25rem;
  background: #111;
  color: #f4f1ea;
}

h1 {
  font-size: 1.8rem;
}

li {
  padding: 0.4rem 0;
  border-bottom: 1px solid rgb(255 255 255 / 0.12);
}

Put that in a <style> tag in the head, or in a styles.css file linked with <link rel="stylesheet" href="styles.css" />.

Rules that survive real life

• Prefer system-ui until you have a reason to load a webfont. Fonts are extra requests.
• Dark text on a pale background, or pale text on a near-black background. Mid-grey on mid-grey fails in daylight.
• One column until the page is actually wide. max-width: 40rem on the main column keeps lines from stretching across a tablet.
• Buttons and links need space. Fingers are not cursors.

@media (min-width: 720px) {
  body {
    padding: 2.5rem 3rem;
  }
}

That is a media query. Below 720 pixels, ignore it. Above, add air. This is mobile-first: the phone version is the default, not an afterthought.