CSSmarkup~30 mins

CSS file organization - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Organizing CSS Files for a Simple Website

📖 Scenario: You are building a small website with a header, main content, and footer. To keep your styles neat and easy to manage, you want to organize your CSS into separate files for layout, colors, and typography.

🎯 Goal: Create three CSS files named layout.css, colors.css, and typography.css. Then, link them all in the HTML file so the styles apply correctly.

📋 What You'll Learn

Create a CSS file called layout.css with styles for the header, main, and footer layout.

Create a CSS file called colors.css with color styles for background and text.

Create a CSS file called typography.css with font styles for headings and paragraphs.

Create an HTML file that links all three CSS files in the correct order.

Use semantic HTML elements: <header>, <main>, and <footer>.

💡 Why This Matters

🌍 Real World

Organizing CSS into multiple files helps teams work together and keeps styles easy to find and update in real websites.

💼 Career

Web developers often split CSS into logical files for maintainability and collaboration in professional projects.

Progress0 / 4 steps

Create layout.css with basic layout styles

Create a CSS file named layout.css. Inside it, write styles to set the header and footer background color to #f0f0f0, and give the main element a padding of 1rem.

CSS

/* Your CSS code here for layout styles */

Need a hint?

Use selectors header, footer, and main with the properties given.

Create colors.css with background and text colors

Create a CSS file named colors.css. Add styles to set the body background color to #ffffff and the text color to #333333.

CSS

/* Your CSS code here for colors */

Need a hint?

Use the body selector to set background and text colors.

Create typography.css with font styles

Create a CSS file named typography.css. Add styles to set the font family of all p elements to Arial, sans-serif and the font weight of all h1 elements to bold.

CSS

/* Your CSS code here for typography */

Need a hint?

Use selectors p and h1 to set font styles.

Link all CSS files in the HTML file

Create an HTML file with semantic elements <header>, <main>, and <footer>. Inside the <head>, add three <link> tags to include layout.css, colors.css, and typography.css in that exact order.

CSS




  
  
  Simple Website
  


  
    Welcome
  
  
    This is the main content area.
  
  
    Footer information

Need a hint?

Use three <link> tags inside <head> to include the CSS files in the correct order.