CSS file organization - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why use multiple CSS files in a project?

Which of the following is the main reason to split CSS into multiple files in a large web project?

A To make the website load slower by adding more HTTP requests

B To organize styles by components or features for easier maintenance

C To confuse developers by scattering styles across many files

D To prevent styles from applying to any HTML elements

💡 Hint

Think about how organizing your clothes in different drawers helps you find them faster.

Splitting CSS into multiple files helps keep styles organized by components or features, making it easier to maintain and update the code.

📝 Syntax

intermediate

Correct way to import CSS files

Which CSS code correctly imports another CSS file named "buttons.css" inside "styles.css"?

CSS

/* Inside styles.css */

A include 'buttons.css';

B import 'buttons.css';

C @import url('buttons.css');

D link rel='stylesheet' href='buttons.css';

💡 Hint

Think about how you include styles inside CSS files, not HTML tags.

The correct syntax to import CSS inside another CSS file is @import url('filename.css');

❓ layout

advanced

Effect of CSS file order on layout

Given two CSS files loaded in this order in HTML:

<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="theme.css">

If both files style the same element, which file's styles will apply?

A Styles from theme.css will override base.css

B Styles from base.css will override theme.css

C Both styles will apply equally causing a conflict

D Neither style will apply because of conflict

💡 Hint

Later styles in CSS files override earlier ones if selectors have the same specificity.

CSS rules loaded later override earlier ones if they have the same specificity. Since theme.css is loaded after base.css, its styles take precedence.

❓ accessibility

advanced

Organizing CSS for accessibility

Which CSS file organization approach best supports accessibility improvements?

A Separate a CSS file dedicated to accessibility styles like focus outlines and high contrast

B Mix accessibility styles randomly with all other styles in one big file

C Avoid writing any accessibility styles in CSS

D Put accessibility styles only in inline styles inside HTML

💡 Hint

Think about how having a special drawer for important tools helps you find them quickly.

Having a dedicated CSS file for accessibility styles helps developers easily find and update those styles, improving maintainability and accessibility.

❓ selector

expert

Specificity and file organization impact

You have two CSS files:

1. components.css with selector .btn { color: blue; }
2. overrides.css with selector button.btn { color: red; }

Both files are loaded in this order:
<link rel="stylesheet" href="components.css">
<link rel="stylesheet" href="overrides.css">

What color will a <button class="btn"> show?

A Red, because components.css styles are ignored

B Blue, because components.css is loaded first

C Blue, because .btn selector is more specific than button.btn

D Red, because overrides.css has a more specific selector and is loaded last

💡 Hint

More specific selectors override less specific ones if loaded later.

The selector button.btn is more specific than .btn alone, and since overrides.css is loaded after components.css, the button text will be red.