CSSmarkup~30 mins

Linking CSS to HTML - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Linking CSS to HTML

📖 Scenario: You are creating a simple webpage for a local bakery. You want to make the page look nice by adding colors and fonts using CSS.

🎯 Goal: Build a basic HTML page and link an external CSS file to style the page with background color and font changes.

📋 What You'll Learn

Create an HTML file with a basic structure including <!DOCTYPE html>, <html>, <head>, and <body> tags.

Add a <link> tag inside the <head> to connect an external CSS file named styles.css.

Create a CSS file named styles.css that changes the background color of the page and the font family of the text.

Ensure the CSS file is correctly linked so the styles appear when the HTML file is opened in a browser.

💡 Why This Matters

🌍 Real World

Linking CSS to HTML is a fundamental skill for creating visually appealing websites. It separates content (HTML) from design (CSS), making websites easier to maintain and update.

💼 Career

Web developers and designers must know how to link CSS files to HTML to build professional and maintainable websites.

Progress0 / 4 steps

Create the basic HTML structure

Write the basic HTML skeleton with <!DOCTYPE html>, <html lang="en">, <head>, and <body> tags. Inside the <body>, add a <h1> heading with the text Welcome to the Bakery.

CSS

Need a hint?

Start by typing the basic HTML tags. Don't forget the lang attribute in the <html> tag and the <h1> heading inside the body.

Add the link to the external CSS file

Inside the <head> section of your HTML, add a <link> tag that links to the CSS file named styles.css. Use the attributes rel="stylesheet" and href="styles.css".

CSS




    
    
    Bakery
    


    Welcome to the Bakery

Need a hint?

Use a <link> tag with rel="stylesheet" and href="styles.css" inside the <head> section.

Create the CSS file with styles

Create a CSS file named styles.css. Inside it, write CSS rules to set the body background color to #f8e8d4 and the font family to Arial, sans-serif.

CSS

/* Your CSS code here */

Need a hint?

Write CSS rules for the body selector. Use background-color and font-family properties.

Verify the CSS is linked and styles apply

Open the HTML file in a browser to check that the background color is light beige and the text uses the Arial font. If needed, add a <meta charset="UTF-8"> tag inside the <head> to ensure proper character display.

CSS

Need a hint?

Make sure the <meta charset="UTF-8"> tag is present in the <head> and the CSS file is linked correctly.