CSS file organization - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

CSS

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

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

A"stylesheet"

B"style"

C"css"

D"link"

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect values like "style" or "css" for the rel attribute.

Forgetting to include the rel attribute.

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 CSS code to import another CSS file named "theme.css" inside a CSS file.

CSS

@import url([1]);

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

A"theme.css"

Btheme.css

C'theme.css'

Durl(theme.css)

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting quotes around the file name.

Using url() twice or incorrect syntax.

The @import rule uses url() with the file path in quotes. So @import url("theme.css"); is correct.

3fill in blank

hard

Fix the error in the CSS comment syntax below by filling the blank.

CSS

body { /* [1] This is a comment */ background-color: white; }

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

A#

B//

C/*

D*

Attempts:

3 left

💡 Hint

Common Mistakes

Using JavaScript style comments like // or #.

Forgetting to close the comment properly.

CSS comments start with /* and end with */. Inside the comment, the asterisk * is used to close it properly.

4fill in blank

hard

Complete the code to create a CSS rule that applies a red color only to paragraphs inside a section with class "intro".

CSS

section[1] p  { color: red; }

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

A.intro

B#intro

C>

Attempts:

3 left

💡 Hint

Common Mistakes

Using #intro which selects by ID, not class.

Using the child selector > which only selects direct children.

The selector section.intro p targets all p elements inside a section with class intro. The space means descendant.

5fill in blank

hard

Fill all three blanks to create a CSS rule that sets font size to 1.2rem for all list items inside an unordered list with ID "menu".

CSS

#[1] [2] li { font-size: [3]; }

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

Amenu

B>

C1.2rem

Dul

Attempts:

3 left

💡 Hint

Common Mistakes

Using class selector instead of ID selector.

Using child selector > instead of descendant selector.

Using incorrect units for font size.

The selector #menu ul li targets all li elements inside ul inside the element with ID menu. The font size is set to 1.2rem.