Bird
Raised Fist0
CSSmarkup~20 mins

Linking CSS to HTML - Practice Problems & Coding Challenges

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Challenge - 5 Problems
🎖️
CSS Linking Master
Get all challenges correct to earn this badge!
Test your skills under time pressure!
📝 Syntax
intermediate
2:00remaining
What is the correct way to link an external CSS file in HTML?
Choose the option that correctly links a CSS file named styles.css in the HTML <head> section.
CSS
<head>
  <!-- Link CSS here -->
</head>
A<script src="styles.css"></script>
B<style src="styles.css"></style>
C<link rel="stylesheet" href="styles.css">
D<link href="styles.css" rel="script">
Attempts:
2 left
💡 Hint
The <link> tag is used for external CSS files and needs a relationship attribute.
🧠 Conceptual
intermediate
2:00remaining
What happens if you use the wrong attribute to link CSS?
If you write <link href="styles.css" rel="script"> in your HTML, what will happen?
CSS
<head>
  <link href="styles.css" rel="script">
</head>
AThe CSS file will not load and styles won't apply.
BThe CSS file will load and styles will apply correctly.
CThe browser will treat it as a JavaScript file and run it.
DThe browser will show a syntax error and stop rendering.
Attempts:
2 left
💡 Hint
The rel attribute tells the browser what kind of file it is.
❓ rendering
advanced
2:00remaining
What visual result will this HTML and CSS produce?
Given the HTML and CSS below, what color will the paragraph text appear in the browser?
CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Test</title>
</head>
<body>
  <p>Hello world!</p>
</body>
</html>

/* styles.css content */
p { color: blue; }
AThe paragraph text will be blue.
BThe paragraph text will be black (default).
CThe paragraph text will be red.
DThe paragraph text will not appear.
Attempts:
2 left
💡 Hint
The CSS file sets the paragraph color to blue.
❓ selector
advanced
2:00remaining
Which CSS selector will style only paragraphs inside a <section>?
You want to style only <p> elements that are inside a <section> element. Which selector should you use in your CSS?
Asection > p { color: green; }
Bsection p { color: green; }
Cp section { color: green; }
Dp > section { color: green; }
Attempts:
2 left
💡 Hint
Think about the order and relationship between elements in selectors.
❓ accessibility
expert
3:00remaining
How to ensure linked CSS does not reduce accessibility?
When linking an external CSS file, which practice helps maintain good accessibility for users with visual impairments?
AUse only light colors and small fonts for a sleek look.
BDisable keyboard navigation styles to simplify design.
CAvoid using semantic HTML since CSS controls appearance.
DUse high contrast colors and ensure styles do not hide content.
Attempts:
2 left
💡 Hint
Accessibility means everyone can use your site easily, including those with vision challenges.

Practice

(1/5)
1. What is the correct HTML tag to link an external CSS file to an HTML document?
easy
A. <script>
B. <style>
C. <link>
D. <css>

Solution

  1. Step 1: Identify the tag used for linking external resources

    The <link> tag is used in HTML to connect external files like CSS.

  2. Step 2: Confirm the tag's purpose for CSS

    <style> is for internal CSS, <script> is for JavaScript, and <css> is not a valid tag.

  3. Final Answer:

    <link> -> Option C

  4. Quick Check:

    Link CSS with <link> tag [OK]
Hint: Use <link> tag inside <head> to connect CSS [OK]
Common Mistakes:
  • Using <style> tag for external CSS
  • Using <script> tag instead of <link>
  • Trying to use a non-existent <css> tag
2. Which of the following is the correct syntax to link a CSS file named "styles.css" in your HTML document?
easy
A.
B.
C.
D.

Solution

  1. Step 1: Check the correct attributes for linking CSS

    The <link> tag needs rel="stylesheet" and href="filename.css" to link CSS properly.

  2. Step 2: Eliminate incorrect attribute usage

    rel="script" is wrong, <style> does not use src, and <script> is for JavaScript files.

  3. Final Answer:

    <link rel="stylesheet" href="styles.css"> -> Option A

  4. Quick Check:

    Use rel="stylesheet" and href for CSS link [OK]
Hint: Use rel="stylesheet" and href="file.css" in <link> [OK]
Common Mistakes:
  • Swapping rel and href attribute values
  • Using <style> tag with src attribute
  • Using <script> tag for CSS files
3. Given this HTML snippet, what will be the color of the paragraph text?
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>Hello World!</p>
</body>

And the CSS file styles.css contains:
p { color: blue; }
medium
A. Red
B. Blue
C. Green
D. Black (default)

Solution

  1. Step 1: Understand the CSS selector and property

    The CSS targets all <p> elements and sets their color to blue.

  2. Step 2: Confirm the CSS file is linked correctly

    The HTML uses <link rel="stylesheet" href="styles.css">, so styles.css applies to the page.

  3. Final Answer:

    Blue -> Option B

  4. Quick Check:

    Linked CSS sets <p> color to blue [OK]
Hint: Linked CSS styles apply to matching HTML elements [OK]
Common Mistakes:
  • Assuming default black color without checking CSS
  • Confusing CSS file name or path
  • Ignoring the <link> tag in <head>
4. What is wrong with this HTML code if the CSS file "main.css" is not applying styles?
<head>
  <link rel="stylesheet" href="main.css">
</head>
<body>
  <h1>Welcome</h1>
</body>

Assuming the file "main.css" exists in the same folder.
medium
A. The <link> tag is correctly placed and written.
B. The <link> tag should be inside the <body> tag.
C. The href attribute value is incorrect.
D. The <link> tag is missing the 'rel' attribute.

Solution

  1. Step 1: Check the <link> tag attributes

    The <link> tag has rel="stylesheet" and href="main.css", which is correct.

  2. Step 2: Verify placement of the <link> tag

    The <link> tag is correctly placed inside the <head> section, which is standard practice.

  3. Final Answer:

    The <link> tag is correctly placed and written. -> Option A

  4. Quick Check:

    Correct <link> tag with rel and href in <head> [OK]
Hint: Place <link> in <head> with rel and correct href [OK]
Common Mistakes:
  • Putting <link> inside <body> instead of <head>
  • Forgetting rel="stylesheet" attribute
  • Incorrect file path in href
5. You want to link two CSS files, "base.css" and "theme.css", to your HTML page. "theme.css" should override some styles in "base.css". Which is the correct way to link them?
hard
A.
B.
C.
D.

Solution

  1. Step 1: Understand CSS loading order

    CSS files loaded later override earlier ones if selectors match.

  2. Step 2: Place base.css first, then theme.css

    Link base.css first, then theme.css so theme.css can override base styles.

  3. Step 3: Check options for correct syntax and order

    <link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="theme.css"> links base.css first, then theme.css correctly. <link rel="stylesheet" href="theme.css"> <link rel="stylesheet" href="base.css"> reverses order. <style>@import url('theme.css'); @import url('base.css');</style> uses @import inside <style> tag but loads theme.css first then base.css, so base overrides theme incorrectly. <link rel="stylesheet" href="base.css" theme="theme.css"> is invalid syntax.

  4. Final Answer:

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

  5. Quick Check:

    Load base.css before theme.css for overrides [OK]
Hint: Link base.css first, then theme.css to override [OK]
Common Mistakes:
  • Reversing the order of CSS files
  • Using invalid attributes in <link>
  • Using @import inside <style> instead of <link>