Base Styles, Header and Section Cards

Right now your final project has structure but no personality. This lesson and the next one take that same HTML and turn it into something that actually looks designed, using nothing but CSS. No new HTML is needed. You just link this file the same way you learned in Module 9.

This first lesson covers the foundation: resetting default spacing, styling the body, making the header sticky, and turning each section into a clean card.

• The universal selector, the asterisk symbol, resets margin and padding to zero on every element. Browsers add small default spacing that varies across browsers, so wiping it out first gives you a predictable starting point.
• The body sets your base font, text color, and background. Everything else on the page inherits this unless told otherwise.
• The header uses position: sticky with top: 0, keeping it fixed at the top of the screen as the visitor scrolls down.
• Each section becomes a white card using background, padding, border-radius for rounded corners, and box-shadow for a soft shadow underneath.
• Section headings get a coloured underline with border-bottom, which draws the eye without extra HTML.

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



body {

  font-family: 'Segoe UI', Arial, sans-serif;

  line-height: 1.6;

  color: #2b2b2b;

  background-color: #f7f8fa;

}



/* Header */

header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 20px 40px;

  background-color: #1f2937;

  color: white;

  position: sticky;

  top: 0;

  z-index: 10;

}



header h1 {

  font-size: 22px;

  letter-spacing: 0.5px;

}



nav a {

  color: #d1d5db;

  text-decoration: none;

  margin-left: 25px;

  font-size: 15px;

  transition: color 0.2s ease;

}



nav a:hover {

  color: #ffffff;

}



/* Main content */

main {

  max-width: 800px;

  margin: 0 auto;

  padding: 40px 20px;

}



section {

  background: white;

  padding: 30px;

  margin-bottom: 30px;

  border-radius: 10px;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);

}



section h2 {

  font-size: 24px;

  color: #1f2937;

  margin-bottom: 15px;

  border-bottom: 3px solid #3b82f6;

  display: inline-block;

  padding-bottom: 5px;

}



section p {

  margin-bottom: 15px;

  color: #4b5563;

}



/* About section image */

#about img {

  border-radius: 50%;

  border: 3px solid #3b82f6;

  margin-top: 10px;

}

Explanation:

• nav a:hover is a pseudo-class, meaning it only applies when the mouse is actually over a link.
• transition: color 0.2s ease tells the browser to fade that color change smoothly instead of switching instantly.
• The main block keeps your content centered and limited in width so it does not stretch awkwardly on large screens.
• The profile image becomes a circle with border-radius: 50%, with a coloured ring around it.