techTreksBooks

CSS fundamentals

Why use CSS

  • CSS (Cascading Style Sheets) controls colours, fonts, spacing, and layout.
  • Keeping CSS in its own file separates content (HTML) from appearance (CSS).

Add this inside <head> in every page:

<link rel="stylesheet" href="styles/main.css" />

If the HTML file is inside pages/, use href="../styles/main.css".

Common selectors

  • Element selector: p { } styles every <p>.
  • Class selector: .note { } styles elements with class="note".
  • ID selector: #hero { } styles the single element with id="hero".
body {
  font-family: Arial, sans-serif;
  margin: 0;
  color: #1f2937;
}

.note {
  background: #eef2ff;
  padding: 12px;
  border-left: 4px solid #4338ca;
}

#hero {
  text-align: center;
}

Core properties to practice

  • color, background-color
  • font-family, font-size, font-weight
  • margin, padding
  • border, border-radius
  • width, height

Example:

nav a {
  color: #0f172a;
  text-decoration: none;
  margin-right: 12px;
}

nav a:hover {
  text-decoration: underline;
}

Using Tailwind utility classes sparingly

If your project already loads Tailwind, you can apply small utilities without writing extra CSS:

<header class="bg-slate-100 p-4">
  <h1 class="text-2xl font-semibold">Coastal Walks</h1>
  <p class="text-slate-700">Plan a short hike.</p>
</header>

Keep utilities simple (colour, spacing, font size) and avoid complex layouts until you are comfortable with plain CSS.