Inline, internal, and external CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add an inline style that makes the text red.

CSS

<p style=[1]>This text is red.</p>

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

A"background-color: blue;"

B"font-size: 20px;"

C"color: red;"

D"text-align: center;"

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around the CSS string.

Using CSS property names incorrectly.

The inline style uses the style attribute with CSS properties inside quotes. To make text red, use color: red;.

2fill in blank

medium

Complete the code to add an internal CSS style that makes all <h1> headings blue.

CSS

<style>
h1 { [1]: blue; }
</style>

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

Atext-align

Bbackground-color

Cfont-weight

Dcolor

Attempts:

3 left

💡 Hint

Common Mistakes

Using background-color instead of color.

Missing the colon after the property name.

To change the text color of headings, use the CSS property color. Here, it sets all <h1> text to blue.

3fill in blank

hard

Fix the error in the external CSS link tag to correctly link the stylesheet.

CSS

<link [1]="styles.css">

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

Ahref

Btype

Crel

Dsrc

Attempts:

3 left

💡 Hint

Common Mistakes

Using src instead of href.

Omitting the rel attribute.

The <link> tag uses the href attribute to specify the path to the CSS file.

4fill in blank

hard

Fill both blanks to create an internal CSS style that centers text and makes it bold.

CSS

<style>
[1] {
  text-align: [2];
  font-weight: bold;
}
</style>

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

Ap

Bdiv

Ccenter

Dleft

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong selector like div instead of p.

Using left instead of center for alignment.

The CSS rule targets all <p> elements and sets their text alignment to center and font weight to bold.

5fill in blank

hard

Fill all three blanks to create an external CSS link with correct attributes and path.

CSS

<link [1]="stylesheet" [2]=[3]>

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

Arel

Bhref

C"styles.css"

Dtype

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up rel and href attributes.

Forgetting quotes around the file path.

The <link> tag needs rel="stylesheet" to specify it's a CSS file, href="styles.css" for the file path, and optionally type="text/css" but it's not required.