How to add header and footer CSS in Angular

If you’re building a web application using Angular, you’ll likely want to style your layout with a consistent header and footer. In this guide, we’ll show you exactly how to add header and footer CSS in Angular, using clean and scalable practices.

---

✅ Why Add a Header and Footer in Angular?

The header and footer sections:

• Improve navigation and branding

• Contain key info like menus, logos, and copyright

• Enhance the user experience and visual structure

---

🛠️ Step 1: Create Header and Footer Components

Use Angular CLI to generate reusable components:

This creates folders with .html, .ts, and .css files for each.

---

🎨 Step 2: Add CSS to Header and Footer

Edit the header.component.css and footer.component.css files:

Example – header.component.css

Example – footer.component.css

Then update your HTML templates:

header.component.html

footer.component.html

---

🧩 Step 3: Include Header and Footer in App Layout

Add these components in your app.component.html (or layout file):

Now the header and footer appear on every page.

---

📁 Step 4: Use Global or Shared Styles (Optional)

If you want shared styles across multiple components:

• Use styles.css or styles.scss (global file)

• Or create a layout.css and import it in both header and footer

---

🔚 Conclusion

Adding a styled header and footer in Angular is simple with reusable components and modular CSS. By customizing the styles, you ensure a professional and consistent layout across your entire Angular application.