Linking CSS to HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to link an external CSS file named "styles.css" to the HTML document.

CSS

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

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

A"script"

B"stylesheet"

C"style"

D"css"

Attempts:

3 left

💡 Hint

Common Mistakes

Using rel="script" or rel="style" instead of "stylesheet".

Forgetting to add quotes around the attribute value.

The rel attribute specifies the relationship between the HTML document and the linked file. For CSS files, it should be "stylesheet".

2fill in blank

medium

Complete the HTML link tag to correctly include the CSS file with the right attribute for the file path.

CSS

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

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

Asrc

Blink

Chref

Dfile

Attempts:

3 left

💡 Hint

Common Mistakes

Using src instead of href in the link tag.

Using an incorrect attribute like file or link.

The href attribute specifies the path to the CSS file to link.

3fill in blank

hard

Fix the error in the link tag to properly link the CSS file.

CSS

<link rel="stylesheet" href=[1]>

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

A"styles.css"

Bstyles.css

C'styles.css'

D"style.css"

Attempts:

3 left

💡 Hint

Common Mistakes

Not using quotes around the file name.

Using single quotes instead of double quotes (valid in HTML but here we expect double quotes).

Typo in the file name.

The value of the href attribute must be enclosed in double quotes for valid HTML syntax.

4fill in blank

hard

Fill both blanks to correctly link a CSS file named "main.css" with the right attributes.

CSS

<link [1]=[2] href="main.css">

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

Arel

B"stylesheet"

Csrc

D"style"

Attempts:

3 left

💡 Hint

Common Mistakes

Using src instead of rel.

Using "style" instead of "stylesheet".

The rel attribute should be set to "stylesheet" to link CSS files properly.

5fill in blank

hard

Fill all three blanks to correctly link an external CSS file named "theme.css" in the HTML head.

CSS

<link [1]=[2] [3]="theme.css">

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

Arel

B"stylesheet"

Chref

Dsrc

Attempts:

3 left

💡 Hint

Common Mistakes

Using src instead of href.

Mixing up the order of attributes.

Forgetting quotes around attribute values.

The link tag needs rel="stylesheet" and href="theme.css" to properly link the CSS file.