CSSmarkup~30 mins

Inline, internal, and external CSS - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Styling a Simple Webpage with Inline, Internal, and External CSS

📖 Scenario: You are creating a simple webpage for a small bakery. You want to style the page using three different CSS methods: inline styles, internal styles, and external styles. This will help you understand how CSS can be applied in different ways.

🎯 Goal: Build a webpage with a heading, a paragraph, and a button. Style the heading with inline CSS, the paragraph with internal CSS, and the button with external CSS.

📋 What You'll Learn

Create an HTML file with a heading, paragraph, and button

Use inline CSS to color the heading text red

Use internal CSS to make the paragraph text blue and italic

Use external CSS to style the button with a green background and white text

Link the external CSS file correctly in the HTML

💡 Why This Matters

🌍 Real World

Web developers often use inline, internal, and external CSS to style webpages depending on the situation. Understanding these methods helps in maintaining and organizing styles effectively.

💼 Career

Knowing how to apply CSS in different ways is essential for frontend web development jobs, enabling you to create visually appealing and well-structured websites.

Progress0 / 4 steps

Create the basic HTML structure with content

Create an HTML file with a <h1> heading that says Welcome to Sweet Bakery, a <p> paragraph that says Freshly baked goods every day!, and a <button> with the text Order Now.

CSS

Need a hint?

Start by writing the HTML tags for heading, paragraph, and button with the exact text.

Add inline CSS to style the heading

Add inline CSS to the <h1> tag to make its text color red using the style attribute.

CSS




    
    
    Sweet Bakery


    
    Welcome to Sweet Bakery
    Freshly baked goods every day!
    Order Now

Need a hint?

Use the style attribute inside the <h1> tag to set color: red;.

Add internal CSS to style the paragraph

Inside the <head> section, add a <style> block. Inside it, write CSS to make the <p> text color blue and italic using the font-style property.

CSS




    
    
    Sweet Bakery
    
    
        /* Your CSS here */
    


    Welcome to Sweet Bakery
    Freshly baked goods every day!
    Order Now

Need a hint?

Inside the <style> tags, write CSS for p selector with color: blue; and font-style: italic;.

Create external CSS file and link it to style the button

Create an external CSS file named styles.css with CSS to style the button element. Set the button background color to green and text color to white. Then, link this CSS file inside the <head> of your HTML using a <link> tag.

CSS




    
    
    Sweet Bakery
    
        p {
            color: blue;
            font-style: italic;
        }
    
    


    Welcome to Sweet Bakery
    Freshly baked goods every day!
    Order Now



/* styles.css */
/* Your CSS here */

Need a hint?

Create a file named styles.css with CSS for button to have background-color: green; and color: white;. Then add a <link> tag in the <head> to connect it.