Inline vs external precedence in CSS - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply a red color using inline CSS.

CSS

<p style="color: [1];">This text is red.</p>

Drag options to blanks, or click blank then click option'

Ared

Bblue

Cgreen

Dyellow

Attempts:

3 left

💡 Hint

Common Mistakes

Using a color name that doesn't match the intended color.

Trying to set color outside the style attribute.

The inline style color: red; directly sets the text color to red, which has the highest precedence over external styles.

2fill in blank

medium

Complete the external CSS rule to make all paragraphs blue.

CSS

p { color: [1]; }

Drag options to blanks, or click blank then click option'

Ared

Bgreen

Cblue

Dblack

Attempts:

3 left

💡 Hint

Common Mistakes

Using a color different from blue.

Missing the semicolon at the end of the declaration.

The CSS rule p { color: blue; } sets all paragraph text to blue unless overridden by inline styles.

3fill in blank

hard

Fix the error in the inline style to make the text green.

CSS

<p style="color: [1]">This text should be green.</p>

Drag options to blanks, or click blank then click option'

Agren

Bgreen

C#00FF00

Drgb(0,255,0)

Attempts:

3 left

💡 Hint

Common Mistakes

Misspelling the color name.

Using a color format not supported inline without quotes.

The correct CSS color name is green. Misspelling it as gren causes the style to fail.

4fill in blank

hard

Complete the code to create an external CSS rule that sets paragraph text to blue, but inline style overrides it to red.

CSS

<style>
p { color: [1]; }
</style>
<p style="color: red;">This text is red.</p>

Drag options to blanks, or click blank then click option'

A{

B}

Cblue

Dred

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong curly brace symbols.

Setting the wrong color in external CSS.

The external CSS rule must open with { and set color: blue;. The inline style color: red; overrides this.

5fill in blank

hard

Complete the code to complete the HTML and CSS so the paragraph text is green due to inline style overriding external blue.

CSS

<style>
p { color: [1]; }
</style>
<p style="color: green;">This text is green.</p>

Drag options to blanks, or click blank then click option'

A{

Bblue

C}

Dred

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to close the CSS rule with a brace.

Using the wrong color values.

The external CSS sets paragraph color to blue inside curly braces. The inline style color: green; overrides it, so the text appears green.