CSSmarkup~30 mins

!important usage in CSS - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Using !important in CSS to Override Styles

📖 Scenario: You are creating a simple webpage with two paragraphs. Both paragraphs have a default blue text color from a CSS rule. However, you want the second paragraph to always show red text color, even if other styles try to change it.

🎯 Goal: Build a webpage with two paragraphs. Use CSS to set the default text color to blue. Then, use !important to make the second paragraph's text color red, overriding the default style.

📋 What You'll Learn

Create an HTML skeleton with two paragraphs inside the <body>.

Add a CSS rule that sets all paragraphs' text color to blue.

Add a CSS rule that sets the second paragraph's text color to red using !important.

Ensure the second paragraph's text color stays red even if other styles try to change it.

💡 Why This Matters

🌍 Real World

Web developers often need to override styles from other CSS files or browser defaults. Using !important helps ensure critical styles apply as intended.

💼 Career

Understanding !important is useful for front-end developers when debugging style conflicts or working with large CSS codebases.

Progress0 / 4 steps

Create the HTML structure with two paragraphs

Write the HTML code to create a basic webpage with a <!DOCTYPE html>, <html lang="en">, <head> with a <title>, and a <body> containing exactly two paragraphs. The first paragraph should have the text "This is the first paragraph." and the second paragraph should have the text "This is the second paragraph.".

CSS




    Paragraph Colors

Need a hint?

Remember to include the <!DOCTYPE html> declaration and set the language attribute to "en" in the <html> tag.

Add CSS to set all paragraphs' text color to blue

Inside the <head> section, add a <style> block. Write a CSS rule that selects all <p> elements and sets their color property to blue.

CSS




    Paragraph Colors
    
        /* Your code here */
    


    This is the first paragraph.
    This is the second paragraph.

Need a hint?

Use the selector p to target all paragraphs and set color: blue;.

Add CSS rule to make the second paragraph's text color red with !important

Inside the existing <style> block, add a CSS rule that selects the second paragraph using p:nth-of-type(2). Set its color property to red !important to override the previous blue color.

CSS




    Paragraph Colors
    
        p {
            color: blue;
        }
        /* Your code here */
    


    This is the first paragraph.
    This is the second paragraph.

Need a hint?

Use the selector p:nth-of-type(2) to target the second paragraph and add !important after the color value.

Add a third CSS rule to try to change the second paragraph color to green

Inside the <style> block, add a CSS rule that selects the second paragraph using p:nth-of-type(2) and sets its color property to green. This will test that the !important red color still applies.

CSS




    Paragraph Colors
    
        p {
            color: blue;
        }
        p:nth-of-type(2) {
            color: red !important;
        }
        /* Your code here */
    


    This is the first paragraph.
    This is the second paragraph.

Need a hint?

Even though you add a green color rule, the red color with !important will still show.